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

前奏

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

当前，video 元素支持三种视频格式：

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来分发