HTML5 视频直播(一)( 转)

HTML5 视频直播(一)

IT社区推荐资讯 - ITIndex.net Apr 24

前不久工作中遇到了在移动 WEB 端直播视频的需求,研究了一下相关技术,记录一下。

目前 WEB 上主流的视频直播方案有 HLS 和 RTMP,移动 WEB 端目前就只有 HLS 能用,我们重点介绍它。

HTTP Live Streaming

HTTP Live Streaming(简称 HLS)是一个基于 HTTP 的视频流协议,由 Apple 公司实现,Mac OS 上的 QuickTime、Safari 以及 iOS 上的 Safari 都能很好的支持 HLS,高版本 Android 也增加了对 HLS 的支持。一些常见的客户端如:MPlayerX、VLC 也都支持 HLS 协议。

HLS 协议基于 HTTP,非常简单。一个提供 HLS 的服务器需要做两件事:

  • 编码:以 H.263 格式对图像进行编码,以 MP3 或者 HE-AAC 对声音进行编码,最终打包到 MPEG-2 TS(Transport Stream)容器之中;
  • 分割:把编码好的 TS 文件等长切分成后缀为 ts 的小文件,并生成一个 .m3u8 的纯文本索引文件;

浏览器使用的是 m3u8 文件。m3u8 跟音频列表格式 m3u 很像,可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。播放器按顺序逐个播放,全部放完再请求一下 m3u8 文件,获得包含最新 ts 文件的播放列表继续播,周而复始。整个直播过程就是依靠一个不断更新的 m3u8 和一堆小的 ts 文件组成,m3u8 必须动态更新,ts 可以走 CDN。

可以看到 HLS 协议本质还是一个个的 HTTP 请求 / 响应,所以适应性很好,不会受到防火墙影响。但它也有一个致命的弱点:延迟现象非常明显。如果每个 ts 按照 5 秒来切分,一个 m3u8 放 6 个 ts 索引,那么至少就会带来 30 秒的延迟。如果减少每个 ts 的长度,减少 m3u8 中的索引数,延时确实会减少,但会带来更频繁的缓冲,对服务端的请求压力也会成倍增加。所以只能需要根据实际情况找到一个折中的点。

对于支持 HLS 的浏览器来说,直接这样写就能播放了:

  <video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"
height="300" width="400"></video>

对于不支持 m3u8 的浏览器,比如 PC / Mac 上的 Chrome,需要借助 Flash 来实现了。网上有一些较为成熟的方案可以直接用,如: Sewise Player(免费)、 JW Player(收费)。

Real Time Messaging Protocol

Real Time Messaging Protocol(简称 RTMP)是 Macromedia 开发的一套视频直播协议,现在属于 Adobe。这套方案需要搭建专门的 RTMP 流媒体服务如 Adobe Media Server,并且在浏览器中只能使用 Flash 实现播放器。它的实时性非常好,延迟很小。但是无法支持移动端 WEB 播放是它的硬伤。

前面提到的 JW Player 能很好的播放采用 RTMP 协议的直播服务。

这次先写这么多,下一篇写一个另类的直播方案。

本文链接: https://www.imququ.com/post/html5-live-player-1.html

--EOF--

时间: 2024-10-28 13:18:24

HTML5 视频直播(一)( 转)的相关文章

使用 WebSockets 进行 HTML5 视频直播

最近在做的一个小项目需要用到相关技术,找到这篇文章貌似不错,于是就翻译转载上来了. Recently I'm interesting in these technologies and I'm working on a project related to it. I've found this useful article so I translated and posted it here. 原文地址 / Original post: HTML5 Live Video Streaming v

HTML5视频直播技术

分享内容简介:目前视频直播,尤其是移动端的视频直播已经火到不行了,基本上各大互联网公司都有了自己的直播产品,所以对于直播的一些基本知识和主要技术点也要有所了解,本次分享就向大家介绍一下其中的奥秘. 内容大体框架: 怎样利用 HTML5 来播放直播视频 怎样录制直播视频 怎样实时上传直播视频 直播中的用户交互 下面是本期分享内容整理 Hello, 大家好,我是吕鸣,目前是在腾讯 SNG 的即通应用部负责手Q的兴趣部落 Web 前端开发工作. 针对目前比较火的视频直播,我做了一些研究和探索,同时我们

