整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html5的video标签实现m3u8格式的支持,基于hls.min.js

图网站的踩坑笔记,vue开发项目中通过api接口获取到了m3u8格式的音频,但是有的浏览器默认不支持,所以需要借助辅助手段来实现,下面介绍详细方法。



什么是m3u8?

m3u8是m3u的一种,是utf-8格式的,Apple 为了提高流播效率开发的技术,特点是将流媒体切分为若干 TS 片段(比如每10秒一段),然后通过一个扩展的 m3u 列表文件将这些 TS 片段集中起来供客户端播放器接收。可以做多码率的适配,根据网络带宽,客户端会自动选择一个适合自己码率的文件进行播放,保证视频流的流畅。

html5的video标签实现对HLS(m3u8格式)的支持方法

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video');
var hls = new Hls();
hls.loadSource('http://www.streambox.fr/playlists/test_001/stream.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
}
</script>

来源:http://www.qietu.com/hml5-video-m3u8-hls-min-js/

联网时代让电视这棵老树开出新花——内容大爆炸,一直以来的被动观看变得越来越多互动。然而我们却再也无法简单用一个数字键就切换到想看的节目,看一个内容要点很多次,观看路径被大大延长了。这恐怕也是IPTV/OTT以及有线互动电视的最大痛点,虽然运营商在EPG/UI和遥控器层面一直在努力,但截至目前效果并不理想,成为了电视用户在互动体验中的最大不足。

流媒体君新近体验了一个IPTV创新产品——纸屏(点看),打开了缩短IPTV/OTT大屏观看路径的新思路。

所谓纸屏(点看)是指通过用特定的点看笔或点看遥控器,轻点纸质介质上的图文,即可将对应的媒资内容(视频、应用等)在电视机上瞬间播放的电视体验新模式,而传统模式的投屏业务,必须以电子屏为访问入口。而纸屏(点看),则将更为普及的印刷品作为访问线上内容的入口、门户。

所见所点,内容即入口,是纸屏(点看)的最大优势。具有丰富的应用场景运营与想象空间。可应用于大屏、小屏;可应用于互联网公网、运营商专网;可满足于各年龄段的需求、尤其是老幼群体;可应用于视频内容运营、传统纸书升级、购物旅游生活等等。

https://v.qq.com/x/page/a0817f2ihe8.html(观看体验视频网址)

流媒体网认为,在点看这种应用新模式下,哪怕所需要播放的内容或业务处于再深的层级,都能通过点看这一简单动作被激活、播放。这对于电视大屏上内容的运营和融合生态的业务构建,具有极其便捷的优势。虽然看似有纸质媒介的壁垒,但是如果细思,不仅仅从产品角度,而是从运营角度考量,这里具备了极大的商业空间。

目前,该纸屏的点看业务,已经在四川电信IPTV上正式商用,平台能力覆盖1000万户4K及全4K机顶盒用户。四川电信为此专门推出了带有语音+点看功能的遥控器,以及相关的纸屏点看卡、点看杂志、点看图书、点看DM单业务卡。

以下为流媒体君给大家带来的体验感知

一、入口稀缺下的新途径思考

内容是海量的,入口是稀缺的,很多内容养在深闺人未识,这可能是IPTV/互联网电视最大的供需矛盾。而点看-----内容即入口,恰恰为此提供了一个全新的解决途径。

1、 直播频道入口

不用一直按上下键选择,也不用记住频道号,点一下就可以。跟IPTV适配之后,回看、时移、暂停等都可以点一下就实现。

2、 点播内容入口

相比直播频道,丰富却又多变的点播,可能难以仅靠用一张印刷品完成目的,但是,在便利的印刷条件和成本下,DM投送或IPTV影视月刊、甚至专门的影视杂志,即可以形成可读性的刊物,又能通过点看的方式满足用户的观看需。

试想下,相比现在IPTV等电视大屏上为了推介内容,要根据所提示的“首页—影视—动作”等等路径指引而言,点看的确在便利和体验上更胜一筹。

3、 增值业务生态重构

IPTV大屏首页推荐位就那么多,很多新业务往往都难以被用户所看到,而这也成为影响增值业务收入的重要原因。

对于用户来说,往往所见即所得,不会有过多的精力去层层点看。

对于运营商来说,现有的业务生态过于垂直,用户直进直出,难以横向拓展,导致了大部分的流量成为了单次的低效流量。而业务横向打通,则面临着技术和平台的重构。

或许,通过点看的模式,借助第三方形态进行业务的重新组合,便能在一定程度上解决业务的曝光和重构问题。

