PC端 m3u8视频播放

a969080328 2017-11-29 03:15:19

各位大神：
非常感谢您的帮助，公司要求做一个PC端，主做视频播放，播放格式不是mp4，是m3u8格式，请教各位大神，如何实现

...全文

1223 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

Miss_Sara 2017-12-15

打赏
举报

回复

可以采用一些视频插件，比如videojs

该代码是一款在网页上播放视频的软件，主要特点是：免费，小巧，功能强大，定制方便。风格部分： 1：支持界面风格自定义 2：支持加密风格常规功能： 3：支持多种调用方式 4：支持视频地址加密功能 5：支持点播 6：支持直播 7：支持直播+回看 8：支持弹幕 9：支持字幕 10：支持自定义按钮，图片，swf插件 11：支持和javascript交互 m3u8格式PC端播放功能： 12：PC端内置支持m3u8播放 13：支持pc端m3u8普通加密/私有加密播放 14：支持m3u8清晰度自动列表广告部分： 15：支持前置广告 16：支持暂停广告 17：支持插入广告 18：支持结尾广告 19：支持其它类型的广告（角标，横幅广告） 20：广告类型支持jpg,jpeg,png,gif,swf,mp4,flv,f4v

html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效）。

适合直播m3u8格式手机和PC端播放器，需要引入文件请下载，代码如下： <link rel="stylesheet" href="DPlayer.min.css"> [removed][removed] [removed][removed] [removed] const dp = new DPlayer({ container: document.getElementById('dplayer'), live: true, autoplay: true, mutex: true, video: { url: 'https://cdn.letv-cdn.com/2018/12/05/JOCeEEUuoteFrjCg/playlist.m3u8', type: 'customHls', customType: { 'customHls': function (video, player) { const hls = new Hls(); hls.loadSource(video.src); hls.attachMedia(video); } } } }); [removed]

为什么要使用video.js？ 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差 3. video.js解决以上两个问题，还可以有各种视频状态接口暴露，优化体验

浏览器识别m3u8视频直接播放

39,087

社区成员

5,547

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章