采用ffmpeg和ffserver实现音视频直播和点播

一.嵌入式开发板采集音视频(远程) 音频采集程序:./audioc -i 222.222.222.222 -p 8888; 视频采集程序:./videoc -i 222.222.222.222 -p 9999; 音频采集程序利用alsa库,采集原始音频帧,发送至服务器进程(222.222.222.222,  8888); 视频采集程序利用v4l2库,采集原始视频帧,h.264硬编码后,发送至服务器进程(222.222.222.222, 9999); 二.Linux服务器接收音视频 音频接收程序:

nginx视频直播/点播服务干货分享

近年互联网直播业务非常火热.我也研究了下,发现nginx上配置视频直播点播也很容易实现,特分享一下.一.ubuntu14.04安装nginx及nginx_rtmp_module扩展 nginx根据是否已安装和安装的方式不同,有一下三种方式安装及扩展安装.1.全新安装nginx和nginx_rtmp_module扩展 #!/bin/sh apt-get update apt-get install -y gcc libpcre3 libpcre3-dev openssl libssl-dev ma

【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直播这么火,再不学就 out 了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术. 1. H5 到底能不能做视频直播? 当然可以, H5 火了这么久,涵盖了各个方面的技术. 对于视频录制,可以使用强大的 webRTC(Web Real-Time Communica

简单几步打造网络视频直播平台(转)

简单几步打造网络视频直播平台 分类:学以致用 2013-02-04 13:20 阅读(1132)评论(0) 不管是个人玩还是企业用,直播电台总是显得比较高端和神秘,今天我们来看看怎么用简单几步实现基于Flash流媒体服务器的网络视频直接直播平台. 1.服务端准备 常见的免费Flash流媒体服务器有国产的UMS和国际开源的Red5,UMS只有windows平台安装包,而用java开发的Red5更秉承了开源软件一贯兼容特色,可以多平台运行. UMS相对简单,全经典windows程序安装步骤,安装过程

H5视频直播扫盲

H5视频直播扫盲 2016-05-25 • 前端杂项 • 14 条评论 • lvming19901227 视频直播这么火,再不学就out了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主要的技术点,包括但不限于前端技术. 1 H5到底能不能做视频直播? 当然可以, H5火了这么久,涵盖了各个方面的技术. 对于视频录制,可以使用强大的webRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音对话或视频对话的技术,缺点是只在PC的chrome

跟阿里云技术专家阙寒一起深度了解视频直播CDN技术

网络直播平台现下已经十分火热,很多常见的直播平台都采用了阿里云直播CDN来搭建自身业务.今天,我们请来了阿里云CDN团队技术专家阙寒,来介绍下视频的一些基础知识和视频直播的架构. 在进入正题之前,我们先来了解视频直播相关的名词含义是什么?扫个盲 通常我们所说的视频,是指连续的图象变化每秒超过24帧(Frame)画面以上时,根据视觉暂留原理,人眼无法辨别单幅的静态画面,看上去是平滑连续的视觉效果,这样连续的画面叫做视频. 而媒体转码是指将一段多媒体包括音频.视频或者其他的内容从一种编码格式转换成为

一对一视频直播系统源码是如何实现即时通讯呢?

作者/布谷惠泽 来源/山东布谷鸟网络  在这个快速发展的时代,急功近利,心浮气躁成为当代人的共性.大多数人承受着巨大的压力,在这个时代小心翼翼的行走,而一对一直播交友源码的出现,成为人们宣泄压力的新渠道.在一对一直播交友源码平台直播间我们通常会看到网友们在线上互相交流和发礼物,在这里,主要是用到了及时通讯技术,那一对一直播源码系统交友源码是如何实现及时通讯的呢?  即时通讯是什么?即时通讯简称IM,是一个终端服务,允许两人或者多人使用网络即时的传递文字讯息,档案,语音与视频交流.即时通讯技术的原