4、 行业应用的引导入口

依托点看技术和产品,还可以衍生出很多行业性的应用拓展,甚至是单独的产品,如教育、阅读、游戏、医疗、旅游、购物等等。以教育为例,如果能跟名校名师合作,孩子用遥控器点一下课本或者习题册就有名师讲解,家长们肯定大力支持。再比如购物,可以跟当地的商超合作,结合电商,用遥控器点一下就能查看商品并下单,前景也是极具想象力。

客人点一下就可以通过电视大屏了解当地好吃好玩的

二、点看产品的实际体验感知

这个产品应用场景很多,但我们的体验环境是业务尚未部署的北京公网(移动、歌华宽带),所以有些在四川IPTV实现的功能遗憾无法体验,此次流媒体君只体验了点看图书。

将电视机与点看遥控器进行成功蓝牙配对后,就可以开始“点看”之旅啦。操作形式类似英语幼教领域非常流行的点读笔,只是这里将笔换成了点看遥控器!

闲言少叙,正式体验!

点看图书即属于基于纸屏点看功能所衍生出的新型产品,既保留纸书文字表达思想的深度和想象空间,又新增对文字抽象意义的视频形象展示,从平面变成有声有色,二次元变成三次元,提供了全新体验。此外,还有对书中故事的拓展,并且能互动。

1)流媒体君首先体验的是一本以幼教内容为主的小册子,包含三字经、手指操、小故事、古诗、小百科等等。

想看哪个点一下

https://v.qq.com/x/page/d0817s6qh28.html(观看体验视频网址)

测试总结:响应速度快,所见即所得,面对图册,喜欢哪个内容点哪个,避免了一层层找入口、找内容的繁琐;这种方式不仅仅适合幼教,也适合各种类型的内容。各种内容不会再受限于首页位置不够,而且每个人都可以拥有自己的首页,喜欢戏曲的点戏曲,喜欢武侠的点武侠。

2)绘本的整读和点读

点一下整读贴纸,就会自动读下去;而点读则是想读哪里点哪里。另外还有故事回顾和画面阅读,总之,可以用多种维度深度的去了解一个绘本,同时还具有极强的业务想象空间。

https://v.qq.com/x/page/x0817izv0pz.html(观看体验视频网址)

测试总结:整读顺畅,点读相较于只有声音的那种更加生动。可以焕发纸质书的新生机。

3)延展和互动

有内容的拓展延伸(点拓展延伸):《不管怎样都爱你》讲的是妈妈的爱,就会有《爱在这里》的延展,各种小动物现身说法。

还有知识和能力的拓展延伸(点互动),通过互动小游戏,让孩子知道动物的保护色、培养一些良好的生活习惯等等。

找到相应贴纸,用遥控器方向键放到合适位置

另外,还有近似当下流行的AR体验——点纸板屏幕上就出来相应场景,然后点不同的动物形象它们就会立体化的出现,让孩子们玩中学、学中玩。

测试总结:将知识与游戏结合起来,而且以用遥控器点为主,不管低龄幼儿还是任何人,都可以顺畅操作。尤其对于大屏互动而言,意义非凡。

据悉,后续还将制作文学、科技、历史、地理、字词典等各类“点看图书”,仅图书点看一项便有诸多想象空间。而医疗、旅游、视频内容等等可开发的产品众多。同一个平台,可以为用户定制、提供足够多个内容、风格迥异且低成本的EPG、web页面,可帮助众多SP实现低成本向用户推荐自己内容的平台!

写在最后的话:

对于纸屏(点看)这个产品,评价较为分化,有认为该产品过重,遥控器、纸屏、推广都存在着较大的门槛,难以成规模;也有人认为该业务“一点即达、内容即入口”具有极大的商业价值。

流媒体网认为,以上两种说法都存在一定的道理,如果仅仅将纸屏(点看)看着一个产品或业务的话,其优劣都较为明显。但是,如果把他看成是一种运营或给大屏赋能的模式呢?那么在技术、市场、产品具备的情况下,将拥有极其充分运营空间和价值!

2019年1月15日,在战略转型和产业变革的机遇期,流媒体网联合易目唯共同举办的金屏奖,将以“运•赢下半场”为主题,围绕视听行业价值创新、运营创新、产品创新等方面设置多个奖项。了解更多金屏奖详情,请关注流媒体网,今日流媒体小程序!

要选型一个流媒体服务器,故搜罗网上资料,整理出以下内容供参考

出处皆已标注链接

目录

