最近某个朋友让我帮写一个简单的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。（所以我白花了半天在找这个仓库上）
打开网页，应该就能正常播放了。
发表回复