最近某个朋友让我帮写一个简单的Web前端的直播页面,浏览器能正常显示m3u8就行,然后给了一张大概的页面布局。具体用什么写没有要求,所以我决定用Vue3+NaiveUI+Video.js实现这个页面。
由于这部分需求比较少,用一个html文件做个单页的应用程序就好了。
配置Vue3这部分就不介绍了,CDN引入即可。配置界面库都大同小异,也不介绍了。
引入Video.js的步骤,参考官方文档:Getting Started with Video.js - Video.js: The Player Framework | Video.js (videojs.com)
这里我通过CDN引入,因为我只是做了这么一个html文件,大型项目请使用正儿八经的包管理器。
再把文档里给的video这一块复制粘贴到你的编辑器里,source留一个就够了,src改成你的m3u8文件的URL,type改成application/x-mpegURL
Videos.js播放m3u8需要videojs/http-streaming: HLS, DASH, and future HTTP streaming protocols library for video.js (github.com),但是在Video.js 7开始,它被内置在了Video.js,因此不需要进行额外的配置即可播放m3u8。(所以我白花了半天在找这个仓库上)
打开网页,应该就能正常播放了。
发表回复