零分杂记
首页
M3U8播放器
标签云
阿里云
腾讯云
旧版博客
当前位置:
首页
» 标签:M3U8播放器
M3U8 H5 播放器DPlayer搭建
DPlayer官方教程不清晰,GitHub打包下载的ZIP文件很乱,不知道该引入哪个JS,另外HLS是另外一个开发项目,而M3U8链接的播放又必须引入HLS的JS,如果看指南,下载GitHub上的项目,真的会看的一头雾水。而事实上,M3U8链接播放,DPlayer的搭建,只需要3个JS,一个是JQ库,一个是DPlayer.js,另外一个就是HLS.js,这3个文件直接从官网指南里下载就可以了。官网链接另外一个JQ文件,百度就可以直接下载,接下来就简单了。直接按照指南引入JS,创建DPlayer播放器<div id="dplayer"></div><script src="hls.min.js"></script> //本地文件路径<script src="DPlayer.min.js"></script> //本地文件路径初始化播放器const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.m3u8', //M3U8播放链接 type: 'hls', }, pluginOptions: { hls: { // hls config }, },});另外一种方式,这种方式适合接入其他的方式,如P2P,上面那种方式基本上都够用const dp = new DPlayer({ container: document.getElementById('dplayer'), video: { url: 'demo.m3u8', //M3U8播放链接 type: 'customHls', customType: { customHls: function (video, player) { const hls = new Hls(); hls.loadSource(video.src); hls.attachMedia(video); }, }, },});需要注意的是:3个JS的顺序,JQ、HLS、DPlayer,然后就是初始化播放器的JS,关于其他的参数,参考官网指南!在实际的测试中,iPhone手机的默认浏览器Safari无法创建DPlayer播放器,原因暂时未找到,不过,iPhone可以直接播放M3U8链接,所以,可以通过判断,在iPhone端,直接用video标签。JS判断代码<script type="text/javascript"> /* 智能机浏览器版本信息: */ var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端 ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器 iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器 iPad: u.indexOf('iPad') > -1, //是否iPad webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部 }; }(), language: (navigator.browserLanguage || navigator.language).toLowerCase() } if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) { document.writeln("苹果: " + browser.language +"<br><br>"); } else if (browser.versions.android) { document.writeln("安卓: " + browser.language +"<br><br>"); }else{ document.writeln("电脑: " + browser.language +"<br><br>"); } document.writeln("语言版本: " + browser.language +"<br><br>"); document.writeln(" 是否为移动终端: " + browser.versions.mobile +"<br><br>"); document.writeln(" ios终端: " + browser.versions.ios +"<br><br>"); document.writeln(" android终端: " + browser.versions.android +"<br><br>"); document.writeln(" 是否为iPhone: " + browser.versions.iPhone +"<br><br>"); document.writeln(" 是否iPad: " + browser.versions.iPad +"<br><br>"); document.writeln(navigator.userAgent +"<br><br>"); </script>点我查看演示
教程
6个月前
零分
站龄7个月
资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
598
文章
13
分类
837
标签
2
友链
onlinelovesky
317355746
vipsever@vip.qq.com
文章分类
笔记教程
知识
教程
笔记
骗局
影视
随笔
佛学分享
佛学资讯
佛学常识
佛学故事
智慧法语
资源下载
Windows系统
Windows 11
Windows 10
Windows 8.1
Windows 8
Windows 7
Windows XP
插件
其他资源
服务器推荐
阿里云
腾讯云
标签云
M3U8播放器
标签云
佛说医喻经
好医生
柏林禅寺
六十华严经
注释
法句经
祸患
相貌
面相
续集计划
西欧电影
卢卡斯·德霍特
亲密
文森特·卡索
阿丽斯·塔格里奥妮
玛丽昂·歌迪亚
影片时长
平均票价
改档
惠英红
刘雅瑟
陈钰琪
黄小蕾
龚蓓苾
王鹤棣
抬头见喜
白志强
留守儿童
拨浪鼓咚咚响
终极预告
熊出没·伴我“熊芯”
白百何
黄景瑜
检察风云
秦海璐
祖峰
老枪
章宇
敦煌英雄
狂飙
张志坚
李一桐
张颂文
吴昱翰
章若楠
请别相信她
预告
宇宙探索编辑部
吉尔莫·德尔·托罗
匹诺曹
风再起时
何蓝逗
不能流泪的悲伤
收视率
分类信息
query_posts
医药
制度
仪式
秩序