替 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 產生溝通，透過 DOM 的 document.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