替 HTML5 Video 額外增加影片控制選項

HTML5 video 影片播放功能可以說是 HTML5 的一項重要功能,雖然說瀏覽器內建的 HTML5 video 播放器幾乎都有控制選項,但有的時候設計內容還是會需要額外的控制選項,來搭配整體的風格,基於瀏覽器 DOM 的 API 連接功能,我們可以很容易的製作額外的控制功能鍵,與 HTML5 video 播放器做橋接,進而達到控制影片播放的功能,例如開始播放、暫停影片或是調整影片顯示大小等。

HTML5 Video 基本語法

<video src="影片連結" controls></video>


語法中的影片連結與 controls 有多種技巧,詳細語法請參閱:HTML5 video 影片標籤

範例一、控制 HTML5 Video 影片大小
<script language="javascript">
function Control(x){
if(x=='start'){
 document.getElementById("MovieShow").play();
}else if(x=='stop'){
 document.getElementById("MovieShow").pause();
}}
</script>
<video id="MovieShow" width="360" height="270" >
<source src="video/test.ogg" type="video/ogg">
<source src="video/test.mp4" type="video/mp4">
您的瀏覽器不支援此 HTML5 影片標籤
</video>
<br><br>
<input type="button" value="開始播放" onclick="Control('start');">
<input type="button" value="暫停播放" onclick="Control('stop');">
以上範例輸出
範例中製做了開始播放以及暫停撥放影片的按鈕,當選擇其中一個按鈕,將會觸發 JavaScript 的事件,與 Video 產生溝通,透過 DOMdocument.getElementById 取得 id 為 MovieShow 的影片,並要求播放(play)或暫停(pause),預設的影片在網頁載入時並不會播放,所以暫停功能剛開始無法使用,選擇播放影片後,隨時都可以使用暫停功能,若接著再要求播放時,影片會接著剛剛暫停的時間點,繼續開始播放,而不是重新開始,當然,也可以透過 JavaScript if...else... 製作出整合暫停與播放的功能的單一鍵。

範例二、控制 HTML5 Video 暫停與播放
<script language="javascript">
function Size(x){
if(x=='big'){
 document.getElementById("MovieShow2").width=500;
 document.getElementById("MovieShow2").height=450;
}else if(x=='small'){
 document.getElementById("MovieShow2").width=260;
 document.getElementById("MovieShow2").height=234;
}}
</script>
<video id="MovieShow2" width="360" height="270" controls>
<source src="video/test.ogg" type="video/ogg">
<source src="video/movie.mp4" type="video/mp4">
您的瀏覽器不支援此 HTML5 影片標籤
</video>
<br><br>
<input type="button" value="播放器變大" onclick="Size('big');">
<input type="button" value="播放器變小" onclick="Size('small');">
以上範例輸出
控制播放器大小的方式與上一個範例類似,但要注意的是 HTML5 video 播放器大小需要同時設定寬度(width)與高度(height)才不容意出現瑕疵,他不像 HTML img 的特性在各瀏覽器中,只要給出寬度,通常就會自動縮放圖片大小,HTML5 video 的影片本身也許會等比例縮放,但整個播放範圍卻不是每個瀏覽器都會自動等比例縮放,所以設計師在製作調整大小功能的時候,應該要把寬度與高度的比例算出來,並寫入程式碼中,盡量避免網友在使用調整大小功能時,出現網頁版塊出現非預期推擠的情況。

延伸閱讀
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012