h5中嵌入视频自动播放的问题
在H5页面中嵌入视频的情况是比较多件的，有时候会碰到需要自动播放的情况，之前根本觉得这不是问题，但是自己的项目中需要视频的时候就有点sb了，达不到老板的要求，那个急呀~~~
各种查资料，找到一个方法，记录一下。核心是监听了canplaythrough事件，然后自己去让视频play()。
在这个过程中还发现，ios和安卓不一样，安卓上需要设置muted才能自动播放，ios没这个限制，当然，多媒体播放政策呢，厂商也一直在调整，需要关注。
还有就是有时候视频也可能有问题，导致不能自动播放，之前就是碰到了这个坑（在iphone8 plus,安卓上正常，但是在iPhone X，XR上不能自动播放），调了半天不行，最后发现视频的问题，日了狗了，
我这里还区分了安卓和ios，因为安卓全屏不仅丑，二期你直接返回呢不是退出视频，而是退出页面了，这个很蛋疼，ios的视频就挺好的，系统自带有操作按钮
所以安卓上取消了所有的控制按钮，ios就放开了按钮
<video v-show="os!==\'iOS\'" class="video" preload="auto" autoplay loop muted webkit-playsinline="true" playsinline="true" @loadstart="videoLoadStart" @canplaythrough="videoLoaded" poster="./images/cover.png" ref="videoEle" id="android" > <source :src="src" type="video/mp4"> </video>
videoLoaded(){
this.$refs.videoEle.play();
}
说道视频，还有一个问题，之前碰到过，就是切换不同的tag然后切换视频，发现吧视频路径写在source里面，就像上面那样是有问题的，直接把连接写在video里面，就像下面这样<video ref=”video” id=”video” preload=”metadata” :src=”videoSrc[videoIndex]” :poster=”preSrc[videoIndex]” webkit-playsinline playsinline</video>
data(){ preSrc:[ require("./images/pre1.png"), require("./images/video-pre.jpg") ], videoSrc:[ require("./images/invader-video.mp4"), require("./images/brithday.mp4") ], }
每次切换视频的时候需要先暂停视频，在切换，这样会比较好。
写的不好多多包涵，欢迎大家留言，共同学习进步！
上面的是对于自动播放的设置，其实video的东西还是非常多的，可监听的事件也很多，最近又在搞视频，并且是自己控制播放、暂停、loading之类的状态，然后参考w3c以及别人的实现，
自己整理了一下，在此过程中又发现了一些之前自己不爱知道的东西，比如设置播放速度，比如监听waiting之类的
当然，还是集成在vue项目里面，我贴一下自己写的组件吧。
<template>
<div class="video-item">
<div class="cover" @click="play">
<div class="loading" v-if="state === 0"></div>
<img
class="loaded"
v-if="state !== 1 && canplay"
src="../assets/video/icon-paly.png"
alt=""
/>
<img
class="pause"
v-if="state === 2"
src="../assets/video/pause.png"
alt=""
/>
</div>
<!--
@loadstart="loadStart"
@canplay="canPlay"
@playing="playing"
@pause="pause"
@waiting="waiting"
@ended="ended"
-->
<video
width="500"
src="https://www-test.loopslive.com/web-loops/gz/loopsActives/test/offline-party/assets/media/video.63581e4c.mp4"
ref="videoEl"
></video>
</div>
</template>
<script>
export default {
name: "VideoItem",
data() {
return {
canplay: false, //是否可以开始播放了
state: 0 // 0 loading 1 playing 2 pause 3 其他
};
},
methods: {
init() {
let videoEl = this.$refs.videoEl;
// videoEl.currentTime = 0;
videoEl.addEventListener("loadstart", this.loadStart);
videoEl.addEventListener("canplay", this.canPlay);
videoEl.addEventListener("playing", this.playing);
videoEl.addEventListener("pause", this.pause);
videoEl.addEventListener("waiting", this.waiting);
videoEl.addEventListener("ended", this.ended);
},
unbind() {
console.log("解绑");
let videoEl = this.$refs.videoEl;
videoEl.removeEventListener("loadstart", this.loadStart);
videoEl.removeEventListener("canplay", this.canPlay);
videoEl.removeEventListener("playing", this.playing);
videoEl.removeEventListener("pause", this.pause);
videoEl.removeEventListener("waiting", this.waiting);
videoEl.removeEventListener("ended", this.ended);
},
play() {
// console.log("play");
// this.$refs.videoEl.play();
let state = this.$refs.videoEl.paused;
// console.log(state);
if (state) {
this.$refs.videoEl.play();
this.$refs.videoEl.playbackRate = 5;
} else {
this.$refs.videoEl.pause();
}
// console.log(this.$refs.videoEl.readyState);
// setTimeout(()=>{
// console.log(this.$refs.videoEl.paused);
// },0)
},
//在文件开始加载且未实际加载任何数据前运行的脚本
loadStart() {
console.log("loadstart");
this.state = 0;
},
//当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）
canPlay() {
console.log("canplay");
this.state = 3;
this.canplay = true;
//可以显示播放按钮了
},
//当媒介已开始播放时运行的脚本
playing() {
console.log("playing");
//正在播放
this.state = 1;
this.canplay = false;
},
//当媒介被用户或程序暂停时运行的脚本。
pause() {
console.log("pause");
//暂停状态
this.state = 2;
},
//当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本
waiting() {
console.log("waiting");
this.state = 0;
},
ended() {
console.log("ended");
//播放结束，需要将状态变为播放状态
this.state = 3;
this.canplay = true;
}
},
mounted() {
this.init();
},
activated() {
console.log("activated");
this.init();
},
deactivated() {
console.log("deactivated");
this.unbind();
}
};
</script>
<style scoped>
.video-item {
position: relative;
width: 480px;
height: 260px;
}
video {
width: 480px;
height: 260px;
border-radius: 10px;
}
.cover {
position: absolute;
z-index: 10;
width: 480px;
height: 260px;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
}
.loading {
position: absolute;
width: 88px;
height: 88px;
border-radius: 50%;
border: 1em solid rgba(255, 255, 255, 0.2);
border-left: 1em solid #fff;
transform: rotateZ(0);
animation: rotate 1.1s infinite linear;
}
@keyframes rotate {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
</style>
其实就是监听各种事件，然后显示相对应得图标，当然，还有待完善的地方，比如，点击播放按钮之后，要显示播放的按钮一会，然后自动消失，就像西瓜视频或者B站似的，当然，西瓜视频有开源的播放器，有空可以下载下来研究一下。
版权声明：本文为ysla原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。