vue开发移动端使用video.js播放视频

使用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'

文档

• 官方网站
• 中文翻译
• 下载最新版videojs

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()
}