<!DOCTYPE html> <html> <head> <title>HTML5 </title> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <script src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // 在這里寫你的代碼... //alert("哈哈"); //var video = $('#videoPlay')[0];//這樣返回的是DOM對象 var video = $('#videoPlay').get(0); //這樣返回的是DOM對象 var videoJquery = $('#videoPlay'); //這樣返回的是Jquery的對象 $(".btnPlay").on("click", function() { //播放暫停按鈕的點擊事件 //alert( $(this).text() ); //alert( video.paused ); if (video.paused) { video.play(); //播放 } else { video.pause(); //暫停 } return false; }); //獲得視頻的時間總長度 videoJquery.on('loadedmetadata', function() { //alert("a"); $('.duration').text(video.duration); }); // 更新當前HTML5視頻播放時間 videoJquery.on('timeupdate', function() { $('.current').text(Math.round(video.currentTime) + "秒"); //Math.round()四舍五入取整 var currentPos = video.currentTime; //播放時間 var maxduration = video.duration; //視頻總時間 var percentage = (100 * currentPos / maxduration).toFixed(2); //得到百分比.toFixed()小數點 $('.timeBar').css('width', percentage + '%'); $('.percentage').text(percentage); }); //進度條拖動 var timeDrag = false; /* 初始默認的拖動狀態為false*/ $('.progressBar').mousedown(function(e) { //alert(e.pageX); timeDrag = true; updatebar(e.pageX); }); //鼠標移動方法 $(document).mousemove(function(e) { if (timeDrag) { updatebar(e.pageX); } }); //放開鼠標 $(document).mouseup(function(e) { if (timeDrag) { timeDrag = false; //停止拖動，設置timeDrag為false updatebar(e.pageX); } }); //更新進度條 var updatebar = function(x) { var progress = $('.progressBar'); var maxduration = video.duration; var position = x / progress.width(); var percentage = 100 * position //檢查拖動進度條的范圍是否合法 if (percentage > 100) { percentage = 100; } if (percentage < 0) { percentage = 0; } $('.timeBar').css('width', percentage + '%'); video.currentTime = maxduration * percentage / 100; }; }); </script> <style> .progressBar { position: relative; width: 100%; height: 10px; background-color: #000; } .timeBar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #ccc; } </style> </head> <body> <video src="535b565203633.mp4" width="320" height="240" controls="controls" autoplay="autoplay"> <!-- 中間寫上文字，當不支持時，就會顯示了 --> 你的瀏覽器不支持video標簽，升級吧騷年！ </video> <br/> <br/> <video width="320" height="240" controls="controls"> <!-- video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式 --> <source src="535b565203633.avi" type="video/avi"> <source src="video2.mp4" type="video/mp4"> 你的瀏覽器不支持video標簽，升級吧騷年！ </video> poster="/images/video2.gif" poster屬性預覽圖圖片 <br/> <div style="width:640px;"> <video id='videoPlay' width='640' height='360' onplay='alert("開始播放")' onpause='alert("暫停播放")' > <source src="video2.mp4" type="video/mp4"> </video> <div class="control"> <a href="#" class="btnPlay">播放/暫停</a> </div> <div class="progressTime"> 播放時間: <span class="current"></span> 視頻總時間: <span class="duration"></span> 百分比: <span class="percentage"></span> </div> <div class="progressBar"> <div class="timeBar">11</div> </div> </div> </body> </html>
實現簡單的播放暫停，進度拖拽功能。
支持的方法屬性和事件
| 方法 | 屬性 | 事件 |
|---|---|---|
| play() | currentSrc | play |
| pause() | currentTime | pause |
| load() | videoWidth | progress |
| canPlayType | videoHeight | error |
| duration | timeupdate | |
| ended | ended | |
| error | abort | |
| paused | empty | |
| muted | emptied | |
| seeking | waiting | |
| volume | loadedmetadata | |
| height | ||
| width |