转载:http://blog.sina.com.cn/s/blog_4ae178ba01015hx1.html
http://blog.sina.com.cn/s/blog_4ae178ba01015hwz.html
YouTube已经支持HTML5嵌入。YouKu目前全站支持HTML5,不过嵌入代码还是Flash的。抽空分析了下HTML5下的播放地址,很简单。
优酷
大男当婚 第1集 (看红色文字,应该看的明白)
网页地址: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
土豆
在土豆页面源码中找到这个 js 文件: http://js.tudouui.com/js/page/play/ios/iosplayer_14.js 从中分析土豆 .m3u8 文件地址应该是 http://m3u8.tdimg.com",u,r,q,t+".m3u8 而 u,r,q,t 这四个值如何取得就不知道了,跟土豆视频的页面地址 http://www.tudou.com/programs/view/xxxx/ 毫无关系。
然后我随便找了一个首页视频:http://www.tudou.com/programs/view/GXVRIlaM2dM 看它源码大概15行左右找到,
页头有一段:
<body id="p-pi" class="page_play normal">
<script>document.domain = "tudou.com"; var pageId = 1 ,defaultTheme = 'normal' ,iid = 140638149 ,icode = 'GXVRIlaM2dM' ,oid = 73656148 ,onic = "土豆大明星" ,cid = 1 ,time = '01:38' ,pic = 'http://i2.tdimg.com/140/638/149/p.jpg' ,lpic = "http://i2.tdimg.com/140/638/149/w.jpg" ,kw = "李颖芝靠暴露走红 脱“齐P短裙”穿爆乳装再战车展" ,title = kw ,desc = "李颖芝靠暴露走红 脱“齐P短裙”穿爆乳装再战车展" ,hd = 1 ,liveplayer = "http://js.tudouui.com/bin/online/MiniLivePlayer_2.swf" ,ol = 1 ,olw = 640 ,olh = 480 ,olr = 2278664 ,tict=3 ,dl = !0 ,sha = !0 ,np = 0 ,audio = false ,nc = '0' ,DMjsvar = "cid_1_0" ,comscore_c6 = 0 ,playerUrl = "http://js.tudouui.com/bin/player_online/TudouVideoPlayer_Homer_NewSkin_26.swf"; </script>
......
</body>
从上面得到视频缩略图地址是:http://i2.tdimg.com/140/638/149/w.jpg 发现土豆的 .m3u8 文件地址是
http://m3u8.tdimg.com/140/638/149/2.m3u8(现在不是2,是3了) 测试多个也是这样。
估计要能在煎蛋支持 iOS 切换到 HTML5 方式播放的话,
有两种方式:
1、用curl方式,抓取土豆视频页面的缩略图地址,再替换为.m3u8 文件地址
2、获取土豆的 api 做个专门插件,获取土豆视频的缩略图地址,再替换为.m3u8 文件地址 总之很坑爹。
联系了土豆的技术人员,他们给了我土豆 html5 兼容的视频代码:
其中代码与土豆视频网址的
http://www.tudou.com/programs/view/xxxx/
对应搜索
http://api.tudou.com/v3/gw?method=item.search&appKey=myKey&format=xml&kw=毕业季&pageNo=1&pageSize=20&inDays=1&media=v http://api.tudou.com/v3/gw?method=item.info.get&appKey=myKey&format=xml&itemCodes=VpjNU2qwMUw得到视频详情,和缩略图 http://i2.tdimg.com/147/806/921/m25.jpg
根据缩略图, 得到视频的m3u8地址 http://m3u8.tdimg.com/147/806/921/3.m3u8
乐视
网页网址: http://www.letv.com/ptv/pplay/81971/6.html
查看源代码:大概 28行 左右可以找到 pid:81971,//专辑ID,vid:1742809,//视频ID得到
http://www.letv.com/ptv/pplay/81971/6.html 对应的手机视频网址:
http://ipad.letv.com/play.php?type=1&id=81971&vid=1742809
从上面网址的源代码中找到下面一视频代码大概158行左右:
<video style="z-index:-100;" id="media" class="bof" width="100%" controls="controls" tabindex="0" src="http://g3.letv.cn/18/45/9/letv-uts/555554-AVC-549986-AAC-32000-2741905-200674696-bc8d624860c4052441eb633662ab20d3-1347743455655.mp4?b=2000&tag=ios&np=1&vtype=m3u8&ptype=70102210&level=800&t=1347984476&cid=5&vid=0&sign=mb&dname=mobile" autoplay ></video>
B: http://gslb.m.letv.com/gslb?s=7/7/113/2071162320.9.m3u8&br=292&vtype=m3u8&ptype=s2&level=350&t=1300069752 注意,这个是一个包含m3u8的文件
3)从B地址可以得到格式为mp4的视频流文件地址,如下 C: http://gslb.m.letv.com/gslb?s=7/7/113/2071162320.9.m3u8
技术含量: 常用的流媒体协议主要有 HTTP 渐进下载和基于 RTSP/RTP 的实时流媒体协议,这二种基本是完全不同的东西,目前比较方便又好用的我建议使用 HTTP 渐进下载的方法。在这个中 apple 公司的 HTTP Live Streaming 是这个方面的代表。它最初是苹果公司针对iPhone、iPod、iTouch和iPad等移动设备而开发的流.现在见到在桌面也有很多应用了, HTML5 是直接支持这个。 我们可以看看 HTTP Live Streaming 是怎么样工作的。平时的直播技术中,播放模式中必须等待整个文件下载完才行,在 HLS 技术中 Web 服务器向客户端提供接近实时的音视频流。但在使用的过程中是使用的标准的 HTTP 协议,所以这时,只要使用 HLS 的技术,就能在普通的 HTTP 的应用上直接提供点播和直播。 要详细了解原理,我们先看看这个所需要的步骤。 视频采集 ->编码器 -> 流分割 -> 普通 web 服务(索引文件和视频文件) -> 客户端 内 容准备的过程大约二种,一是视频采集,编码器首先将摄像机实时采集的音视频数据压缩编码为符合特定标准的音视频基本流,也可以拿编码完了的文件,有一点必 须保证,就是一定要使用H.264视频和AAC音频,因为发明这个的是苹果公司,只支持这个。然后给这些封装成成为符合MPEG-2(MPEG 2 TS、MPEG2 PS之所以使用这个,主要是因为声音和视频会交织在一起,也会有关键帧来让视频可以直接播放). 流分割部分在这个中, 比起 RTSP 之类和普通点播的最大不同,就是他会给 MPEG-2 分割成很多个 ts 的文件。分割过程大多是按时间来切,根据国外的资料,建议切 10s 一个的文件,如果码流高可以 5 秒一次。在分割还有一点不同,就是这时流分割器会生成一个含有指向这些小TS文件指针的索引文件 所以这个文件也必须在 web 服务器上,不能少。每多 10s 时,就会多一个 ts 文件,所以索引也会根着修改成最新的几段视频。 最后,这些切分了的小的一系列的 ts 文件,放到普通的 web 服务器中就行了。这时在 CDN 中也是一样,因为请求这些文件会使用标准的 HTTP 协议。索引文件后缀是.m3u8 ,索引文件采用扩展的M3U播放列表格式,其实就一文本。 内部的视频的地址会是如下 http://media.example.com/s_96ksegment1.ts http://media.example.com/s_96ksegment2.ts http://media.example.com/s_96ksegment3.ts 所以这时可以直接做 Cache 和直接放到 Web 服务器中,简单方便。 如果 MIME 的信息输出不对的话,记的要修改这加入 ts 和 m3u8 的后缀支持 .m3u8 application/x-mpegURL .ts video/MP2T 最后就是客户端,如果是 HTML 直接在 HTML5 中直接支持这种视频可以使用如下标签
<video tabindex="0" height="480" width="640">
<source src="/content1/content1.m3u8">
</video>
如果是应用客户端(Safari QuickTime之类),就得装软件来支持,客户端会根据选择的流的索引来下载文件,当下载了最少二段后开始播放。直接 m3u8 的索引结束。另外,HTTP可以设计成的自适应比特率流,在不同网络环境,选择下载不同码流的视频。 所以整个 HTTP Live Streaming 无论是直播还是点播,都能做到近似实时的方式来进行流播放。理论的最小时延是每个切片的长. 目前本协议加入了 IETF 的草案建议 http://tools.ietf.org/id/draft-pantos-http-live-streaming-01.txt 如果网站也想使用这种来做视频请看 iPhone HTTP 流与 FFMpeg 和开放的源 Segmenter http://www.ioncannon.net/programming/452/iphone-http-streaming-with-ffmpeg-and-an-open-source-segmenter/ Akamai http://iphone.akamai.com/ 白皮书 (http://www.akamai.com/dl/akamai/iphone_wp.pdf)
PPTV
pptv是html5里盗版电影最全的.都是MP4格式 主页地址 http://ipad.pptv.com/
一、取id 如正常观看地址为 http://ikan.pptv.com/p/10055638 那么MP4格式的需要转换成http://ipad.pptv.com/play_10055638.htm 由于pptv做了浏览器限制 所有需要用curl模拟iPad。
以下代码是 curl的函数
function curl($url) {
$curl = curl_init();
curl_setopt($curl,CURLOPT_URL,$url);
curl_setopt($curl,CURLOPT_HEADER,0);
curl_setopt($curl,CURLOPT_RETURNTRANSFER,1);
curl_setopt($curl,CURLOPT_USERAGENT,"Mozilla/5.0 (iPad; U; CPU OS 4_2_1 like Mac OS X; zh-cn) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5");
//模拟苹果设备
$data = curl_exec($curl);
curl_close($curl);
return $data;
}
二、取PlayList信息 这个是MD5加密的 具体是怎么加密的 没去研究 查看源文件 找到如此代码 var PlayList = ["ed132f42c1a386b26871a81914278920"];
三、合并链接取播放地址 合并成如下地址 http://ipad.pptv.com/api/ipad/list.js?cb=load.cbs.cb_1&md5=ed132f42c1a386b26871a81914278920 取得json 可以看到一个m3u的列表地址 嵌入到网页里就可以
四、小实例
五、总结 没什么技术含量 主要是为了支持本站的分享电影 如有错误 欢迎指正。