大家好,又见面了,我是你们的朋友全栈君。
M3U8在线播放
前言
当我们在网上愉快观影的时候,难免会遇到“M3U8格式”的视频。聪明的你应该也发现了,它是没办法直接播放的。它其实只是一个索引文件,根据它找到相应的.ts文件再进行播放。而这样做的好处,大概就是做多码率适配,保证视频播放的流畅性。有感兴趣的小伙伴可以参看这里—>M3U8文件格式。
我今天要干的事情呢,就是解决当我们找到一个M3U8地址之后如何方便的播放它~
一、思路
想要播放M3U8的方法有很多,比如浏览器插件 Native HLS PlayBack:
又比如现成的软件VLC播放器:
但是,这些都需要下载或者安装,当我换一个设备时就不是很方便嘛。于是,还有一种更好的方法:写一个M3U8在线播放的网站。
直接上图(分别为PC端和移动端):
二、代码框架
利用js库videojs来对m3u8视频进行解析并播放。具体的代码,大家可以进去网站—>查看源码—>直接copy。
接下来主要是对其中涉及到的一些关键点进行说明,避免大家走弯路。
1. 移动端适配
为了使得网站在PC端和移动端都能很好地被展示,得在HTML中加入如下代码:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
同时为了更好地区分出当前访问是移动端还是PC端,可以定义如下JS函数:
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()函数,实现页面的跳转:
function ChangeM3u8(){
var play = document.getElementById('video-url').value
var url = location.href
url = url.split('?')[0]+'?play='+play
location.href = url
}
识别请求URL中的play参数:
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等:
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. 增加快进等功能
为了使得网站可以通过键盘按键来对视频进行控制,如左右键控制视频前进后退,上下键控制音量大小,空格键控制视频播放暂停。我增加了键盘监听事件:
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;
}
}
写在最后
当然,还有许多东西可以做,可以去改进的。
所谓的“路遥遥其修远兮 吾将上下而求索”。
最后,感谢各位大大的耐心阅读~
慢着,大侠请留步… 动起可爱的双手,来个赞再走呗 (๑◕ܫ←๑)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/147766.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...