流媒体协议

直播流媒体协议

理解RTMP、HttpFlv和HLS的正确姿势

流媒体文件支持格式

市面上主流的流媒体服务器归纳

38款流媒体服务器开源软件

主流流媒体服务器介绍:

AMS/wowza/red5/SRS主要功能对照分析:

AMS(FMS)流媒体服务器系统

wowza流媒体服务器系统

Red5流媒体服务器系统

SRS流媒体服务器系统

SRS之深入浅出看流媒体:

Linux下视频流媒体服务器搭建详解

websocket+Media Source Extensions API

EasyDarwin

最终选型

其他资料

流媒体协议

RTMP&HLS(专用协议流式)实时流传输既可传输实况直播,也可传输完整的音视频文件

HTTP渐进式(基于TCP):顺序流媒体不可用于实况直播,仅能传输完整的音视频文件

原则上,RTSP,RTMP,HTTP 都可以做直播和点播,

但一般做 直播用 RTSP和RTMP,做点播用 HTTP。

直播流媒体协议

https://blog.csdn.net/u011216417/article/details/72835402

RTP/RTCP/RTSP/WebRTC/RTMP/HLS

理解RTMP、HttpFlv和HLS的正确姿势

https://www.jianshu.com/p/32417d8ee5b6

流媒体文件支持格式

MP4

3GP

FLV

F4V

MPEG-TS

市面上主流的流媒体服务器归纳

FMS(AMS)(Flash mediaserver) 商业级 收费

Red5 开源 (稳定性与性能差,大多作为个人使用)

Nginx-RTMP(主要用于点播)开源

Wowza (Wowza Streaming Engine) 商业级 收费

SRS (Simple Rtmp Server)

阿里云(视频点播/直播等) 商业级 收费

若有兴趣可以看看其他市面上的流服务器:

38款流媒体服务器开源软件

https://www.cnblogs.com/lidabo/p/7418505.html

主流流媒体服务器介绍:

https://blog.csdn.net/datamining2005/article/details/55260491

FMS 4.x版本可破解版本

Red5稳定性不够

Nginx推流伪流媒体(http渐进式)

AMS/wowza/red5/SRS主要功能对照分析:

http://www.cuplayer.com/player/PlayerCodeCourse/2017/11093244.html

AMS(FMS)流媒体服务器系统

Flash Media Server (简称FMS),后更名为Adobe Flash Media Server (简称AMS)。它是较早(2002年)做流媒体服务器产品的,原公司是Macromedia,后来被Adobe收购了,它是流视频和实时通信领域业界领先的解决方案,该产品可以快速搭建起一套流媒体直播、点播服务器。

wowza流媒体服务器系统

wowza全名是Wowza Streaming Engine,是一款非常优秀的流媒体服务器产品。也算是除了FMS产品之外的一个老版子产品,产品发布于2007年,他在HLS(m3u8)分发方面是非常不错的。从wowza2.0到现在的wowza4.5,都曾关注和使用过他们的产品,总体来说性价比还是蛮高的。

Red5流媒体服务器系统

Red5 (media server) 流媒体系统,免费开源的是它最大的优点,也因此有很多用户在使用它们的产品,然后不足在于占用服务器资源较高。

SRS流媒体服务器系统

SRS(Simple Rtmp Server)定位是运营级的互联网直播服务器集群,追求更好的概念完整性和最简单实现的代码,这是该产品自己官方的介绍。值得一说的是,前面几个产品都是国外的,而这个作者是国内的。

SRS之深入浅出看流媒体:

https://blog.csdn.net/zjqlovell/article/details/50786040

Linux下视频流媒体服务器搭建详解

https://blog.csdn.net/u011596455/article/details/79431116

websocket+Media Source Extensions API

当然也看到有人提出 websocket+Media Source Extensions API(比较小众就不尝试了,等下出问题了歇逼)

初级调研排除收费与Red5,接下来准备对比Nginx-RTMP于SRS和DSS这三种流服务器。

因为目标APP暂不提供直播功能,在点播领域的话使用HTTP协议即可。

EasyDarwin

恰巧国内有专门做开源解决方案EasyDarwin封装了一整套流媒体框架

http://www.easydarwin.org/pdf/EasyDarwin_Introduction.pdf

所以花时间研究了下EasyDarwin这套解决方案。

发现!你妹,EasyDSS解决方案也分为开源和商业,开源的项目没卵用,真正有用的项目是要钱的,基础的点播模块还需要商业版才能使用,凸,故放弃。

流媒体平台框架 EasyDarwin

