大家好，又见面了，我是你们的朋友全栈君。
M3U8在线播放
- 前言
- 一、思路
- 二、代码框架
- 1. 移动端适配
- 2. 改变M3U8地址
- 3. 设置videojs参数
- 4. 增加快进等功能
- 写在最后
前言
当我们在网上愉快观影的时候，难免会遇到“M3U8格式”的视频。聪明的你应该也发现了，它是没办法直接播放的。它其实只是一个索引文件，根据它找到相应的.ts文件再进行播放。而这样做的好处，大概就是做多码率适配，保证视频播放的流畅性。有感兴趣的小伙伴可以参看这里—>M3U8文件格式。
我今天要干的事情呢，就是解决当我们找到一个M3U8地址之后如何方便的播放它~
一、思路
想要播放M3U8的方法有很多，比如浏览器插件 Native HLS PlayBack:
又比如现成的软件VLC播放器：
但是，这些都需要下载或者安装，当我换一个设备时就不是很方便嘛。于是，还有一种更好的方法：写一个M3U8在线播放的网站。 直接上图（分别为PC端和移动端）：
二、代码框架
利用js库videojs来对m3u8视频进行解析并播放。具体的代码，大家可以进去网站—>查看源码—>直接copy。 接下来主要是对其中涉及到的一些关键点进行说明，避免大家走弯路。
1. 移动端适配
为了使得网站在PC端和移动端都能很好地被展示，得在HTML中加入如下代码：
代码语言：javascript复制<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />同时为了更好地区分出当前访问是移动端还是PC端，可以定义如下JS函数：
代码语言：javascript复制function IsPC(){
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v ) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}2. 改变M3U8地址
通过在请求地址中加入一个play参数，“http://www.m3u8player.top/?play=xxxx.m3u8”来改变需要播放的m3u8地址。 在点击按钮后执行ChangeM3u8()函数，实现页面的跳转：
代码语言：javascript复制function ChangeM3u8(){
var play = document.getElementById('video-url').value
var url = location.href
url = url.split('?')[0] '?play=' play
location.href = url
}识别请求URL中的play参数：
代码语言：javascript复制function QueryString(qs){
var url = location.href
url = url.replace('?','?&').split('&')
var re = ''
for(var i=1;i < url.length;i ){
if(url[i].indexOf(qs '=')==0){
re = url[i].replace(qs '=','')
break
}
}
return re
}3. 设置videojs参数
根据需要对videojs参数进行设置，如进度条、poster等：
代码语言：javascript复制var myVideo = videojs('myVideo',{
bigPlayButton : true,
textTrackDisplay : false,
posterImage: false,
errorDisplay : true,
controlBar: {
volumePanel:{
inline:false}},
playbackRates: [0.5,1,1.25,1.5,2],
},function(){
this.on('error',function(){
myVideo.errorDisplay.close()
alert('小主，地址解析错误≥﹏≤ n 请检查链接是否正确')
})
}
)4. 增加快进等功能
为了使得网站可以通过键盘按键来对视频进行控制，如左右键控制视频前进后退，上下键控制音量大小，空格键控制视频播放暂停。我增加了键盘监听事件：
代码语言：javascript复制var vol = 0.1; //1代表100%音量，每次增减0.1
var time = 10; //单位秒，每次增减10秒
document.onkeyup = function (event) {
//键盘事件
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode === 37) {
// 按 向左键
c_time = myVideo.currentTime()
if(c_time-time > 0){
myVideo.currentTime(c_time-time)
}else{
myVideo.currentTime(0)
}
return false;
}else if (e && e.keyCode === 39) {
// 按 向右键
c_time = myVideo.currentTime()
d_time = myVideo.duration();
if(c_time time > d_time){
myVideo.currentTime(d_time)
}else{
myVideo.currentTime(c_time time)
}
return false;
}else if (e && e.keyCode === 38) {
// 按 向上键
c_volume = myVideo.volume()
if(c_volume vol > 1){
myVideo.volume(1)
}else{
myVideo.volume(c_volume vol)
}
return false;
}else if (e && e.keyCode === 40) {
// 按 向下键
c_volume = myVideo.volume()
if(c_volume-vol < 0){
myVideo.volume(0)
}else{
myVideo.volume(c_volume-vol)
}
return false;
}else if (e && e.keyCode === 32) {
// 按 空格键
if (myVideo.paused()){
myVideo.play()
}else{
myVideo.pause()
}
return false;
}
}写在最后
当然，还有许多东西可以做，可以去改进的。 所谓的“路遥遥其修远兮 吾将上下而求索”。
最后，感谢各位大大的耐心阅读~
慢着，大侠请留步… 动起可爱的双手，来个赞再走呗 (๑◕ܫ￩๑)
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/147766.html原文链接：https://javaforall.cn
