• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > H5做视频直播

H5做视频直播

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含视频直播 等相关知识,匿名希望在学习及工作中可以帮助到您
为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术。

1 H5到底能不能做视频直播?

当然可以, H5火了这么久,涵盖了各个方面的技术。

对于视频录制,可以使用强大的webRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在PC的chrome上支持较好,移动端支持不太理想。

对于视频播放,可以使用HLS(HTTP Live Streaming)协议播放直播流,iOS和Android都天然支持这种协议,配置简单,直接使用video标签即可。

webRTC兼容性:

video标签播放hls协议视频:




1

2

3

4


<video controls autoplay>

<source src="http://10.66.69.77:8080/hls/mystream.m3u8" type="application/vnd.apple.mpegurl" />

<p class="warning">Your browser does not support HTML5 video.</p>

</video>


2 到底什么是HLS协议?

简单讲就是把整个流分成一个个小的,基于HTTP的文件来下载,每次只下载一些,前面提到了用于H5播放直播视频时引入的一个.m3u8的文件,这个文件就是基于HLS协议,存放视频流元数据的文件。

每一个.m3u8文件,分别对应若干个ts文件,这些ts文件才是真正存放视频的数据,m3u8文件只是存放了一些ts文件的配置信息和相关路径,当视频播放时,.m3u8是动态改变的,video标签会解析这个文件,并找到对应的ts文件来播放,所以一般为了加快速度,.m3u8放在web服务器上,ts文件放在cdn上。

.m3u8文件,其实就是以UTF-8编码的m3u文件,这个文件本身不能播放,只是存放了播放信息的文本文件:




1

2

3

4

5

6

7


#EXTM3U m3u文件头

#EXT-X-MEDIA-SEQUENCE 第一个TS分片的序列号

#EXT-X-TARGETDURATION 每个分片TS的最大的时长

#EXT-X-ALLOW-CACHE 是否允许cache

#EXT-X-ENDLIST m3u8文件结束符

#EXTINF 指定每个媒体段(ts)的持续时间(秒),仅对其后面的URI有效

mystream-12.ts


ts文件:

HLS的请求流程是:
1 http请求m3u8的url。
2 服务端返回一个m3u8的播放列表,这个播放列表是实时更新的,一般一次给出5段数据的url。
3 客户端解析m3u8的播放列表,再按序请求每一段的url,获取ts数据流。

简单流程:

3 HLS直播延时

我们知道hls协议是将直播流分成一段一段的小段视频去下载播放的,所以假设列表里面的包含5个ts文件,每个TS文件包含5秒的视频内容,那么整体的延迟就是25秒。因为当你看到这些视频时,主播已经将视频录制好上传上去了,所以时这样产生的延迟。当然可以缩短列表的长度和单个ts文件的大小来降低延迟,极致来说可以缩减列表长度为1,并且ts的时长为1s,但是这样会造成请求次数增加,增大服务器压力,当网速慢时回造成更多的缓冲,所以苹果官方推荐的ts时长时10s,所以这样就会大改有30s的延迟。参考资料:https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/FrequentlyAskedQuestions/FrequentlyAskedQuestions.html

4 视频直播的整个流程是什么?

当视频直播可大致分为:

您可能想查找下面的文章:

相关文章

  • 2018-12-03如何解决HTML5微信播放全屏问题的方法
  • 2018-12-03JS之原生数组splice方法实例
  • 2018-12-03HTML5 DragEvent接口的实例讲解
  • 2018-12-03解析HTML5应用程序缓存Application Cache
  • 2018-12-03HTML参考
  • 2018-12-03JavaScript中call,apply,bind方法的总结
  • 2018-12-03HTML5 FileReader接口的详细介绍
  • 2018-12-03 小强的HTML5移动开发之路(1)——HTML介绍
  • 2018-12-03html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头
  • 2018-12-03如何评价html5规范正式定稿对互联网以及电子商务的影响?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • li标签实现日期,标题右对齐的方法
    • Html5无刷新修改browser Url的方法
    • html5 embed标签的loop属性是怎么用的?embed标签的属性总结!
    • html5怎么实现图片转圈的动画效果
    • vue项目中如何映入noVNC远程桌面
    • html5 button autofocus 属性介绍及应用
    • html5+svg学习指南之SVG基础知识
    • svg和css3实现环形渐变进度条的代码示例
    • Html5 Canvas中支持对text文本进行渲染的示例代码(图)
    • HTML5 Canvas基本线条绘制的实例教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有