一、禁止/阻止/取消默认的全屏播放
亲测: IOS和安卓均有效
html
<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
属性
html
<video
autoplay
muted
x5-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部分
html
<video
ref="videoRef"
:src=""
muted
autoplay
x5-playsinline="true"
playsinline="true"
webkit-playsinline="true"
x-webkit-airplay="true"
x5-video-orientation="portraint"
></video>
JS部分
javascript
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部分
html
<video
ref="videoRef"
:src=""
muted
autoplay
x5-playsinline="true"
playsinline="true"
webkit-playsinline="true"
x-webkit-airplay="true"
x5-video-orientation="portraint"
id="vdHtml"
></video>
html
<video
ref="videoRef"
:src=""
muted
autoplay
x5-playsinline="true"
playsinline="true"
webkit-playsinline="true"
x-webkit-airplay="true"
x5-video-orientation="portraint"
></video>
JS部分
javascript
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
);
}
});