HTML5 Video與jQuery操作

張貼者： 日期：
315060_2602811079346_1667869575_n

首先在html5裡，可以直接使用video來標註影片的tag。
<video src="video.mp4"></video>

可以設的屬性：
loop: 循環播放
autoplay: 網頁讀入後自動播放
controls: 顯示內建的播放器
width: 顯示video寬度
height: 顯示video高度
poster: 在影片載入完成前顯示的圖片

可是因為各家瀏覽器支援的影片格式不完全一樣，所以可以搭配source元素來讓各個瀏覽器支援的都可以使用。
<source src="video.mp4"></source>
<source src="video.ogg"></source>
可以設定一些屬性：
src: 指定媒體的url
type: 設定媒體檔案的MINE類型

接下來則是使用jQuery去控制影片。

首先先取得影片。
var video=$("#myvideo")[0];

可以使用的API：
src: 對應src屬性的值
currentSrc: 實際讀取/播放的媒體資料URL
currentTime: 顯示目前播放位置的秒數
startTime: 顯示可開始撥放位置的秒數
paused: 是否暫停中
defaultPlaybackRate: 預設的播放速度，預設值為1.0
playbackRate: 播放速度，預設值為1.0。如果是正值，則往後播放，如果是負值則會倒帶。
ended: 播放是否結束
muted: 是否設定為靜音
volume: 音量，由0.0~1.0
load(): 重新讀取影片(不執行播放)
play(): 播放影片
pause(): 暫停撥放影片

所以只要我們在網頁中設置兩顆按鈕，分別給他id="play"跟id="pause"，就可以簡單的控制影片的播放
view plaincopy to clipboardprint?
  1. $("#play").click(function(){   
  2.     video.play(); //播放影片   
  3. });   
  4. $("#pause").click(function(){   
  5.     video.pause(); //停止播放   
  6. });   

而如果想要自製一個播放器，可以搭配CSS來製作。

首先像這樣配置底下的軸跟顯示目前位置的圖像。
<div class="track_bar"><div class="now_position"></div></div>
然後用css讓顯示時間的圖像可以彈性的調整位置。

接下來去使用javascript的API就製作播放器了。
view plaincopy to clipboardprint?
  1. //設定定時重新讀取位置   
  2. var t = setInterval(function(){   
  3.     //以影片總長跟目前位置算出一個比例，顯示時間的圖像應該在的位置   
  4.     var now=(video["currentTime"]/video["duration"])*318;   
  5.     //讓css去改變位置   
  6.     $(".now_position").css("left",now);   
  7. },100);  
這樣就可以做出影片播放的時間軸了。

此外因為最近一個專案要用到，如果想要點了某個按鈕就跳到特定的位置，可以這樣使用。

首先讓元素裡面帶一個alt的參數，只要是數字就可以了，有其他文字的話可能會有問題。
view plaincopy to clipboardprint?
  1. $(".changeto").click(function(){   
  2.     $go_track=$(this).attr("alt");   
  3.     video.currentTime=$go_track;   
  4. });  

觀看實際的效果。
DEMO

此外我裡面的時間軸跟顯示位置的圖像都是用CSS3設定出來的，可以用這個CSS3 Gradient Generator去輕鬆設定你要的樣式(CSS3的漸層很麻煩，加上還不是所有瀏覽器都共通，有這個真的方便多了)。

參考：
開始HTML5 – Video

留言

張貼留言