手把手从零开始---封装一个vue视频播放器组件 (2)

严格大于0的数字数组，其中1表示常速（100％），0.5表示半速（50％），2表示双速（200％）等。如果指定，Video.js显示控件（类vjs-playback-rate）允许用户从选择数组中选择播放速度。选项以从下到上的指定顺序显示。

例如：

videojs('my-player', { playbackRates: [0.5, 1, 1.5, 2] }); sources

类型： Array

一组对象，它们反映了本机元素具有一系列子元素的能力。这应该是带有src和type属性的对象数组。例如：

videojs('my-player', { sources: [{ src: 'http://path/to/video.mp4', type: 'video/mp4' }, { src: 'http://path/to/video.webm', type: 'video/webm' }] });

使用元素将具有相同的效果：

<video ...> <source src="http://path/to/video.mp4" type="video/mp4"> <source src="http://path/to/video.webm" type="video/webm"> </video> techCanOverridePoster

类型： boolean

使技术人员有可能覆盖玩家的海报并融入玩家的海报生命周期。当使用多个技术时，这可能很有用，每个技术都必须在播放新源时设置自己的海报。

techOrder

输入：Array，默认值：[‘html5’]

定义Video.js技术首选的顺序。默认情况下，这意味着Html5首选技术。其他注册的技术将在此技术之后按其注册顺序添加。

nativeVideoTracks

类型： boolean

可以设置为false禁用本机视频轨道支持。最常用于videojs-contrib-hls。

nativeControlsForTouch

类型： boolean

只有技术支持Html5，此选项可以设置true为强制触摸设备的本机控件。

美化video.js轮子 播放按钮居中

按照上面简单的使用方式使用之后，我们会发现视频播放待播放页面是这样的：

播放按钮默认在左上角，是作者认为会遮挡内容考虑的，不过这个是可以根据参数修改的，我们只需要给video标签加一个class（vjs-big-play-centered）就可以了。

<video ref="videoNode"></video>

加完之后效果如下：

加载中状态美化

video.js在播放视频的时候，有一个默认的加载中，这里我根据自己的想法提供了一种自定义加载中页面的思路，如有错，请大佬指正。

主要思路：

在播放器的上面悬浮覆盖一层div，用于显示自定义加载中的内容，再通过一个变量值控制这个div是否加载，通过监听视频的一个加载状态更新变量的值，以达到自定义加载中页面的目的。

主要代码：

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>

script
注：不是完整代码，只是关键代码

data() { return { loading: false }; }, let options = { autoplay: false, //自动播放 .....省略代码 }; 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; }); } );

效果如下:

当然，内容你也可以自定义。

视频打点

平时生活中，我们在看视频的时候，经常会看到，有些视频的进度条上面有一些小点，然后鼠标放上去会出现一些文字提示，那么我们的web播放器上面能不能也添加这个功能呢？当然是可以的！

首先还是去找了一波轮子，最后找到了videojs-markers这个轮子来实现该功能。

安装videojs-markers npm i videojs-markers -S 引入videojs-markers import "videojs-markers"; //引入样式 import "videojs-markers/dist/videojs.markers.css"; 使用videojs-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: [ { time: 20, text:'点位一' }, { time: 40, text:'点位二' }, { time: 130, text:'点位三' }, { time: 200, text:'点位四' } ], });