h5视频播放代码
在h5上,⽤户要求视频⾏内⾃动播放,播放的时候要把视频静⾳。 这⾥有⼏个坑 1、安卓需要⼿动触发才能播放,并且会全屏 2、ios在10.1.1以上才能⽀持 3、安卓播放的时候视频不会静⾳,但是背景⾳乐会被停掉,并且播完视频后背景⾳乐不会⾃动继续播放,所以需要监听视频状态,播放完毕后把⾳乐重新播放起来
<video
src={require("../images/video.mp4")}
id="video"
preload="true"
controls="true"
x5-playsinline="true"
playsInline="true"
webkit-playsinline="true"
// volume="0"
muted="true"
onPlay={() => {
// document.querySelector("#video").volume = 0;
this.isVideoPaused = window.el_audio.paused;
// window.el_audio.pause();
// window.el_audio.play();
}}
onPause={() => {html播放音乐代码
if (!this.isVideoPaused) {
/
/ window.el_audio.play();
}
}}
></video>
复制代码
⾏内播放主要靠playsInline,静⾳设置muted 安卓下也能⾃动播放的话,需要监控的环境 这是在swiper下
if (!isVideoPlayPast && alIndex == 1) {
isVideoPlayPast = true;
setTimeout(() => {
try {
WeixinJSBridge.invoke('getNetworkType', {}, () => {
document.querySelector("video").play();
});
} catch (error) {
document.querySelector("video").play();
}
}, 500);
}
document.querySelector("video").pause();
复制代码
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论