現在有不少視頻網站,自帶了播放加速功能,例如油管,bilibili,慕課等等.節省了很多看視頻的時間,特別是看一些技術教程類的視頻,不管是念ppt還是手把手演示.
在自己付費的一些網站中,一些是自帶播放器不支持視頻加速的.因為已經被加速慣壞,變得很不習慣,今天特意研究了一下,對於幾種形式給出一些解決方法.
html5播放器
主要標志是<video>
,這種是最方便實現加速的,因為原生支持.
主要依靠這兩個屬性:
defaultPlaybackRate* (float): The playback speed at which the video should be played
playbackRate* (float): The current playback speed: 1.0 is normal, 2.0 is two times faster forward, -3.0 is three times faster backwards and so on
可以自己在console中修改實現(來源):
/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 2.0;
document.querySelector('video').play();
/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;
對應的插件chrome市場也有,用的比較多的有video speed controller
.
市場地址
flash播放器
比較頭疼的一個,chrome市場中也沒有找到對應的插件.
比較早之前傲游瀏覽器做過類似功能,實現的具體討論見 新版傲游主打的「馬上看」是如何實現對視頻廣告的快進的?.
不過這個功能已經涼了無法使用.
網上其他比較多的方案是myspeed.不過是收費軟件,並且一切反饋里表示看一會兒就掛了.
那只能用下載的方式拿到源文件,然后再用本地播放器比如potplayer等加速了.
但一些網站采用付費課程的形式,做了相應的舉措防止用戶下載,這樣就感覺無計可施了.
不過有一些迂回的方式,這類網站還在使用flash沒有升級到html5,但在mac上使用flash並不方便,所以他們可能為了mac或者iOS的用戶采用了其他的播放方式.
今天遇到了一個這樣的例子:
if(isMobile() && isSafari() )
{
$("#player").html('<video src="'+vodadd_m3+'" class="videoimg" controls="controls"></video>');
}
else
{
var fls = flashChecker();
if (fls!=null && !fls.f)
{
alert("請安裝flash播放控件,並使用QQ瀏覽器觀看!");
}
$("#player").html(' <embed src="'+vodadd+'" quality="high" class="videoimg" allowScriptAccess="always" allownetworking="all" '+
'allowfullscreen="true" type="application/x-shockwave-flash" wmode="window" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>');
}
js里有增加video
標簽的代碼! 這樣就轉換到了上面的html5播放器的解決方法了.
isMobile
和isSafari
的判斷用UA就可以糊弄過去了.(chrome F12設備選擇ipad即可, 或者用Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
)
然額並打不開,因為他又使用了m3u8
這種格式,所以才在js里判斷safari.
但有對應chrome插件支持,在應用市場安裝Native HLS Playback
在頁面點擊play embedded
即可.
這樣因為之前又裝了video speed controller
,就出現了調整速度的選項.
至此在這種特殊情況下的flash播放問題也解決了.
不過針對只有flash播放器的環境還是沒找到合適的解決方法.
但可以通過查看判斷的代碼,改變UA等方式再找找有沒有可以迂回的方式.