https://www.oschina.net/p/easydarwin

EasyDarwin开源项目(7Project):

EasyDarwin开源项目至今包括有:EasyDarwin(开源流媒体服务器)、EasyCMS(中心管理服务器)、EasyCamera(云摄像机服务)、EasyClient(云平台客户端)、EasyAACEncoder(开源音频编码项目)、EasyAudioDecoder(开源音频解码项目)、EasyProtocol(开源云平台协议)等多个项目,完整地构架了一套开源流媒体云平台方案。

EasyDarwin商业项目(8Project)

同时,EasyDarwin开源团队也开发了很多流媒体方面的商业项目,包括有:

EasyPlayer 是一款精炼、高效、稳定的流媒体播放器,分为RTSP版和Pro版本,EasyPlayer RTSP版本支持Windows(支持多窗口、包含ActiveX,npAPI Web插件)、Android、iOS多个平台,EasyPlayerPro支持Android、iOS,支持各种各样的流媒体音视频直播/点播播放,项目地址:https://github.com/EasyDarwin/EasyPlayer;

EasyPusher 是一款简单、高效、稳定的一款标准RTSP/RTP协议直播推送库,支持将H.264/G.711/G.726/AAC等音视频数据推送到RTSP流媒体服务器进行低延时直播或者视频通信,支持Windows、Linux、ARM、Android、iOS等平台,EasyPusher配套EasyDarwin流媒体服务器、EasyPlayer RTSP播放器适用于特殊行业的低延时应急指挥需求!项目地址:https://github.com/EasyDarwin/EasyPusher;

EasyNVR 摄像机(通用RTSP、Onvif摄像机)接入服务,EasyNVR能够通过简单的摄像机通道配置、存储配置、云平台对接配置、CDN配置等,将统监控行业里面的高清网络摄像机IP Camera、NVR、移动拍摄设备接入到EasyNVR,EasyNVR能够将这些视频源 的音视频数据采集到设备端,进行全平台终端直播、录像存储、录像检索和录像回放。并且EasyNVR能够将视频源的直播数据对接到第三方视频平台、CDN网络,实现互联网直播分发,具体接入方法见https://github.com/EasyDarwin/EasyNVR;

EasyIPCamera 是一套精炼、高效、稳定的RTSP服务器组件,调用简单灵活,轻松嵌入部署到IPCamera中,并发性能属于行业领先水平,广泛应用于IPCamera RTSP服务、Android/Windows投屏/同屏直播服务,例如课堂教学同屏、会议同屏、广告投放同屏等!项目地址:https://github.com/EasyDarwin/EasyIPCamera;

EasyRTMP 是一套调用简单、功能完善、运行高效稳定的RTMP功能组件,经过多年实战和线上运行打造,支持RTMP推送断线重连、环形缓冲、智能丢帧、网络事件回调,支持Windows、Linux、arm(hisiv100/hisiv200/hisiv300/hisiv400/etc..)、Android、iOS平台,支持市面上绝大部分的RTMP流媒体服务器,包括Red5、Ngnix_rtmp、crtmpserver等主流RTMP服务器,能够完美应用于各种行业的直播需求,手机直播、桌面直播、摄像机直播、课堂直播等等方面!项目地址:https://github.com/EasyDarwin/EasyRTMP;

EasyRTSPClient 是一套简单、稳定、高效、易用的RTSPClient工具库,支持Windows、Linux、ARM、Android、iOS等几乎所有平台,支持RTP Over TCP/UDP,支持断线重连,能够接入市面上99%以上的IPC,调用简单且成熟稳定,能广泛应用于播放器、NVR、流媒体系统级联等产品中!项目地址:https://github.com/EasyDarwin/EasyRTSPClient;

EasyHLS 是一套简单、可靠、高效、稳定的HLS直播切片SDK,能够将实时的H.264视频和AAC音频流实时切片成可供WEB、Android、iOS、微信等全平台客户端观看的HLS(m3u8+ts)直播流,搭配EasyRTSPClient、EasyAACEncoder等项目,可将大部分的安防摄像机对外进行HLS直播发布,同时也可灵活集成在各种流媒体服务中!项目地址:https://github.com/EasyDarwin/EasyHLS;

EasyRMS 是一套基于HLS协议的录像与回放服务器,EasyRMS能够将RTSP源获取到本地进行本地存储或者存储到阿里云对象存储OSS云存储等第三方存储平台,同时EasyRMS提供录像的检索与查询接口,检索出录像的HLS地址进行录像回放!项目地址:https://github.com/EasyDarwin/EasyRMS;

