一、禁止/阻止/取消默认的全屏播放
亲测: IOS和安卓均有效
<video x5-playsinline="true"playsinline="true"webkit-playsinline="true"x-webkit-airplay="true"x5-video-orientation="portraint"><source :src="videoUrl" type="video/mp4">
</video>
注意: x5-video-player-type="h5"
这个参数不能用,用了的话安卓就失效了。
二、视频自动播放
H5页面:
- 需要在
video
标签中添加muted
和autoplay
属性
<video autoplaymutedx5-playsinline="true"playsinline="true"webkit-playsinline="true"x-webkit-airplay="true"x5-video-orientation="portraint"><source :src="videoUrl" type="video/mp4">
</video>
注意: 自动播放,会因为 muted
而静音。
微信:
微信
里面的自动播放只能用于IOS,不能用于安卓(目前来说)
IOS微信自动播放方法: 通过使用 jssdk
的 WeixinJSBridgeReady
播放
下面是VUE
代码
HTML部分
<videoref="videoRef":src=""mutedautoplayx5-playsinline="true"playsinline="true"webkit-playsinline="true"x-webkit-airplay="true"x5-video-orientation="portraint"
></video>
JS部分
onMounted(() => {if (WeixinJSBridge) {doPlay();} else {document.addEventListener("WeixinJSBridgeReady",function () {doPlay();},false);}
});// 通过微信桥接开始播放
function doPlay() {WeixinJSBridge.invoke("getNetworkType", {}, function (e) {let videoHtml = videoRef.value;videoHtml.play();});
}
安卓微信自动播放方法:
- 通过触摸屏幕开始播放(来达到自动播放效果)
- 开启
video
标签的controls
,通过做个蒙版,点击诱导的方式 - 据说可以通过
Tcplayer
腾讯云点播(未测试)
下面是VUE
代码
HTML部分
<videoref="videoRef":src=""mutedautoplayx5-playsinline="true"playsinline="true"webkit-playsinline="true"x-webkit-airplay="true"x5-video-orientation="portraint"id="vdHtml"
></video>
<videoref="videoRef":src=""mutedautoplayx5-playsinline="true"playsinline="true"webkit-playsinline="true"x-webkit-airplay="true"x5-video-orientation="portraint"
></video>
JS部分
onMounted(() => {let ua = navigator.userAgent;let isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Linux") > -1;let isWeixin = ua.indexOf("MicroMessenger") > 0;// 安卓触摸屏幕后播放if (isAndroid && isWeixin) {document.addEventListener("touchstart",function () {let video = document.getElementById("vdHtml");if (video) video.play();},false);}
});