html5 自定义播放器

来源：互联网发布：js手机重力感应编辑：程序博客网时间：2024/05/29 18:52

网页html

<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;}

javascript代码

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);

好东西啊，摘了代码部分

原文地址

http://www.cnblogs.com/JoannaQ/archive/2012/09/04/2669831.html

0 0