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设置为0myPlayer.currentTime(currentTime+10000);myPlayer.play();//尝试5次播放后，如仍未播放成功提示刷新if(++tryTimes > 5){alert('您的网速有点慢，刷新下试试');tryTimes = 0;}}else{lastTime = currentTime;tryTimes = 0;}},3000)}</script></body>
</html>

源码请移步github：

videojs支持hls直播实例

附：

一.　　视频状态分析：

EVENTSdurationchange
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

Android不能直接打开，需要使用html5的video标签，然后在浏览器中打开这个页面即可，譬如：

<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端口下的相应资源

视频直播m3u8协议以及跨域问题和Videojs加载m3u8视频汇总相关推荐

webpack：多文件、多环境、跨域处理、热加载
文章目录 webpack:多文件.多环境.跨域处理.热加载多页面处理 webpack多环境 vuecli多环境配置配置不同的打包命令定义变量跨域通过node模拟接口通过webpack解决跨 ...
pdf.js跨域解决方法——远程加载pdf
思路:通过将需要浏览的pdf通过后台转为文件流传给前端,来解决跨域问题. js代码写在viewer.html里,放到引用pdf.js的位置前面 js代码,来接收文件流: <script>v ...
springboot中通过cors协议解决跨域问题
2019独角兽企业重金招聘Python工程师标准>>> 1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可 ...
SRS学习-HTML加载FLV视频
SRS学习-HTML加载FLV视频介绍 FLV是FLASHVIDEO的简称,FLV流媒体格式是一种新的视频格式,全称为FlashVideo.由于它形成的文件极小.加载速度极快,使得网络观看视频文件成 ...
android webView加载网络视频
之前,我写过webView加载本地网页的博客,今天,就写写webView加载网络视频的内容. 一.加载网页 1.WebView用来显示网页,使用必须时刻注意我们需要添加网络权限 <uses-pe ...
直播app系统源码通过CSS液体实现加载动画
直播app系统源码通过CSS液体实现加载动画首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...
android 获取网络视频资源,Android 加载网络视频（url地址）第三方框架简用
正好最近做项目有个需要加载网络视频技术,就找了找,碰到了这个开源的框架.主要还是网络请求下来的视频地址,然后简单的,赋一下值,非常OK.不过限自己练习用毕竟看需求的嘛,不多介绍复制用吧. 先看看效果大 ...
Gatsby 中怎么加载使用视频文件？
一.简介 Gatsby 项目中怎么播放视频? 二.解决方案 1.HTML5 <video> 使用 HTML5 的 video 标签,播放本地视频和远程视频. import * as ...
使用html5看视频黑屏,HTML 5动态加载的视频导致iPad上的黑屏
我通过更改代码中的video标签src动态加载视频.当我在ipad上试用我的代码时(不知道它是否可以在模拟器中运行),第一个视频播放正常,但下一个只能给我一个黑屏.我已经尝试先播放第二个视频(检查编码 ...

视频直播m3u8协议以及跨域问题和Videojs加载m3u8视频汇总

video.js支持m3u8格式直播

HLS 直播协议m3u8详解：

nginx解决跨域原理及相关配置

视频直播m3u8协议以及跨域问题和Videojs加载m3u8视频汇总相关推荐

最新文章

热门文章