一個基於html5的video視頻播放器

html5的video標籤使得加載視頻方便了許多，上午無事，作了一個小demo，包含了一些很基本的功能。播放，進度這些。主要是瞭解一下相關api。

html:

                <!-- 視頻 1  -->
                <div class="vsb-container" containerID="1" columns="1">
                    <div class="vsb-space sec_side_10 mb15 fluid clear" columns="1">
                        <div class="sec_23">
                            <div class="sec_23_video mb15">
                                <!-- <img src="images/videobg_03.jpg"/> -->
                                <video width='100%' height="100%" preload="auto" poster="images/videobg_03.jpg">
                                    <source src="video/12143.mp4" type="video/mp4">
                                </video>
                            </div>
                            <div class="sec_23_progress psr ml25 mb10">
                                <img class="progress" src="images/ico/sec_side_10_1_03.jpg"/>
                                <img class="progress_btn" style="left: 0;" src="images/ico/sec_side_10_07.jpg"/>                                
                            </div>
                            <div class="sec_23_control">
                                <img class="img1" src="images/ico/sec_side_10_11.jpg"/>
                                <img class="img2" src="images/ico/sec_side_10_17.jpg"/>
                                <img class="img3" src="images/ico/sec_side_10_14.jpg"/>
                                <img class="img4" src="images/ico/sec_side_10_20.jpg"/>
                                <img class="img5" src="images/ico/sec_side_10_22.jpg"/>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 視頻 1  end -->
<style>
.sec_23_video{width: 180px;height: 108px;overflow: hidden;}
.sec_23_progress{width: 131px;height: 8px;}
.sec_23_progress .progress_btn{position: absolute;top: 0;}
.sec_23_control img{float: left;cursor: pointer;}
.sec_23_control .img1{margin: 0 18px 0 23px;}
.sec_23_control .img2{margin-right: 16px;margin-top: 7px;}
.sec_23_control .img3{margin-right: 15px;margin-top: 2px;cursor: default;}
.sec_23_control .img4{margin-right: 10px;margin-top: 8px;}
.sec_23_control .img5{margin-top: 7px;}
</style>
<script>

var oSec=$('.sec_23');//大的區塊
var video=oSec.find('video')[0];//視頻文件
var oBtn=oSec.find('.sec_23_control img');//controls按鈕
var oProgress=oSec.find('.progress');//進度條
var oProgressBtn=oSec.find('.progress_btn');//進度條的塊
videodemo(video,oBtn.eq(0)[0],oBtn.eq(1)[0],oBtn.eq(3)[0],oProgress[0],oProgressBtn[0]);
//參數依次爲:視頻文件,播放按鈕，中止按鈕，快退按鈕，進度條背景，進度條按鈕
function videodemo(video,btnplay,btnrestart,btnrewind,progress,btnprogress){ var iNowTime=0;//當前視頻播放的事件，從0秒開始播放 var iScale=(progress.offsetWidth-btnprogress.offsetWidth)/video.duration//進度條長度與視頻長度的比例 btnplay.onclick=function(){ if(video.paused){ video.play(); }else{ video.pause(); } } btnrestart.onclick=function(){ video.currentTime=0; video.pause(); } btnrewind.onclick=function(){ iNowTime=video.currentTime-10; video.currentTime=iNowTime; } bind(video,'timeupdate',function(){ btnprogress.style.left=Math.floor(video.currentTime*iScale)+'px'; }); drag(btnprogress,{ l:0, r:progress.offsetWidth-btnprogress.offsetWidth, t:0, b:0 },function(site){ btnprogress.style.left=site.left+'px'; iNowTime=parseInt(btnprogress.style.left); video.currentTime=iNowTime; }); } function bind(obj, ev, fn) { if (obj.addEventListener) { obj.addEventListener(ev, fn, false); } else { obj.attachEvent('on' + ev, function() { fn.call(obj); }); } }

</script>

//ps：本函數用到的一些參數以下：
//video對象相關屬性：
//currentTime 屬性設置或返回音頻/視頻播放的當前位置（以秒計），當設置該屬性時，播放會跳躍到指定的位置。
//duration 屬性返回當前音頻/視頻的長度，以秒計。
//video對象相關方法：
//play() 播放
//pause() 暫停
// video對象的事件(video對象的事件衆多，這裏只用到了一個，根據js權威指南 21.2.4節,這些事件只能夠addEventListener()方法註冊處理函數，未測試ie下是否有效);
// timeupdate 視頻播放過程當中，每秒觸發4~60次，這裏用來刷新播放事件更改進度條

好像不能上傳附件。圖片就不上傳了。css樣式改一下便可