Html5 Video是現在html5最流行的功能之一,得到了大多數最新版本的瀏覽器支持.包括IE9,也是如此.不同的瀏覽器提供了不同的原生態瀏覽器視頻空間.我們制作自定義視頻控件為了在所有的瀏覽器中有一個相同的Html5視頻控件而不受默認視頻控件的控制.

實際上,自定義視頻控件并不困難.本文將告訴你如何用jQuery自定義視頻控件,希望對你有用!

DEMO DOWNLOAD

HTML5 Video 基礎標簽

1 video id=myVideo controls poster=video.jpg width=600 height=400

2 source src=video.mp4 type=video/mp4 /

3 source src=video.webm type=video/webM /

4 source src=video.ogv type=video/ogg /

5 pYour browser does not support the video tag./p

6 /video

video標簽最好包含mp4、webM和ogg這三種源視頻文件-可以跨瀏覽器。如果瀏覽器不支持html5，你可以使用flash作為后備！

開始制作 HTML5 Video Controls

幸運的是HTML5 Video 的Api可以用JavaScript訪問,并使用他們來作為控制視頻的媒介.

在編碼之前讓我簡單的介紹一下jQuery是如何獲取video標簽的.

在JavaScript中我們使用getElementById('videoID')來獲取Video標簽,作為結果,我們會獲取到一個Dom對象.但是這不是等價的jQuery對象.$(videoID)會返回一個jQuery對象.不是Dom對象.這就是為什么在將其轉換為Dom對象之前我們不能直接使用jQuery選擇器調用/使用Html5 Video的Dom屬性和功能.

1 //return a DOM object

2 var video = document.getElementById('videoID'); //or

3 var video = $('#videoID').get(0); //or

4 var video = $('#videoID')[0];

5

6 //return a jQuery object

7 var video = $('#videoID');

Video Play/Pause Controls 播放/暫停 按鈕

好的,這是所有的介紹.現在讓我們來編碼.首先,我們要創建一個簡單的播放/暫停按鈕.

1 div class=control

2 a href=# class=btnPlayPlay/Pause/a

3 /div

我們可以輕松的控制Html5 Video的播放與暫停狀態.

1 //Play/Pause control clicked

2 $('.btnPlay').on('click', function() {

3 if(video[0].paused) {

4 video[0].play();

5 }

6 else {

7 video[0].pause();

8 }

9 return false;

10 };

取消

評論

總結

以上是生活随笔為你收集整理的html 显示状态条,怎么控制html5 video 控制条显示和隐藏时间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。