现在好多视频流都是m3u8格式的,这个格式使用html5的video标签是无法播放的,必须使用插件
1.安装插件
cnpm install video.js --save
ccnp install videojs-contrib-hls --save
2.在页面中使用
<video-player
ref="videoPlayer"
class="video-player vjs-custom-skin"
:playsinline="true"
:options="playerOptions"
/>
3.在获取视频的请求里面给playerOptions添加数据
this.playerOptions.push({
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
language: 'zh-CN',
// aspectRatio: '4:3', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true,
sources: [{
type: 'video/mp4', // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
src: '' // 视频url地址
}],
poster: '', // 你的封面地址
// width: document.documentElement.clientWidth, //播放器宽度
// height: '400',
notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 全屏按钮
}
})
最后说明:这只是本人自己的一些见解,有不足的地方,欢迎大家前来指正。