基于vue的video播放器的实现示例
作者：地瓜哥
这篇文章主要介绍了基于vue的video播放器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
当现有video播放器不能满足需求时，需要自己对video进行封装。
video事件
- loadstart: 在视频开始加载时触发，给currentTime赋值(历史播放记录或0)。
- durationchange: 元信息已载入或已改变，视频的长度发生了改变。获取到视频长度(duration，并给currentTime赋值(历史播放记录或0))。
- playing: 在视频开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
- pause: 播放暂停时触发。
- timeupdate: currentTime改变, 更新播放进度。处理播放进度条
- seeked: 指定播放位置
- waiting: 缓冲
- ended: 播放结束, 重置状态
- WeixinJSBridgeReady: 在微信中使用video，需要监听weixinJSBridgeReady事件, 在回调函数里执行play()命令。
直播协议
HLS(HTTP Live Streaming)由Apple提出的直播流协议。IOS和高版本Android都支持HLS。HLS主要由.m3u8和.ts两种播放文件。HLS具有高兼容性，高可扩展性，但会直播延时。HLS协议是将直播流分成一段一段的小段视频去下载播放的，所以假设列表里面的包含5个ts文件，每个ts文件包含5秒的视频内容，那么整体的延迟就是25秒。
RTMP(Real Time Messaging Protocol)是Macromedia开发的一套视频直播协议，现在属于Adobe。RTMP基于flash无法在IOS的浏览器里播放，但是实时性比HLS要好。
HTTP-FLV针对于FLV视频格式做的直播分发流，延时低。但移动端不支持。
结论：HTTP-FLV延时低，优先使用。若设备不支持HTTP-FLV，使用flv.js。若设备不支持flv.js，则使用HLS，但HLS延迟大。
封装video
/** HTML **/
<div class="video">
<!-- video player -->
<video
class="video__player"
ref="videoPlayer"
preload="auto"
:autoplay="options.autoplay"
:muted="options.muted"
webkit-playsinline="true"
playsinline="true"
x-webkit-airplay="allow"
x5-video-player-type="h5-page"
x5-video-orientation="portraint"
style="object-fit:cover;"
>
<source :src="options.src" />
</video>
<!-- video poster -->
<div
v-show="showPoster"
class="video__poster"
:style="{'background-image': 'url(' + options.pic + ')'}"
></div>
<!-- video loading -->
<div v-show="showLoading" class="video__Loading">
<span class="video__Loading-icon"></span>
</div>
<!-- video pause -->
<div @click="handleVideoPlay" class="video__pause">
<span v-show="!videoPlay" class="video__pause-icon"></span>
</div>
</div>
/** js**/
props: {
options: {
type: Object,
default: () => {}
}
},
data() {
return {
videoPlay: false, // 是否正在播放
videoEnd: false, // 是否播放结束
showPoster: true, // 是否显示视屏封面
showLoading: false, // 加载中
currentTime: 0, // 当前播放位置
currentVideo: {
duration: this.options.duration
},
}
},
mounted() {
this.videoPlayer = this.$refs.videoPlayer;
this.videoPlayer.currentTime = 0;
this.videoPlayer.addEventListener("loadstart", e => {
this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
});
// 获取到视频长度
this.videoPlayer.addEventListener("durationchange", e => {
this.currentVideo.duration = this.videoPlayer.duration;
// 存在播放历史记录
this.videoPlayer.currentTime = (this.options.playProcess > 0) ? this.options.playProcess : 0;
});
this.videoPlayer.addEventListener("playing", e => {
this.showPoster = false;
this.videoPlay = true;
this.showLoading = false;
this.videoEnd = false;
});
// 暂停
this.videoPlayer.addEventListener("pause", () => {
this.videoPlay = false;
if (this.videoPlayer.currentTime < 0.1) {
this.showPoster = true;
}
this.showLoading = false;
});
// 播放进度更新
this.videoPlayer.addEventListener("timeupdate", e => {
this.currentTime = this.videoPlayer.currentTime;
},
false
);
// 指定播放位置
this.videoPlayer.addEventListener("seeked", e => {
});
// 缓冲
this.videoPlayer.addEventListener("waiting", e => {
this.showLoading = true;
});
// 播放结束
this.videoPlayer.addEventListener("ended", e => {
// 重置状态
this.videoPlay = false;
this.showPoster = true;
this.videoEnd = true;
this.currentTime = this.currentVideo.duration;
});
// 监听weixinJSBridgeReady事件，处理微信不能自动播放。但并不全部适用，加了暂停按钮，手动播放。
document.addEventListener('WeixinJSBridgeReady', () => {
this.videoPlayer.play();
}, false);
},
methods: {
handleVideoPlay() {
if (this.videoPlayer.paused) { // 播放
if(this.videoEnd) { // 重播
this.currentTime = 0;
this.videoPlayer.currentTime = 0;
}
this.videoPlayer.play();
this.videoPlay = true;
} else { // 暂停
this.videoPlayer.pause();
this.videoPlay = false;
}
}
}
[参考文章]:
到此这篇关于基于vue的video播放器的实现示例的文章就介绍到这了,更多相关vue video播放器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！