效果如下：
播放器基本功能实现了，那么最后一步就是封装组件了。封装的思路很简单，就是将一些变化的属性通过props的方式从父组件中传入。
常用需要封装的属性注：此处只列举了部分，可以示实际情况添加或者删除
src : 视频或者直播的地址
height ：播放器的高度
controls ：控制条是否需要显示
markers ：视频打点的数据源
type ：播放视频的类型
根据这些属性，我们来改造一下我们的组件
template
<template> <div :style="{width:'100%',position:'relative',height:height}"> <div data-vjs-player> <video ref="videoNode">抱歉，您的浏览器不支持</video> </div> <div v-if="loading" :style="{width:'100%',height:height,position:'absolute',left:'0px',top:'0px'}" > <img :style="{width:'100%',height:height}" src="http://img.zcool.cn/community/0113b1576a43e90000018c1b87042d.gif" /> </div> </div> </template>script
data() { return { player: null, loading: false }; }, let options = { // autoplay: true, //自动播放 language: "zh-CN", controls: this.controls, //控制条 preload: "auto", //自动加载 errorDisplay: true, //错误展示 // fluid: true, //跟随外层容器变化大小，跟随的是外层宽度 width: "100%", height: this.height, // controlBar: false, // 设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但还是存在 // textTrackDisplay: false, // 不渲染字幕相关DOM userActions: { hotkeys: true //是否支持热键 }, notSupportedMessage: "此视频暂无法播放，请稍后再试", techOrder: ["flash"], sources: [ { src: this.src, type: this.type } ] }; let _this = this; this.player = videojs( this.$refs.videoNode, options, function onPlayerReady() { videojs.log(`Your player${self.index} is ready!`); _this.loading = true; _this.player.play(); _this.player.one("playing", function() { // 监听播放 // console.log("播放器开始播放"); _this.loading = false; }); } ); videojs.addLanguage("zh-CN", videozhCN); if (this.markers) { this.player.markers({ markerStyle: { // 标记样式 width: "0.7em", height: "0.7em", bottom: "-0.20em", "border-radius": "50%", "background-color": "orange", position: "absolute" }, markerTip: { display: true, /* 用于动态构建标记提示文本的回调函数。 只需返回一个字符串，参数标记是传递给插件的标记对象 */ text: function(marker) { return marker.text; } }, markers: this.markers, }); } 动态切换视频封装在视频播放的时候，我们经常会有视频切换之类的需求，那么这个怎么封装呢？很简单，只需要在组件中监听src的变化，如果src发生了变化，那么就重新加载视频，播放视频，代码如下：
watch: { src() { if (this.player) { let _this = this; this.loading = true;//重新显示加载状态 let myPlayer = this.player; myPlayer.off("timeupdate");//清空时间 myPlayer.reset();//重置播放器 myPlayer.pause();//暂停播放 myPlayer.src([//重新设置播放源 { src: this.src, type: "rtmp/flv" } ]); myPlayer.load(this.src);//重新加载视频 myPlayer.play();//播放视频 myPlayer.one("playing", function() { // 加载完成，开始播放 // console.log("播放器开始播放"); _this.loading = false;//隐藏加载状态 }); } } },这样一个简单的视频播放器就封装好了。
使用示例组件封装完成，免不了使用一下，代码如下：
<template> <basic-container> <el-row> <el-col :span="16"> <videoPlayer :controls="true" :src="url" type="video/mp4" :markers="markers"/> </el-col> </el-row> </basic-container> </template> <script> import videoPlayer from "@/components/videoPlayer/videoPlayer"; export default { components: { videoPlayer }, data() { return { url: "http://127.0.0.1/test.mp4", markers: [ { time: 20, text:'点位一' }, { time: 40, text:'点位二点位二点位二点位二点位二点位二点位二点位二' }, { time: 130, text:'点位三点位三点位三点位三点位三点位三' }, { time: 200, text:'点位四点位四点位四点位四点位四点位四' } ] }; } }; </script> <style lang="scss"> </style>参考:
videojs中文文档详解 https://blog.csdn.net/a0405221/article/details/80923090