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
友链
文章13
分类837
标签2
友链