当前位置: 首页 » 标签: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
友链
onlinelovesky317355746vipsever@vip.qq.com