HTML5 Video與jQuery操作
首先在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"，就可以簡單的控制影片的播放
- $("#play").click(function(){
- video.play(); //播放影片
- });
- $("#pause").click(function(){
- video.pause(); //停止播放
- });
而如果想要自製一個播放器，可以搭配CSS來製作。
首先像這樣配置底下的軸跟顯示目前位置的圖像。
<div class="track_bar"><div class="now_position"></div></div>然後用css讓顯示時間的圖像可以彈性的調整位置。
接下來去使用javascript的API就製作播放器了。
- //設定定時重新讀取位置
- var t = setInterval(function(){
- //以影片總長跟目前位置算出一個比例，顯示時間的圖像應該在的位置
- var now=(video["currentTime"]/video["duration"])*318;
- //讓css去改變位置
- $(".now_position").css("left",now);
- },100);
此外因為最近一個專案要用到，如果想要點了某個按鈕就跳到特定的位置，可以這樣使用。
首先讓元素裡面帶一個alt的參數，只要是數字就可以了，有其他文字的話可能會有問題。
- $(".changeto").click(function(){
- $go_track=$(this).attr("alt");
- video.currentTime=$go_track;
- });
觀看實際的效果。
DEMO
此外我裡面的時間軸跟顯示位置的圖像都是用CSS3設定出來的，可以用這個CSS3 Gradient Generator去輕鬆設定你要的樣式(CSS3的漸層很麻煩，加上還不是所有瀏覽器都共通，有這個真的方便多了)。
參考：
開始HTML5 – Video
留言