视频直播m3u8协议以及跨域问题和Videojs加载m3u8视频汇总
video.js支持m3u8格式直播https://www.cnblogs.com/saysmy/p/6429835.html为什么要使用video.js？1. PC端浏览器并不支持video直接播放m3u8格式的视频2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差3. video.js解决以上两个问题，还可以有各种视频状态接口...
video.js支持m3u8格式直播
https://www.cnblogs.com/saysmy/p/6429835.html
为什么要使用video.js？
1. PC端浏览器并不支持video直接播放m3u8格式的视频
2. 手机端各式各样的浏览器定制的video界面风格不统一，直接写原生的js控制视频兼容性较差
3. video.js解决以上两个问题，还可以有各种视频状态接口暴露，优化体验
核心代码：
<!DOCTYPE html>
<html>
<head>
<title>videojs支持hls直播实例</title>
<link href="./video.css?v=bcd2ce1385" rel="stylesheet">
</head>
<body>
<video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" poster="" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto">
<source src="/chat/playlist.m3u8" type="application/x-mpegURL">
</video>
<script src="./video.js?v=fc5104a2ab23"></script>
<script src="./videojs-contrib-hls.js?v=c726b94b9923"></script>
<script type="text/javascript">
var myPlayer = videojs('roomVideo',{
bigPlayButton : false,
textTrackDisplay : false,
posterImage: true,
errorDisplay : false,
controlBar : false
},function(){
console.log(this)
this.on('loadedmetadata',function(){
console.log('loadedmetadata');
//加载到元数据后开始播放视频
startVideo();
})
this.on('ended',function(){
console.log('ended')
})
this.on('firstplay',function(){
console.log('firstplay')
})
this.on('loadstart',function(){
//开始加载
console.log('loadstart')
})
this.on('loadeddata',function(){
console.log('loadeddata')
})
this.on('seeking',function(){
//正在去拿视频流的路上
console.log('seeking')
})
this.on('seeked',function(){
//已经拿到视频流,可以播放
console.log('seeked')
})
this.on('waiting',function(){
console.log('waiting')
})
this.on('pause',function(){
console.log('pause')
})
this.on('play',function(){
console.log('play')
})
});
var isVideoBreak;
function startVideo() {
myPlayer.play();
//微信内全屏支持
document.getElementById('roomVideo').style.width = window.screen.width + "px";
document.getElementById('roomVideo').style.height = window.screen.height + "px";
//判断开始播放视频，移除高斯模糊等待层
var isVideoPlaying = setInterval(function(){
var currentTime = myPlayer.currentTime();
if(currentTime > 0){
$('.vjs-poster').remove();
clearInterval(isVideoPlaying);
}
},200)
//判断视频是否卡住，卡主3s重新load视频
var lastTime = -1,
tryTimes = 0;
clearInterval(isVideoBreak);
isVideoBreak = setInterval(function(){
var currentTime = myPlayer.currentTime();
console.log('currentTime'+currentTime+'lastTime'+lastTime);
if(currentTime == lastTime){
//此时视频已卡主3s
//设置当前播放时间为超时时间，此时videojs会在play()后把currentTime设置为0
myPlayer.currentTime(currentTime+10000);
myPlayer.play();
//尝试5次播放后，如仍未播放成功提示刷新
if(++tryTimes > 5){
alert('您的网速有点慢，刷新下试试');
tryTimes = 0;
}
}else{
lastTime = currentTime;
tryTimes = 0;
}
},3000)
}
</script>
</body>
</html>
源码请移步github：
附：
一. 视频状态分析：
EVENTS
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
currentTime()可以用来发辅助判断视频播放情况
HLS 直播协议m3u8详解：
https://blog.csdn.net/aoshilang2249/article/details/82012187
一、HLS是什么
HTTP Live Streaming（缩写是HLS）是一个由苹果公司提出的基于HTTP的流媒体网络传输协议。是苹果公司QuickTime X和iPhone软件系统的一部分。 它的工作原理是把整个流分成一个个小的基于HTTP的文件来下载，每次只下载一些。当媒体流正在播放时，客户端可以选择从许多不同的备用源中以不同的速率下载同样的资源，允许流媒体会话适应不同的数据速率。
在开始一个流媒体会话时，客户端会下载一个包含元数据的extended M3U (m3u8)playlist文件，用于寻找可用的媒体流。HLS只请求基本的HTTP报文，与实时传输协议（RTP)不同，HLS可以穿过任何允许HTTP数据通过的防火墙或者代理服务器。它也很容易使用内容分发网络来传输媒体流。
RTMP指Adobe的RTMP(Realtime Message Protocol)，广泛应用于低延时直播，也是编码器和服务器对接的实际标准协议，在PC（Flash）上有最佳观看体验和最佳稳定性。
HLS指Apple的HLS(Http Live Streaming)，本身就是Live（直播）的，不过Vod（点播）也能支持。HLS是Apple平台的标准流媒体协议，和RTMP在PC上一样支持得天衣无缝。
二、HLS主要的应用场景
跨平台：PC主要的直播方案是RTMP，也有一些库能播放HLS，譬如jwplayer，基于osmf的hls插件也一大堆。所以实际上如果选一种协议能跨 PC/Android/IOS，那就是HLS。
IOS上苛刻的稳定性要求：IOS上最稳定的当然是HLS，稳定性不差于RTMP在PC-flash上的表现。
友好的CDN分发方式：目前CDN对于RTMP也是基本协议，但是HLS分发的基础是HTTP，所以CDN的接入和分发会比RTMP更加完善。能在各种CDN之间切换，RTMP也能，只是可能需要对接测试。
简单：HLS作为流媒体协议非常简单，apple支持得也很完善。Android对HLS的支持也会越来越完善。至于DASH/HDS，好像没有什么特别的理由，就像linux已经大行其道而且开放，其他的系统很难再广泛应用。
总之，SRS支持HLS主要是作为输出的分发协议，直播以RTMP+HLS分发，满总各种应用场景。点播以HLS为主。
三、HLS协议详解
HLS是提供一个m3u8地址，Apple的Safari浏览器直接就能打开m3u8地址，譬如：
http://demo.srs.com/live/livestream.m3u8
1
Android不能直接打开，需要使用html5的video标签，然后在浏览器中打开这个页面即可，譬如：
<!-- livestream.html -->
<video width="640" height="360"
autoplay controls autobuffer
src="http://demo.srs.com/live/livestream.m3u8"
type="application/vnd.apple.mpegurl">
</video>
HLS协议规定
视频的封装格式是TS。
视频的编码格式为H264,音频编码格式为MP3、AAC或者AC-3。
除了TS视频文件本身，还定义了用来控制播放的m3u8文件（文本文件）。
HLS协议说明
HLS的m3u8，是一个ts的列表，也就是告诉浏览器可以播放这些ts文件，譬如：
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-ALLOW-CACHE:YES
#EXT-X-TARGETDURATION:13
#EXT-X-MEDIA-SEQUENCE:430
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:11.800
news-430.ts
#EXTINF:10.120
news-431.ts
#EXT-X-DISCONTINUITY
#EXTINF:11.952
news-430.ts
#EXTINF:12.640
news-431.ts
#EXTINF:11.160
news-432.ts
#EXT-X-DISCONTINUITY
#EXTINF:11.751
news-430.ts
#EXTINF:2.040
news-431.ts
#EXT-X-ENDLIST
EXTM3U
每个M3U文件第一行必须是这个tag，提供标示作用
EXT-X-VERSION
用以标示协议版本。这里是3， 那么这里用的就是HLS协议第三个版本，此标签只能有0或1个，不写代表使用版本1
EXT-X-TARGETDURATION
所有切片的最大时长，有些Apple设备这个参数不正确会无法播放。
EXT-X-MEDIA-SEQUENCE
切片的开始序号。每一个切片都有唯一的序号，相邻之间序号+1。这个编号会继续增长，保证流的连续性。
EXTINF
ts 切片的实际时长。duration : 媒体持续时间
#EXTINF <duration>,<title>
EXT-X-PLAYLIST-TYPE
类型，vod 表示点播。
EXT-X-ENDLIST
文件结束符号。表示不再向播放列表文件添加媒体文件。
nginx解决跨域原理及相关配置
https://blog.csdn.net/qq_30130355/article/details/82220532
1、什么是跨域
从某一个域请求其他域的各类资源，其中只要两个地址的域名、端口以及协议有不同的地方就会视为跨域，跨域资源无法直接获取。
比如：
域名不同 www.a.com/1.html 请求 www.b.com/1.js
端口不同 www.a.com:8000/1.html 请求 www.a.com:8001/1.js
协议不同 http://www.a.com/1.html 请求 https://www.a.com/1.html
2、nginx如何解决跨域问题
拿上面的来举例，a网站向b网站请求1.js文件时，向b网站发送一个获取的请求，nginx根据配置文件接收这个请求，代替a网站向b网站来请求这个资源，nginx拿到这个资源后再返回给a网站，以此来解决了跨域问题。
3、nginx配置
server {
#监听8000端口
listen 8000;
#监听指定的ip地址
server_name 10.10.2.116;
#对对应url路径执行反向代理,如10.10.2.116:8000/demo
location /demo {
#目标的ip地址
proxy_pass http://10.10.2.116:10037;
}
}
通过此配置可以实现访问10.10.2.116的8000端口来获取同ip下10037端口下的相应资源
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
4
0- 0
已为社区贡献1条内容
所有评论(0)