網頁視頻加速
在網頁聽課過程，看到有同學反映視頻速度節奏略慢，所以就想著怎么能夠對網頁視頻加速。查找教程過程發現，大家一致性的選擇對?html5?播放器播放的視頻進行修改（可以理解，畢竟是主流），修改方法是通過js代碼，在瀏覽器的控制臺console中實現加速。那么通過實驗，總結出如下適用于課程視頻加速方法。
過程很簡單，主要用到的是
1.playbackRate播放速率（浮動）：當前播放速度：1.0 是正常的，2.0 快兩倍，-3.0 是快三倍等
首先需要在在瀏覽器中打開審查元素，找到控制臺consol
之后輸入以下代碼，調整playbackRate參數，完成網頁視頻速率的改變 document.querySelector('video').playbackRate?=?3.0;
查詢過程找到有關于html5播放器更多設置屬性，有一定的參考價值，也翻譯留下，等著前端熟悉到一定程度嘗試著應用，如下。在末尾處留下html5播放器屬性介紹原文網址。
HTML 5視頻和Mootools
這是關于使用Mootools 1.2編寫HTML 5視頻標簽的腳本。
有人會問，視頻標簽有什么特別之處？乍一看，它像其他任何元素一樣都是HTML元素。但是，如果您嘗試使用某些mootools函數（添加事件或查詢屬性），您很快就會意識到，在當前版本中，它并不是開箱即用的。但是有一種解決方法。
在Lighthouse（mootools bugtracking）上閱讀有關它的更多信息?
簡而言之：要訪問視頻屬性（如$（'myvid'）。currentTime）或通過mootools附加新事件（如volumechange），可以使用以下解決方法：
var?media_events?=?{?????loadstart：2，進度：2，暫停：2，中止：2，?????錯誤：2，清空：2，停滯：2，播放：2，暫停：2?????loadedmetadata：2，loadeddata：2，等待中：2，播放中：2，?????canplay：2，canplaythrough：2，尋求：2，尋求：2?????timeupdate：2，結束：2，速率更改：2，持續時間更改：2，音量更改：2?}?Element.NativeEvents?=?$?merge（Element.NativeEvents，media_events）;??var?media_properties?=?[?'videoWidth'，'videoHeight'，'readyState'，'autobuffer'，?'錯誤'，'網絡狀態'，'當前時間'，'持續時間'，'暫停'，'搜索'，?“結束”，“自動播放”，“循環”，“控件”，“音量”，“靜音”，?'startTime'，'buffered'，'defaultPlaybackRate'，'playbackRate'，'played'，'seekable'//這6個屬性目前在firefox中不起作用??];??media_properties.each（function（prop）{?Element.Properties.set（prop，{?設置：函數（值）{?this?[prop]?=值；?}，?得到：function（）{?返回這個[prop];?}?}）?}）;
請注意：在mootools-core中實施之前，這只是一個快速的解決方法。
您可以在下面的演示中看到所有內容
這非常簡單（使用上述解決方法）：
我們使用一個跨度來顯示視頻播放的當前時間，并使用以下時間更新事件來對其進行連續更新：
$（'myvid'）。addEvent（'timeupdate'，function（an_event）{?$（'timemeter'）。set（'html'，this.get（'currentTime'）。toFixed（1））;?}）;
也沒有火箭科學，但我們必須注意不要超過體積的限制（從0.0到1.0）：
我們想將當前的音量顯示為數字。因此，我們使用“ volumechange”事件并在每次觸發該事件時更新一個簡單的SPAN：
$（'myvid'）。addEvent（'volumechange'，function（an_event）{?$（'volmeter'）。set（'html'，this.get（'volume'）。toFixed（1））;?}）;
視頻的靜音狀態會覆蓋當前的音量設置。這是一個切換按鈕（開/關），因此實現也非常簡單：
按鈕還可以，但是通常我們是通過滑塊或旋鈕來控制音量的。因此，讓我們使用mootools Slider（來自mootools.more）以十個步驟控制音量。
首先，我們需要一個容器和一個旋鈕，這里需要一個段落和一個按鈕：
現在我們設置mootools Slider并使用其onComplete事件相應地更改音量：
var?mySlider?=?new?Slider（'volSliderBg'，'volSlider'，{?????范圍：[0，100]，?????車輪：是的，?????snap：是的，?????步驟：10，?????initialStep：100，?????onComplete：函數（步驟）{?$（'myvid'）。set（'volume'，（step.toInt（）/?100））;?????}?}）;
如您所見，通過應用上述解決方法，我們很自然地可以使用新的屬性和事件來構建我們的自定義視頻控件。
HTML 5視頻– DOM屬性和事件
最后一篇文章是關于HTML 5視頻標簽的，現在我們來看一下DOM方面：屬性和事件。
除了標準屬性（例如寬度，高度，id…）之外，還有一些特定于視頻標簽的屬性。
準確地說：這些屬性并非全部針對視頻標簽，某些屬性也用于音頻標簽。
src?（字符串）：源文件
poster?（URL）：在視頻播放之前顯示的圖像
controls?（布爾值）：瀏覽器是否提供了播放控件？
videoWidth, videoHeight?（整數）：原始視頻大小
currentTime?（浮動）：當前播放時間（以秒為單位）
startTime*?（浮動）：視頻開始時間（例如，如果視頻不是從0.0開始-例如流）
duration?（浮動）：持續時間（以秒為單位）
paused?（布爾值）：視頻當前是否已暫停？
ended?（布爾值）：視頻結束了嗎？
autoplay?（布爾值）：是否設置為自動播放？
loop?（布爾值）：是否設置為循環播放？
autobuffer?（布爾值）：瀏覽器是否應該立即開始緩沖視頻？
seeking?（布爾值）：瀏覽器當前正在視頻中搜索嗎？
defaultPlaybackRate*?（浮動）：視頻播放的播放速度
playbackRate*?（浮動）：當前播放速度：1.0是正常速度，2.0是前進速度的兩倍，-3.0是后退速度的三倍，依此類推
seekable*?（TimeRanges）：瀏覽器可以在其中尋找范圍的對象（有關此內容的更多信息，請參見下文）
buffered*?（TimeRanges）：一個范圍已緩沖的對象
played*?（TimeRanges）：用戶已經玩過的范圍對象
volume?（浮動）：當前音量-從0.0到1.0
muted?（布爾值）：視頻是否靜音？優先處理音量
readyState?（int）：視頻狀態（下面的說明）
networkState?（int）：網絡狀態（以下說明）
error?（MediaError）：如果出現問題，則為媒體錯誤對象
*：此屬性當前在Firefox中不起作用
您可以想象，某些屬性為只讀（持續時間，結束，readyState）–一些屬性可以讀取和寫入，例如volume，currentTime。
您可以像這樣訪問Javascript中的這些屬性：
var?myvid?=?document.getElementById（'vid'）;?myvid.muted?=?false;?myvid.currentTime?=?0.0;?如果（myvid.ended）{...}
如果發生錯誤，您可以閱讀錯誤代碼以作出反應-當前支持以下錯誤代碼：
MEDIA_ERR_ABORTED (1)?用戶中止視頻播放
MEDIA_ERR_NETWORK (2)?網絡錯誤（無法讀取流）
MEDIA_ERR_DECODE (3)?解碼錯誤，視頻損壞或編解碼器出現問題
MEDIA_ERR_SRC_NOT_SUPPORTED (4)?不支持該格式
用法（因此，最好使用事件，但稍后會更多）：
var?myvid?=?document.getElementById（'vid'）;?如果（myvid.error）{??開關（myvid.error.code）{?情況MEDIA_ERR_ABORTED：?alert（“您停止了視頻。”）;?打破;?情況MEDIA_ERR_NETWORK：?alert（“網絡錯誤-請稍后重試?！保??打破;?情況MEDIA_ERR_DECODE：?alert（“視頻壞了..”）;?打破;?情況MEDIA_ERR_SRC_NOT_SUPPORTED：?alert（“對不起，您的瀏覽器無法播放此視頻。”）;?打破;??}?}
這些狀態定義如下（首先是網絡，然后是就緒狀態）：
NETWORK_EMPTY (0)?尚未初始化
NETWORK_IDLE (1)?網絡目前未使用（例如，視頻已完全加載）
NETWORK_LOADING (2)?瀏覽器正在從網絡加載數據
NETWORK_LOADED (3)?數據已加載
NETWORK_NO_SOURCE (4)?找不到/加載視頻資源
網絡狀態的文檔在大多數站點上都不正確，因此最好參考上述狀態。
HAVE_NOTHING (0)?無可用數據
HAVE_METADATA (1)?持續時間和尺寸可用
HAVE_CURRENT_DATA (2)?當前位置的數據可用
HAVE_FUTURE_DATA (3)?可獲得當前和將來頭寸的數據，因此可以開始播放
HAVE_ENOUGH_DATA (4)?有足夠的數據播放整個視頻
為了控制視頻播放，我們還需要事件，這里提供了事件列表：
loadstart?瀏覽器開始加載數據
progress?瀏覽器加載數據
suspend?瀏覽器未加載數據，正在等待
abort?數據加載中止
error?發生錯誤
emptied?數據未意外出現
stalled?數據傳輸停止
play?視頻開始播放（使用play（）觸發）
pause?視頻已暫停（使用pause（）觸發）
loadedmetadata?載入元數據
loadeddata?數據加載
waiting?等待更多數據
playing?播放開始
canplay?可以播放視頻，但可能必須停止以緩沖內容
canplaythrough?足夠的數據來播放整個視頻
seeking?尋找是真實的（瀏覽器尋找位置）
seeked?尋找現在是錯誤的（找到位置）
timeupdate?currentTime已更改
ended?視頻已結束
ratechange?播放速率已更改
durationchange?持續時間已更改（對于流）
volumechange?音量已改變
轉載自
https://www.chipwreck.de/blog/2010/03/01/html-5-video-dom-attributes-and-events/
https://www.chipwreck.de/blog/2010/03/02/html-5-video-mootools/
視頻 媒體處理
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
