软盘君
本站的沙雕站长,半吊子运维
Floppy β Studio

使用Video.js播放流媒体

最近某个朋友让我帮写一个简单的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。(所以我白花了半天在找这个仓库上)

打开网页,应该就能正常播放了。

本文章(使用Video.js播放流媒体)使用CC BY-SA 3.0进行许可,转载请注明出处:https://www.iruanp.com/archives/1142 如果你认为我们的文章对您有帮助,请在Youtube订阅软盘君的频道

Floppy

文章作者

生命不息,折腾不止~这是一个沙雕博主,不务正业的那种,还喜欢瞎折腾~

发表回复

textsms
account_circle
email

5 × 4 =

Floppy β Studio

使用Video.js播放流媒体
最近某个朋友让我帮写一个简单的Web前端的直播页面,浏览器能正常显示m3u8就行,然后给了一张大概的页面布局。具体用什么写没有要求,所以我决定用Vue3+NaiveUI+Video.js实现这个页面。 …
扫描二维码继续阅读
2022-09-07