视频直播m3u8协议以及跨域问题和Videojs加载m3u8视频汇总_羊子雄起的博客-程序员宅基地_videojs 跨域

技术标签: JavaScript  videojs  html  HTML+CSS  m3u8  

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:

videojs支持hls直播实例

 

附:

一.  视频状态分析:

 

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

 

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010499087/article/details/103604017

智能推荐

Java程序编写 • 【第4章 程序:随机本周菜品;简易计算器】_.冯上的博客-程序员宅基地

Day6学习进度练习一练习二(计算器)代码(计算器)import java.util.Scanner;public class day5_04 { public static void main(String[]args){ System.out.println("*计算器\n加法&lt;1&gt;\t减法&lt;2&gt;\t乘法&lt;3&gt;\t除法&lt;4&gt;\n:"); Scanner a=new Scanner(System.in); byte j

数字图像处理-图像分割&形态学处理&圆与矩形检测(Matlab)_Peter_831的博客-程序员宅基地_matlab矩形检测

文章目录数字图像处理-图像分割&amp;形态学处理(Matlab)1. 对 yaogan1 的图像进行处理,获取连续的边界,计算不同边界长度以及计算两类不同地物区域的面积。2. 对 4-2 的图像(将其转为灰度图像处理,即不利用颜色特征) ,通过分割,并基于形状特征实现圆和矩形的检测。数字图像处理-图像分割&amp;形态学处理(Matlab)1. 对 yaogan1 的图像进行处理,获取连续的边界,计算不同边界长度以及计算两类不同地物区域的面积。运行效果:2. 对 4-2 的图像(将其转为灰

ocp的运维操作_Joyce.Du的博客-程序员宅基地

1、添加zone(副本)(1)新增zone按照https://blog.csdn.net/du18020126395/article/details/115431125-【所有主机初始化】添加挂载nfs备份目录:mkdir /obbackupmount -o soft 172.16.80.56:/obbackup /obbackupocp界面执行:【添加主机】(可以与原来的zone不同或相同机房,机房也称为idc)选择集群【新增zone】任务主要执行如下步骤(安装ob rpm

编程珠玑第四章-编写正确的程序_cai0538的博客-程序员宅基地_编写正传的程序

本章的目的是阐述如何利用对程序验证的理解帮助程序员写出正确的程序。作者再一次提到:编程技巧仅仅是编写正确程序的很小一部分,大部分内容还是前面三章讨论过的主题:问题定义、算法设计以及数据结构选择,如果这些步骤都完成很好,那么编写正确的程序通常是很容易的。本章引入了二分查找的问题,通过利用程序验证的思路,保证程序正确高效。在问题解决的过程中,通过一些细节阐述了许多一般性的原理,包括以下方面:1

android su 程序,java.lang.IllegalAccessError:方法’void android.su..._weixin_39878745的博客-程序员宅基地

当我将目标sdk级别从23.0.2更改为25.0.1时,我的应用程序在以下行崩溃了.我应该怎么做才能避免这种崩溃?请提出更改建议.InstanceID instanceID = InstanceID.getInstance(getContext());错误日志:AndroidRuntime: FATAL EXCEPTION: AsyncTask #2Process: com.tuitoapp.ad...

配置elasticsearch6.5.4-ik分词插件安装,测试,扩展字典_linnenn的博客-程序员宅基地

elasticsearch基本配置上篇已经简单介绍过,本文讲述配置ik分词器插件的安装,测试,自定义扩展字典,简单使用。希望能帮助后来者少走点弯路。注意:ik分词器必须保证和elasticsearch版本一致,配置完成之后可以设置默认的分词工具,也可以在创建索引文件时使用ik分词工具1. elasticsearch-ik分词环境必须跟elasticsearch一致我的elasticsearc...

随便推点

rt-thread基于stm32标准库的SPI驱动_半岛铁锤的博客-程序员宅基地_stm32_hw_spi_cs

发现rt-thread在某个版本更新中,stm32 BSP下的库函数从标准库切换到了HAL库,HAL库应该是stm32日后发展的主流,但是个人感觉标准库更简洁,易于理解,因此在旧版的RTT上改写了一版SPI的驱动,便于加深对SPI的理解。关于SPI的协议有大量的文章描述,因此不再赘述。一、内核中的SPI deviceSPI包含以下几个结构体:struct rt_spi_device{ struct rt_device parent; struct rt_spi_bus *bus;

支持DoH的DNS服务器,谷歌公共DNS正式支持DoH加密 更安全并且不影响速度_yi美小能手的博客-程序员宅基地

有鉴于此互联网工程任务组已经推出DoH规范加密用户查询,让用户在浏览网页时可以更好的保护自己隐私。DNS-over-TLS加密标准:我们知道HTTPS加密安全协议可有效阻止中间人攻击,也可以让中间人或者运营商监测用户实时的访问信息。目前很多运营商会通过流量劫持的方式在用户访问的页面里插入广告,使用HTTPS加密的网页则不会受影响。而在DNS领域此前都是没有加密的,即便网页是HTTPS连接但运营商依...

cisco路由器宽带拨号pppoe_weixin_33868027的博客-程序员宅基地

拓扑图路由器配置配置完成后,查看IP地址客户端配置,将客户端配成和路由器内网一个网段,将网关指向内网接口的IP地址配好客户端,就可以正常上网了。查看路由器的nat信息pppoe拨号配置命令 route(config)#vpdn-group 1 route(config-vpdn)#req...

朴素版Dijkstra算法+堆排序优化版+Bellman-Ford算法+Spfa算法+Floyd算法_不依法度的博客-程序员宅基地_dijkstra算法 堆排序

朴素版Dijkstra算法题目链接–Dijkstra求最短路径关键代码int Dijkstra(){ dist[1] = 0; for (int i = 1; i &lt;= n; i++){ int t = -1; for (int j = 1; j &lt;= n; j++) if (!vis[j] &amp;&amp; (t == -1 || dist[j] &lt; dist[t])) t = j; vis[t] = true; for (int j =

YOLOv3: An Incremental Improvement_长沙有肥鱼的博客-程序员宅基地_yolov3: an incremental improvement论文下载

论文下载地址:https://pjreddie.com/media/files/papers/YOLOv3.pdfhttps://pjreddie.com/media/files/papers/YOLOv3.pdf翻译word和pdf下载地址:YOLOv3:AnIncrementalImprovement论文全文翻译-行业报告文档类资源-CSDN下载YOLOv3:AnIncrementalImprovement论文翻译-行业报告文档类资源-CSDN下载YOLOv3:AnIncrementalI.

Spark学习笔记(五)_a_victory的博客-程序员宅基地

MLlib for SparkK-means 1.K-means (scala)// Load and parse the data.val data = sc.textFile("kmeans_data.txt")val parsedData = data.map(_.split(‘ ').map(_.toDouble)).cache()// Cluster the data i

推荐文章

热门文章

相关标签