使用html video标签在不同手机上视频播放器的样式和交互略有不同，所以采用Video.js视频播放插件来统一样式和交互。
Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。
安装
npm i -S video.js
引入
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
文档
HTML代码
<video id="my-video" class="video-js vjs-default-skin" controls preload="none" x5-playsinline="" webkit-playsinline="" playsinline="" poster="" x-webkit-airplay="allow">
<source src="">
</video>
css自定义播放按钮
css居中播放按钮
.vjs-big-play-button{
left:50% !important;
top: 50% !important;
margin-top: -1em ;
margin-left: -1.5em ;
}
css设置简洁播放按钮
.video-js .vjs-big-play-button {
border:unset!important;
background-color:unset!important;
}
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
font-size: 45px;
}
css设置海报占据整个视频空间
.vjs-poster {
background-size: 100% 100%!important;
}
js使用设置
data () {
return {
myPlayer: '' // 视频播放器实例
}
}
因为地址是接口异步获取
const videoUrl = '视频地址url'
const myPlayerOptions = {
bigPlayButton: true, // 是否显示播放按钮（这个播放按钮默认会再左上方，需用CSS设置居中）
textTrackDisplay: true,
posterImage: true,
errorDisplay: true,
controlBar: true,
autoplay:false, // 不设置自动播放，若未true，则无法看到视频海报图片
controls: true,
}
// 此处等待UI渲染进程结束，再执行js逻辑线程
setTimeout(() => {
this.myPlayer = videojs('my-video', myPlayerOptions)
this.player.src(this.brandDetail.vedioUrl)
this.player.load(this.brandDetail.vedioUrl)
}, 500)
videojs设置中文
在 mounted 中设置一下中文，不然出错时提示英文不够友好
videojs.addLanguage('zh-CN', {
"You aborted the media playback": "视频播放被终止",
"A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
"The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
"The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
"No compatible source was found for this media.": "无法找到此视频兼容的源。",
});
###
销毁视频播放器实例
单页应用，实例化后，将不会再次实例化，所以需要在当前页面销毁时，销毁当前实例化视频对象
destroyde () {
this.myPlayer.dispose()
}