資訊專欄INFORMATION COLUMN
摘要：本文基于優(yōu)酷開放平臺撰寫。優(yōu)酷本身提供去廣告的接口可惜需要錢但是也提供了免費試用次頁面刷新次也就相當(dāng)于用完了以上基本播放器基本工作準(zhǔn)備就緒。
寫在前面的話：
昨天晚上無意間在土豆首頁logo處有個視頻彈出，原來是土豆新的推廣視頻方式。 興趣來了，就模仿了一個。
本文基于優(yōu)酷開放平臺API撰寫。介于使用土豆開放平臺一個參考。
土豆大概預(yù)覽圖（無溝你們怎么會進(jìn)來呢？(☆_☆)/~~）
優(yōu)酷開放平臺 - 工具箱 http://open.youku.com/tools
如截圖所示，YOUKU大大們只提供簡單幾個配置參數(shù)和方法，完全達(dá)不到能隱藏控制條和循環(huán)播放效果。
于是研究起源碼之路。
實例化一個播放器對象
player = new YKU.Player("youkuplayer",{
styleid: "0",
client_id: "YOUR YOUKUOPENAPI CLIENT_ID",
vid: "替換成優(yōu)酷視頻ID"
});
得到如下所示：(截圖)
1、 隱藏控制條
于是就找到隱藏控制條方法，調(diào)用 player.hideControls() 就行
2、 循環(huán)播放
優(yōu)酷播放器開發(fā)API沒有提供循環(huán)播放接口,但是想到一種比較hack寫法.
在播放結(jié)束的時候，繼續(xù)播放。但是直接調(diào)用繼續(xù)播放player.playVideo();，視頻畫面會卡住，影響體驗。在結(jié)束加一個setTimeout就解決問題，大概意思是，讓播放器設(shè)置回歸初始值就有個時間差的。
player = new YKU.Player("youkuplayer",{
... other
,events:{
//播放器結(jié)束播放時調(diào)用
onPlayEnd: function () {
// hack 循環(huán)播放
setTimeout(function () {
player.playVideo();
}, 4)
}
}
})
3、 去掉廣告
看到土豆首頁是直接播放，沒有廣告。于是調(diào)用優(yōu)酷免費廣告計劃。
優(yōu)酷本身提供去廣告的接口,可惜需要錢.
但是也提供了免費試用100次, 頁面刷新100次也就相當(dāng)于用完了.
以上基本播放器基本工作準(zhǔn)備就緒?，F(xiàn)在就是前端仿寫的工作。
4、鼠標(biāo)移動到土豆網(wǎng)logo,就立馬播放.
在測試期間發(fā)現(xiàn)，如果未等視頻播放器加載完畢，調(diào)用mouseenter事件的話，播放器是不會播放的。
并且還隱藏不了控制條player.hideControls()。
player = new YKU.Player("youkuplayer",{
... other
,events:{
//播放器準(zhǔn)備就緒調(diào)用
onPlayerReady: function () {
// 隱藏控制臺
player.hideControls();
// 添加mouseenter.mouseleave事件
$(document).on("mouseenter", "#logo", function(){
// 定位處理不在此撰寫。（別砸瓶子過來(^.^)。。
player.playVideo();
})
.on("mouseleave", "#logo", function(){
player.pauseVideo();
})
}
}
})
5、 解決div遮住優(yōu)酷視頻flash (FF、IE特有)
本想完成操作很完美，但FF、IE測試不盡如意，不會像土豆視頻一樣點擊進(jìn)入專題。
也是flash遮住了，但是要設(shè)置
player = new YKU.Player("youkuplayer",{
... other
// 隱藏設(shè)置，我**，能否在API文檔寫清楚么，害我查半天。
,flashext: ""
})
6、視頻尺寸問題，視頻有上下2條黑邊，完全做不到?jīng)]黑邊的效果（像卡片一樣精美。）
調(diào)整了半天只能達(dá)到這效果，估計是制作視頻的時候，沒符合優(yōu)酷的完美尺寸吧。
附上播放器隱藏還能記錄播放記錄的方法 http://note.rpsh.net/posts/2013/07/30/div-flash
只有在visibility:hidden; 或者left:-1000px情況下，視頻從隱藏至顯示是還能繼續(xù)播放的。
無恥附上鏈接（有廣告嫌疑，不要秒掉我：htpp://www.youxiake.com
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85416.html
摘要：今天來介紹一種簡單易行粗暴的方式來實現(xiàn)的視頻全屏播放。通過在一些主流視頻網(wǎng)站上的測試，在愛奇藝，土豆，芒果，等可正常全屏，在騰訊，樂視，等網(wǎng)站仍然無法全屏。經(jīng)測試，騰訊和沒有問題了，樂視和仍然不可以全屏，即使已經(jīng)找到了全屏按鈕的標(biāo)識。 用過WebView的開發(fā)者們肯定都知道這里面的坑數(shù)不勝數(shù)，加載緩慢，內(nèi)存泄露，文件選擇......沒錯，全屏播放視頻，這又是一個大坑。一個沒有修飾過...
摘要：今天來介紹一種簡單易行粗暴的方式來實現(xiàn)的視頻全屏播放。通過在一些主流視頻網(wǎng)站上的測試，在愛奇藝，土豆，芒果，等可正常全屏，在騰訊，樂視，等網(wǎng)站仍然無法全屏。經(jīng)測試，騰訊和沒有問題了，樂視和仍然不可以全屏，即使已經(jīng)找到了全屏按鈕的標(biāo)識。 用過WebView的開發(fā)者們肯定都知道這里面的坑數(shù)不勝數(shù)，加載緩慢，內(nèi)存泄露，文件選擇......沒錯，全屏播放視頻，這又是一個大坑。一個沒有修飾過...
摘要：與異步編程按照維基百科上的解釋獨立于主控制流之外發(fā)生的事件就叫做異步。因為的存在，至少在被標(biāo)準(zhǔn)化的那一刻起，就支持異步編程了。然而異步編程真正發(fā)展壯大，的流行功不可沒。在握手過程中，端點交換認(rèn)證和密鑰以建立或恢復(fù)安全會話。 1、前端 排序算法總結(jié) 排序算法可能是你學(xué)編程第一個學(xué)習(xí)的算法，還記得冒泡嗎？ 當(dāng)然，排序和查找兩類算法是面試的熱門選項。如果你是一個會寫快排的程序猿，面試官在比較...
閱讀 3331·2021-11-16 11:45
閱讀 4409·2021-09-22 15:38
閱讀 2855·2021-09-22 15:26
閱讀 3362·2021-09-01 10:48
閱讀 863·2019-08-30 15:56
閱讀 730·2019-08-29 13:58
閱讀 1497·2019-08-28 18:00
閱讀 2175·2019-08-27 10:53
