1.如何小窗不全屏( 亲测安卓微信 ios下通用)

1
2
3
<video  src=""  controls="" x5-playsinline=""
playsinline="" webkit-playsinline="" poster=""
preload="auto"></video>

2.页面打开自动播放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//  使用微信的wx.ready事件
var wx = require('weixin-js-sdk');
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});

wx.ready(function() {
document.getElementById('media').play(); //video标签id=media
});

3.React-js设置video的playsinline属性

最近的应该项目用到了video标签,发现这类标签的属性,在jsx定义根本不起作用~

1
2
<video class="video" x-webkit-airplay="true"  webkit-playsinline="true" 
src="https://teenagercdn.speakhi.com/front/web/static/video/login.mp4"></video>

就可以了,但是在react-js里面 webkit-playsinline这样写似乎没有作用,应该如何写?

参考

方案1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class video extends React.Component {
constructor(props) {
super(props);
this.state={

}

}
componentWillMount() {
Util.weixinTitle("视频播放");
const that=this;

}
componentDidMount(){
let videoPlayer=document.getElementById('videoCtrl');
videoPlayer.setAttribute('x5-playsinline' ,'')
videoPlayer.setAttribute('playsinline' ,'')
videoPlayer.setAttribute('webkit-playsinline' ,'')
}
render() {
const that=this;

return (
<div className='bg-black'>

</div>
)
}
}
export default video

方案2. react自带的设置私有属性方法

1
2
3
4
import React from 'react'

React.registerCustomAttributePrefix('e-');
React.registerCustomAttributePrefix('ng-');

html5 video微信浏览器视频不能自动播放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<audio preload="preload" controls id="car_audio" src="http://media.xitaoinfo.com/ei_zamenjiehunba.mp3" loop></audio> 
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<!-- 必须加在微信api资源 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
//一般情况下,这样就可以自动播放了,但是一些奇葩iPhone机不可以
document.getElementById('car_audio').play();
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
document.addEventListener("WeixinJSBridgeReady", function () {
document.getElementById('car_audio').play();
document.getElementById('video').play();
}, false);
</script>

移动端阻止视频自动全屏

阻止 ios视频自动全屏的代码
添加 playsinline 和 webkit-playsinline=”true”;
例如:

1
<video id="video" playsinline  webkit-playsinline ></video>

备注:
1、此方法仅仅针对 ios有效(safari、微信都有效)。
2、playsinline属性针对ios 10以上系统有效。
3、webkit-playsinline属性针对ios10以下系统有效。
4、安卓目前没有办法(机型不一样自带浏览器也效果也不一样,有一部分浏览器是可以小窗播放的。)

阻止安卓版微信 视频自动全屏的代码
添加 x5-playsinline
例如:

1
<video id="video" x5-playsinline ></video>

备注:此方法仅仅针对安卓版微信有效。

转载请保持原始链接

原始链接: https://ru23.com/note/75c16ddd.html