EasyDarwin云平台

EasyDarwin云平台是一套由EasyDarwin、EasyCMS、EasyCamera、EasyClient、nginx、redis构成的完整云平台架构,支持分布式、跨平台、多点部署,流媒体服务器支持负载均衡,按需直播,非常适用于互联网化的安防、智能家居、幼教平台、透明厨房、透明家装等多个行业应用:

最终选型

最后纠结的将范围缩短为三个项目:DSS和SRS和Nginx

接下来分析这两种流媒体对视频点播的支持程度

分别展开介绍:

1.DSS:苹果公司的Darwin Streaming Server(简称DSS)完全免费,没有任何功能限制,且符合国际标准。但DSS在linux上的安装比较繁琐,所以大多数人会选择easyDSS(就是上面提到的EasyDarwin)

2.SRS:(Simple Rtmp Server)一个采用MIT协议授权的国产的简单的RTMP/HLS 直播服务器,其核心的价值理念在于简单高效

一位疯狂舔SRS的小哥哥说<SRS超级强,无所不能秒杀其他同类媒体服务器>

https://blog.51cto.com/renjunjie622/1782407

后SRS官方改名为:ossrs

github:

产品定位:https://github.com/ossrs/srs/wiki/v1_CN_Product

产品发展:https://ossrs.net/srs.release/releases/

总的来看SRS还是可以的…

附带资料:

完整的直播+点播全端解决方案 https://blog.csdn.net/dipolar/article/details/64122168

3.Nginx-RTMP:

战斗民族俄罗斯人民开发的一款NGINX的流媒体插件,除了直播发布音视频流之外具备流媒体服务器的常见功能

比如推拉流媒体资源

基于HTTP的FLV/MP4 VOD点播

HLS (HTTP Live Streaming) M3U8的支持

基于http的操作(发布、播放、录制)

可以很好的协同现有的流媒体服务器以及播放器一起工作

在线调用ffmpeg对流媒体进行转码

H264/AAC音视频编码格式的支持

linux/BSD/MAC系统的支持

因为我们如果做的点播的话不涉及直播板块,几乎还是使用HTTP协议,根据之前的一篇博文:(NGINX-RTMP风生水起有几个很重要的因素。首先2012年开始CDN业务开始快速增长,随之直播业务也需求暴涨,没有特别满意的流媒体服务器;其次,NGINX在HTTP领域绝对是霸主,大家对于NGINX系的熟悉程度很高,便于维护;再次,直播点播使用一套服务器,很有诱惑力,这可以算是“万金油”效应,很多套服务器搞得焦头烂额,肯定一套服务器能解决问题;最后,CDN是运维比技术牛逼的行业,运维的信心都是运行出来的,NGINX运行那么良好,那么NGINX-RTMP也肯定不错。)

综上所述,DSS我对他没有什么好感,SRS是挺牛逼的但是总觉得用的话是大材小用,毕竟人家还是主做流直播的,转点播也需要一点功夫。个人觉得可以上一波NGINX,一个原因是主要目标是视频点播,上的还是HTTP服务,其次是Nginx这块我们可能上手也比较OK。

其他资料

https://www.idcicp.com/assist/assistInfo_22381.html

CPU:两颗至强E5530

内存:16GB

硬盘:2T

操作系统:CentOS 6.5 64bit

这样子的一个配置大致是能满足一个200-300人同时在线的短视频app的需求的

http://www.webxun.com/newsxq_201.html

暂不考虑直播功能(美颜的算法与聊天室功能还是服务器压力)

https://bbs.csdn.net/topics/300252276

lvc的live555的server端也小有名气

https://blog.csdn.net/dxpqxb/article/details/83012950

srs andrioid直播推流(可以学习一下,不过先不碰直播这个板块吧)

https://blog.csdn.net/yb1314111/article/details/84983568

抖音短视频源码中视频排序模块热门列表解决方案

https://blog.csdn.net/vn9PLgZvnPs1522s82g/article/details/78780562

利用Simple-RTMP-Server搭建RTMP和HLS直播服务

https://blog.csdn.net/elesos/article/details/80899787

利用Nginx搭建RTMP视频直播,点播服务器,ffmpeg推流,回看

下载的一些p2p流媒体服务的研究资料

链接:https://pan.baidu.com/s/1hwMk_YdeGFI1nwC6BVM3XQ

提取码:rcjq

————————————————

版权声明:本文为CSDN博主「我的浪漫与极端」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/u013202518/java/article/details/89956990