m3u8是什么?单码/多码率适配流 m3u8最适合CDN来分发 m3u8可以做切片文件 HTML5 Video播放视频格式

分类:杂谈| 发布:佚名| 查看: | 发表时间:2014/2/10

前奏

YouTube播放器已经支持HTML5嵌入。YouKu目前全站支持HTML5,不过嵌入代码还是Flash的。那么html5的视频资源都是怎么个形式呢? 我们知道:html5 video是用来播放视频的,那它支持哪些格式呢?

当前,video 元素支持三种视频格式:

格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

分析一下YOUKU播放视频地址:

网页地址:http://v.youku.com/v_show/id_XNDU1NjE4Nzg0.html 

查看源文件,在上面的JS内容中,大概在源文件40行左右,找到:

var videoId2 = 'XNDU1NjE4Nzg0';

转换获取m3u8 地址(以下两地址都可以播放):

mp4:

http://v.youku.com/player/getRealM3U8/vid/XNDU1NjE4Nzg0/type/mp4/v.m3u8

flv:

http://v.youku.com/player/getRealM3U8/vid/XNDU1NjE4Nzg0/type/video.m3u8

其中“XNDU1NjE4Nzg0”为视频videoId2

那么下边的代码能播放吗 ?

<video width="896" height="504" controls="controls">
<source src="http://cdn007.gravlab.net/311/pa/v1d30/pages/film_strip_1400k_audio_and_logo/hls/20130930filmlogoaudiobandwidthonly.m3u8" type="vnd.apple.mpegURL" />
<source src="http://cdn007.gravlab.net/311/pa/v1d30/pages/film_strip_1400k_audio_and_logo/20130930filmlogomusic.mp4" type="video/mp4" />
<source src="http://cdn007.gravlab.net/311/pa/v1d30/pages/film_strip_1400k_audio_and_logo/20130930filmlogomusic.webm" type="video/webm" />

<object width="896" height="504" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="src" value="https://gravlab.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" />
<param name="flashvars" value="url=http%3A//cdn007.gravlab.net/003119/sparse/v1d30/pages/film_strip_1400k_audio_and_logo/20130930filmlogomusic.mp4&amp;poster=/wp-admin/" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="true" />
<embed width="896" height="504" type="application/x-shockwave-flash" src="https://gravlab.com/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=http://cdn007.gravlab.net/311/pa/v1d30/pages/film_strip_1400k_audio_and_logo/20130930filmlogomusic.mp4&amp;poster=/wp-admin/" allowfullscreen="true" allowscriptaccess="true" />
</object>
</video>

代码来源:http://gravlab.com/2013/10/26/example-sample-http-live-streaming-m3u8-embedded-player/

什么是M3U8?与HTML5的区别是什么?

M3U8也是一种M3U,只是它的编码格式是UTF-8格式。
1:M3U8是苹果专用的“视频格式”;HTML5是一种“网页编码格式”。两者属性不同
2:M3U8视频只能苹果设备访问,即苹果设备才能解码此类视频;而HTML5是开放的,苹果设备、安卓设备都能访问
3:“iPad模式”只是用“iPad的加载方式”来加载网页,因为屏蔽了flash,对方网站自然就推送HTML5页面(如果有的话)
4:对于含有M3U8视频的HTML5网页,安卓设备不能解析和播放M3U8视频,但可以访问该网页
5:HTML5并非苹果独占,苹果独占的是某些HTML5网页里面的U3M8视频
6:如果该HTML5网页里面没有M3U8视频,则安卓设备可以完美访问,即完美“伪装iPad”
7:结论:“伪装iPad”就是叫对方网站推送HTML5版的界面给我们,而不是访问iPad专用资源,如果对方资源全是M3U8,即便伪装iPad,安卓平板也不能拿下。

m3u8文件有两种应用场景:

多码率适配流
#EXTM3U
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1280000
http://example.com/low.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2560000
http://example.com/mid.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=7680000
http://example.com/hi.m3u8
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=65000,CODECS="mp4a.40.5"
http://example.com/audio-only.m3u8
单码率适配流
#EXTM3U
#EXT-X-TARGETDURATION:5220
#EXTINF:5220,
http://media.example.com/entire.ts
#EXT-X-ENDLIST

m3u8非常适合CDN来分发

M3U8分顶级M3U8和二级M3U8, 顶级M3U8主要是做多码率适配的, 二级M3U8才是真正的切片文件,
客户端默认会首先选择码率最高的请求,如果发现码率达不到,会请求郊低码率的流
客户端拿到上面的二级M3U8文件后,会继续请求里面的文件,这时就可进行播放了。
上面讲解的是点播的情况,直播的情况,M3U8文件里面会有属性告诉是直播,客户端会定时来请求新的M3U8文件
 
m3u8是分散的几个视频文件。。 可以通过CDN来分发。
m3u8里面定义描述的
如果你是内容放, 那么购买 流服务器以及相关服务, 就是很必要的一些事情了, 他能够顺带给你解决很多由于编码格式带来的版权问题(也就是有折扣之类)
你不会不知道, 如果商用的mp4, mp3 以及mpeg 这些, 超过一定流量的情况下, 是需要付费的吧. 而且很贵.
365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/943.html