众所周知,网页中的视频一般是基于flash的,而接触过iOS的人,应该都知道,iOS的safari是不支持的flash,至于iOS为何不支持flash,可以查考这里. 那如何支持视频呢?对,就是html5的video,iOS safari已经支持了html5的video. 于是第三方视频网站要实现的就是提供带video的html,这样iOS设备才有办法播放.

兼容iOS

视频网站要兼容iOS设备,那必须知道客户端是否是iOS设备,这个可以通过user-agent来判断,于是在PC上的浏览器可以通过设置user-agent来模拟iOS浏览器. 既然可以识别出客户端,那接下来的工作就是根据客户端的不同,提供不同的html,对于iOS用户,提供带有video的html,而对于其他客户端,则保留原来的方式.

HTML5的video标签

HTML5可谓是下一代HTML,其在HTML的基础上增加了很多特性,其中支持多媒体就是其中之一,多媒体包括音频、视频等,接下来介绍下视频标签.

< video src="movie.ogg" controls="controls"> < /video>

上述中是video标签的简单例子,其中src就指明了视频源.视频源可以是mp4、ts、m3u8等

m3u8

也许很多人都不熟悉m3u8,当然也包括我,m3u8实际不是一个视频编码格式,而仅仅是一种播放多媒体列表的文件格式. m3u8是Unicode版本的m3u,用UTF-8编码。”M3U”和”M3U8”文件都是苹果公司使用的HTTP Live Streaming格式的基础,这种格式可以在iPhone和Macbook等设备播放。

m3u8文件是一个纯文本文件,可以指定多个多媒体的位置.

  • #EXTM3U - 文件的头部,必须是文件的第一行
  • #EXTINF - 指示多媒体文件的信息,包括播放时间和标题

下面来看下m3u8的文件DEMO:

\#EXTM3U
\#EXT-X-TARGETDURATION:12
\#EXT-X-VERSION:2
\#EXTINF:6,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=0&ts_end=5.906&ts_seg_no=0&ts_keyframe=1
\#EXTINF:5,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=5.906&ts_end=10.661&ts_seg_no=1&ts_keyframe=1
\#EXTINF:6,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=10.661&ts_end=16.667&ts_seg_no=2&ts_keyframe=1
\#EXTINF:10,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=16.667&ts_end=27.136&ts_seg_no=3&ts_keyframe=1
\#EXTINF:9,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=27.136&ts_end=36.019&ts_seg_no=4&ts_keyframe=1
\#EXTINF:12,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=36.019&ts_end=47.823&ts_seg_no=5&ts_keyframe=1
\#EXTINF:10,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=47.823&ts_end=58.083&ts_seg_no=6&ts_keyframe=1
\#EXTINF:10,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=58.083&ts_end=67.843&ts_seg_no=7&ts_keyframe=1
\#EXTINF:8,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=67.843&ts_end=75.684&ts_seg_no=8&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=75.684&ts_end=86.862&ts_seg_no=9&ts_keyframe=1
\#EXTINF:8,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=86.862&ts_end=94.786&ts_seg_no=10&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=94.786&ts_end=105.672&ts_seg_no=11&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=105.672&ts_end=116.892&ts_seg_no=12&ts_keyframe=1
\#EXTINF:12,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=116.892&ts_end=128.529&ts_seg_no=13&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=128.529&ts_end=139.998&ts_seg_no=14&ts_keyframe=1
\#EXTINF:12,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=139.998&ts_end=151.552&ts_seg_no=15&ts_keyframe=1
\#EXTINF:8,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=151.552&ts_end=159.643&ts_seg_no=16&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=159.643&ts_end=171.071&ts_seg_no=17&ts_keyframe=1
\#EXTINF:12,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=171.071&ts_end=182.624&ts_seg_no=18&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=182.624&ts_end=193.802&ts_seg_no=19&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=193.802&ts_end=204.396&ts_seg_no=20&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=204.396&ts_end=215.324&ts_seg_no=21&ts_keyframe=1
\#EXTINF:12,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=215.324&ts_end=226.918&ts_seg_no=22&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=226.918&ts_end=237.888&ts_seg_no=23&ts_keyframe=1
\#EXTINF:12,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=237.888&ts_end=249.691&ts_seg_no=24&ts_keyframe=1
\#EXTINF:11,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=249.691&ts_end=260.327&ts_seg_no=25&ts_keyframe=1
\#EXTINF:9,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=260.327&ts_end=269.711&ts_seg_no=26&ts_keyframe=1
\#EXTINF:4,
http://121.12.89.21/6772086E552337397BF87488A/0300080100546C4E8E39C501DB0DC93150BCFB-DFBD-8638-4B96-9661586BFA43.mp4?ts_start=269.711&ts_end=273.34&ts_seg_no=27&ts_keyframe=1
\#EXT-X-ENDLIST

综述

于是,iOS设备播放在线视频原理是视频网站通过user-agent来适配并提供带video标签的html,video的src设置为视频列表文件源,即m3u8,iOS获取到相应的m3u8文件后,从而播放其中的视频链接.