美文网首页web前端
如何在vue项目中使用video标签播放m3u8后缀的视频

如何在vue项目中使用video标签播放m3u8后缀的视频

作者: 迦叶凡 | 来源:发表于2018-12-29 12:12 被阅读869次

第一步
安装相关依赖包:npm install --save video.js;npm install --save videojs-contrib-hls
第二步
引入样式文件,可以在main.js或是在需要的组件文件中引入:import 'video.js/dist/video-js.css'
第三步
在组件文件中引入相关JS文件:import videojs from 'video.js';import 'videojs-contrib-hls'
第四步
指定video容器:
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png">
<source src="[http://127.0.0.1:7086/aaa/213/stream/1.m3u8](http://127.0.0.1:7086/aaa/213/stream/1.m3u8)" type="application/x-mpegURL">
</video>
第五步
在mounted方法中初始化播放器:
videojs('my-video', {
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
}, function () {
this.play()
})
注意
如果浏览器后台出现了如下错误:
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
那么只需要在video标签中添加muted属性就可以了。
下面是完整的代码

代码示例.png

最后
如果有帮助到各位看官的话,麻烦动动小指头,点个喜欢~~谢谢啦!

相关文章

  • 如何在vue项目中使用video标签播放m3u8后缀的视频

    第一步安装相关依赖包:npm install --save video.js;npm install --save...

  • 02HTML基础--基础标签

    video标签 作用: 播放视频 格式1: video标签的属性 src: 告诉video标签需要播放的视频地址 ...

  • 06HTML基础--多媒体标签

    video标签 作用: 播放视频 格式1: video标签的属性 src: 告诉video标签需要播放的视频地址 ...

  • 多媒体标签

    video标签 作用: 播放视频 格式1: video标签的属性: src: 告诉video标签需要播放的视频地址...

  • 多媒体标签

    video标签 作用:播放视频 格式: video标签的属性src: 告诉video标签需要播放的视频地址auto...

  • 06HTML基础--多媒体标签

    video标签 作用: 播放视频 格式1: video标签的属性src: 告诉video标签需要播放的视频地址au...

  • 06HTML基础--多媒体标签

    video标签 作用: 播放视频 格式1: video标签的属性src: 告诉video标签需要播放的视频地址au...

  • HTML基础--多媒体标签

    video标签 作用: 播放视频 格式1: video标签的属性src: 告诉video标签需要播放的视频地址au...

  • video.js实现视频播放

    video.js实现视频播放 在vue中使用video.js实现文件播放。 安装 yarn add video.j...

  • 06-HTML多媒体标签

    video标签 作用: 播放视频 第一种格式video标签的属性src: 用于告诉video标签需要播放的视频地址...

网友评论

    本文标题:如何在vue项目中使用video标签播放m3u8后缀的视频

    本文链接:https://www.haomeiwen.com/subject/cspulqtx.html