Vue+Video.js播放m3u8视频流

首先，我们需要在vue工程中安装video.js相关依赖。1sF胜于蓝|优秀个人博客

    npm install --save video.js   npm install --save videojs-contrib-hls

然后，我们需要引入videojs的css文件，例如在main.js中引入1sF胜于蓝|优秀个人博客

    import 'video.js/dist/video-js.css'

接着，我们在需要播放视频的页面引入js对象1sF胜于蓝|优秀个人博客

    import videojs from 'video.js'   import 'videojs-contrib-hls'

指定一个video容器，例如：1sF胜于蓝|优秀个人博客

    <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" type="application/x-mpegURL">   </video>

最后，我们在mounted节点初始化播放器：1sF胜于蓝|优秀个人博客

    videojs('my-video', {   bigPlayButton: false,   textTrackDisplay: false,   posterImage: true,   errorDisplay: false,   controlBar: true   }, function () {   this.play()   })

以上就是如题最简单的实现，更多需求请自行阅读video.js相关api或者持续关注此博客。1sF胜于蓝|优秀个人博客

Tags：

转载：【免责声明】：转载自其他平台或媒体的文章，本站将注明来源及作者，但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证，仅做参考！如有侵权，请联系本站并提供相关证明，本站将依据著作权人意见删除该文，并不承担任何责任！
如果您认为本文侵犯了您的版权信息，请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源胜于蓝个人博客”。/news/life/61.html

扫描关注胜于蓝微信|公众号，第一时间获取网站模板更新动态

本文地址：/news/life/61.html

很赞哦！ ()