自定义基于HTML5的video播放器

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件你也可以自己灵活定义video的控制面板，充分利用CSS3的丰富效果。一点点难看，呵呵!其中页面代码比较简单，如下 body style =background-color:#8EEE5EE;

　　WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

　　你也可以自己灵活定义video的控制面板，充分利用CSS3的丰富效果。

　　一点点难看，呵呵!其中页面代码比较简单，如下

<body style="background-color:#8EEE5EE;">      <section id="skin">        <video id="myMovie" width="640" height="360">            <source src="videos/Introduction.mp4">        </video>        <nav>            <div id="buttons">                <button type="button" id="playButton">Play</button>            </div>            <div id="defaultBar">                <div id="progressBar"></div>            </div>            <div style="clear:both"></div>        </nav>     </section></body>

　　用css控制界面效果

body{    text-align:center;}header,section,footer,aside,nav,article,hgroup{    display:block;}#skin{    width:700px;    margin:10px auto;    padding:5px;    background:red;    border:4px solid black;    border-radius:20px;}nav{    margin:5px 0px;}#buttons{    float:left;    width:70px;    height:22px;}#defaultBar{    position:relative;    float:left;    width:600px;    height:14px;    padding:4px;    border:1px solid black;    background:yellow;}/*progressBar在defaultBar内部*/#progressBar{    position:absolute;    width:0px;    /*使用javascript控制变化*/    height:14px;   /*和defaultBar高度相同*/    background:blue;}

　　CSS定的control Panel如上图所示。

　　接下来就是最主要的javascript代码部分，由四个function构成：

　　这里用到了HTML5的video的新属性，如.duration,.paused,.ended

function doFisrt(){    barSize=600;   //注意不要使用px单位，且不要用var，是全局变量    myMovie=document.getElementById('myMovie');    playButton=document.getElementById('playButton');    bar=document.getElementById('defaultBar');    progressBar=document.getElementById('progressBar');        playButton.addEventListener('click',playOrPause,false);  //第三个参数总是false, Register the event handler for the bubbling phase.    bar.addEventListener('click',clickedBar,false);    }//控制movie播放和停止function playOrPause(){    if(!myMovie.paused && !myMovie.ended){        myMovie.pause();        playButton.innerHTML='Play';        window.clearInterval(updatedBar);    }else{        myMovie.play();        playButton.innerHTML='pause';        updatedBar=setInterval(update,500);    }}//控制进度条的动态显示function update(){    if(!myMovie.ended){        var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);        progressBar.style.width=size+'px';    }else{        progressBar.style.width='0px';        playButton.innerHTML='Play';        window.clearInterval(updatedBar);    }}//鼠标点击进度条控制方法function clickedBar(e){    if(!myMovie.paused && !myMovie.ended){        var mouseX=e.pageX-bar.offsetLeft;        var newtime=mouseX*myMovie.duration/barSize;  //new starting time        myMovie.currentTime=newtime;        progressBar.style.width=mouseX+'px';        window.clearInterval(updatedBar);    }}window.addEventListener('load',doFisrt,false);

　　本文来自Joanna Qian的博客，原文地址：http://www.cnblogs.com/JoannaQ/archive/2012/09/04/2669831.html

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。