html5媒体播放例子代码-蒲公英云

html5媒体播放例子代码

<!DOCTYPE html>
<html>
<meta charset=gb2312" />
<div>
    <div>
        <video id="video" src="4_1.mp4" width="600">当前浏览器不支持video元素</video>
    </div>
    <div id="progressTime" style="display:none">
        <div style="float:left">
        <progress id="progress" max="100" style="width:450px">
        </progress>
        </div>
        <div id="showTime" style="float:left;margin-left:15px"></div>
        <div style="clear:both"></div>
    </div>
    </div>
    <div>
        <input type="button" id ="btnPlay" οnclick="playOrPause()" value="播放"/> 
        <input type="button" id="btnSpeedUp" οnclick="speedUp()" value="快放" /> 
        <input type="button" id="btnSpeedUpDown" οnclick="speedDown()" value="慢放" /> 
        <input type="button" id="btnVolumeUp" οnclick="volumeUp()" value="提高音量" /> 
        <input type="button"  id="btnVolumeDown" οnclick="volumeDown()" value="降低音量" /> 
    </div>
</div>
<script>
var speed=1; //播放速度
var volume=1; //播放音量
var video=document.getElementById("video");
var playBtn=document.getElementById("btnPlay");
var btnSpeedUp=document.getElementById("btnSpeedUp");
var btnSpeedUpDown=document.getElementById("btnSpeedUpDown");
var btnVolumeUp=document.getElementById("btnVolumeUp");
var btnVolumeDown=document.getElementById("btnVolumeDown");
var showTime=document.getElementById("showTime");
video.addEventListener('timeupdate',updateProgress,false); //为播放器添加时间改变监听事件
var progress=document.getElementById("progress");
progress.οnclick=progressOnClick; //为progress控件添加点击事件
//播放或暂停
function playOrPause()
{
    var progressTime=document.getElementById("progressTime");
    progressTime.style.display=""; //显示播放进度条和时间
    if(video.paused) //如果当前播放状态为暂停，点击后开始播放
    {
        playBtn.value="暂停";
        video.play();
        video.playbackRate=speed;
        video.volume=volume;
        //启用控制工具条其他按钮
        btnSpeedUp.disabled="";
        btnSpeedUpDown.disabled="";
        btnVolumeUp.disabled="";
        btnVolumeDown.disabled="";
    }
    else //如果当前播放状态为播放，点击后暂停播放
    {
        playBtn.value="播放";
        video.pause();
        //禁用控制条其他按钮
        btnSpeedUp.disabled="disabled";
        btnSpeedUpDown.disabled="disabled";
        btnVolumeUp.disabled="disabled";
        btnVolumeDown.disabled="disabled";
    }    
}
//提高播放速度
function speedUp()
{
    video.playbackRate+=1;
    speed=video.playbackRate;
}
//降低播放速度
function speedDown()
{
    video.playbackRate-=1;
    if(video.playbackRate<0)
    {
        video.playbackRate=0;    
    }
    speed=video.playbackRate;
}
//增大音量
function volumeUp()
{
    if(video.volume<1)
    {
        video.volume+=0.1;
        if(video.volume>0)
        {
            video.muted=false;
        }
    }
    volume=video.volume;
}
//降低音量
function volumeDown()
{
    if(video.volume>0)
    {
        video.volume-=0.1;
        if(video.volume==0)
        {
            video.muted=true;
        }
    }
    volume=video.volume;
}
//播放进度条点击事件，点击后从点击位置开始播放
function progressOnClick(event)
{
    var progress=document.getElementById("progress");
    if(event.offsetX) //获取鼠标当前点击位置与当前位置相比存在偏移量
    {
        video.currentTime=video.duration*(event.offsetX/progress.clientWidth); //设定播放器新的播放位置
    }
    else
    {
        video.currentTime=video.duration*(event.clientX/progress.clientWidth);
    }
}
//更新进度条状态
function updateProgress()
{
    var currentPercent=Math.round(Math.floor(video.currentTime)/Math.floor(video.duration)*100,0);//计算当前播放时长与视频总时长之比
    var progress=document.getElementById("progress");
    progress.value=currentPercent;
    showTime.innerHTML=calculateTime(Math.floor(video.currentTime))+"/"+calculateTime(Math.floor(video.duration));//显示播放时间
}
//将当前传入的时间转换为hh:MM:ss的格式
function calculateTime(time)
{
    var h;
    var m;
    var s;
    h=String(parseInt(time/3600,10));
    if(h.length==1)
    {
        h='0'+h;
    }
    m=String(parseInt((time%3600)/60,10));
    if(m.length==1)
    {
        m='0'+m;
    }
    s=String(parseInt(time%60),10)
    if(s.length==1)
    {
        s='0'+s;
    }
    return h+":"+m+":"+s;
}
</script>
</html>