分析优酷HTML5地址

本文介绍如何解析优酷网站上的HTML5视频地址,并提供了一种简单的方法来获取m3u8播放列表,适用于iOS设备播放。文章还详细解释了获取视频ID和其他必要参数的过程。

分析优酷HTML5地址

技术不懂,2011年03月25日.

YouTube已经支持HTML5嵌入。YouKu目前全站支持HTML5,不过嵌入代码还是Flash的。抽空分析了下HTML5下的播放地址,很简单。

update:2011-04-27
发现获取m3u8 最简单的办法

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

XMjUzMzUxNzQ4 为视频ID 自行修改 在苹果设备中直接播放 win下需要模拟useragent 成iPhone



以此视频链接为例: http://v.youku.com/v_show/id_XMjUzMzUxNzQ4.html
查看js文件找到一个优酷的链接JSON信息

http://v.youku.com/player/getPlayList/VideoIDS/+VideoId
VideoId=XMjUzMzUxNzQ4
也就是
http://v.youku.com/player/getPlayList/VideoIDS/XMjUzMzUxNzQ4

VideoId可以使用全数字的或者Encoded的

通过获取js获取src我获得一个链接

http://v.youku.com/player/getM3U8/vid/63337937/type/mp4/sid/130102475520012/K/fb9bf1a9f
ad2f18c182699ea/video.m3u8

vid=视频id *注意*非列表id

sid=时间+随机数

K=key 由函数生成

m3u8是列表文件 在IOS 上可以读取的到
vid 我们可以在json里直接获取,其他几项需要几个函数

sid获取 php代码

function sid() {
$sid = time().(rand(0,9000)+10000);
return $sid;
}

key获取 网上转载 呵呵

function getkey($key1,$key2){
 $a = hexdec($key1);
 $b = $a ^ 0xA55AA5A5;
 $b = dechex($b);
 return $key2.$b;
}

之后合并下数据就可以了

附小实例

 

type这块经测试可以省略掉 如果出现异常可以通过

$play->data[0]->streamtypes

来获取

拿起iPhone 打开网页 点击播放 YouKu的视频就来了!呵呵

本文如有错误欢迎指正

本站分享的视频音乐均支持html5播放个别例外


转自:http://blog.xiaohai.co/archives/%E5%88%86%E6%9E%90%E4%BC%98%E9%85%B7html5%E5%9C%B0%E5%9D%80/

### 关于优酷首页的HTML和CSS源码示例 创建类似于优酷首页的设计涉及复杂的布局和技术栈,下面提供一个简化版的例子来说明如何构建类似的页面结构。 #### 页面头部 (Header) ```html <header> <nav class="navbar"> <a href="#" class="logo">Youku</a> <ul class="menu-items"> <li><a href="#">首页</a></li> <li><a href="#">电视剧</a></li> <li><a href="#">电影</a></li> <!-- 更多菜单项 --> </ul> <form action="" method="get" class="search-form"> <input type="text" placeholder="搜索..." /> <button>搜</button> </form> </nav> </header> ``` 此部分定义了一个简单的导航栏,包含了网站标志、主要分类链接以及搜索框[^1]。 #### 主体内容区域 (Main Content Area) ```html <main> <section class="hero-section"> <h2>热门推荐</h2> <div class="slider-container"> <!-- 轮播图或视频预览区 --> </div> </section> <section class="category-listings"> <article> <img src="path/to/image.jpg" alt="Video thumbnail"/> <p>Title of the video</p> </article> <!-- 多个文章区块重复上述模式 --> </section> </main> ``` 这里展示了两个典型的内容板块:一个是用于展示特色内容的大横幅;另一个则是按照类别排列的小卡片形式列表。 #### 样式表 (CSS Stylesheet) 为了使这些元素看起来更接近实际应用中的外观,可以采用如下样式的片段: ```css /* 导航条 */ .navbar { display: flex; justify-content: space-between; align-items: center; } .menu-items li { list-style-type: none; float:left; } .search-form input[type=text], .search-form button{ border:none; padding:.5em 1em; } .hero-section h2{ font-size:2rem;text-align:center;margin-bottom:10px;} .slider-container{/* 添加轮播插件所需的类 */ } .category-listings article img{ width:100%; height:auto; object-fit:cover; } ``` 以上仅作为基础框架的一部分,在真实项目里还需要考虑响应式设计、交互特效等方面的要求。对于完整的优酷主页复制,则需深入研究其官方资源文件或是利用开发者工具查看在线版本的具体实现细节[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值