具有回放、慢动作播放功能的视频播放器

作者:admin 日期:2017-04-08

HTML代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8"/>  
<title>具有回放功能的视频播放器</title>  
<style>
div#buttonDiv{
    width:800px;
    display:none;
}
progress#playPercent{
    width:800px;
}
div#progress{
    width:800px;
    height:20px;
    left:0px;
    background:#ccc;
}
div#progressValue{
    width:0%;
    height:20px;
    background:green;
    cursor:default;
}
div#showTime{
    z-index:2;
    display:none;
    position:absolute;
    font-size:10px;
}
</style>
</head>  
<body>  
<video id="video" src="http://www.soposd.com/uploads/10.mp4" width="800">
您的浏览器不支持video元素
</video>
<div id="buttonDiv">
<progress id="playPercent" max=100>
    <div id="progress">
        <div id="progressValue"></div>
    </div>
</progress>
<button id="btnPlay" onclick="PlayOrPause()" disabled/>播放</button>
<button id="btnSpeedUp" onclick="SpeedUp()" disabled/>加速</button>
<button id="btnSpeedDown" onclick="SpeedDown()" disabled/>减速</button>
<button id="btnSlowPlay" onclick="SlowPlay()" disabled/>慢放</button>
<button id="btnMute" onclick="setMute()" disabled/>静音</button>
<button id="btnVolumeUp" onclick="VolumeUp()" disabled/>增音</button>
<button id="btnVolumeDown" onclick="VolumeDown()" disabled/>降音</button>
<button id="btnPlayBack" onclick="PlayBack()" disabled/>回放</button> 
</div>
<div id="showTime">
</div>
</body> 
<script type="text/javascript"> 
var speed=1;
var volume=1;
var muted=false;
var direction=1; 
var video = document.getElementById("video");
var showTime=document.getElementById("showTime");
var functionId;
if(video.canPlayType)
{
    video.addEventListener('loadedmetadata',loadedmetadata,false);
    video.addEventListener('ended',videoEnded,false);
    video.addEventListener('play',videoPlay,false);
    video.addEventListener('pause',videoPause,false);
    video.addEventListener('timeupdate',updateProgress,false);
    video.addEventListener("error",catchError,false);  
    progress=document.getElementById("progress");
    progress.onmouseover=progress_mouseover;
    progress.onmouseout=progress_mouseout;
    progress.onclick=progress_click;
    playPercent=document.getElementById("playPercent");
    playPercent.onmouseover=progress_mouseover;
    playPercent.onmouseout=progress_mouseout;  
    playPercent.onclick=playPercent_click;
}
function catchError()
{
    var error = video.error;  
    switch(error.code)
    {  
        case 1:  
            alert("视频的下载过程被中止。");  
            break;  
        case 2:  
            alert("网络发生故障，视频的下载过程被中止。");  
            break;  
        case 3:  
            alert("解码失败。");  
            break;  
        case 4:  
            alert("媒体资源不可用或媒体格式不被支持。");  
            break;  
      }  
}

function loadedmetadata()
{    
    var btnPlay=document.getElementById("btnPlay");
    btnPlay.innerHTML="暂停";
    btnPlay.disabled=""; 
    video.play();  
    var buttonDiv=document.getElementById("buttonDiv");
    buttonDiv.style.display="block";   
}
function PlayOrPause()
{
    if(video.paused)
    {
       video.play();
       video.playbackRate=speed;
       video.muted=muted;
       video.volume=volume;       
    }
    else
        video.pause();

} 
function videoEnded(ev)
{
    video.currentTime=0;
    this.pause();
}
function videoPlay(ev)
{
    var btnPlay=document.getElementById("btnPlay");
    btnPlay.innerHTML="暂停";
    document.getElementById("btnSpeedUp").disabled="";
    document.getElementById("btnSpeedDown").disabled="";
    document.getElementById("btnSlowPlay").disabled="";
    document.getElementById("btnMute").disabled="";
    document.getElementById("btnVolumeUp").disabled="";
    document.getElementById("btnVolumeDown").disabled="";
    document.getElementById("btnPlayBack").disabled="";
    if(direction==-1)
        functionId=setInterval(playBack1,200);     
} 
function videoPause(ev)
{
    var btnPlay=document.getElementById("btnPlay");
    btnPlay.innerHTML="播放";
    document.getElementById("btnSpeedUp").disabled="disabled";
    document.getElementById("btnSpeedDown").disabled="disabled";
    document.getElementById("btnSlowPlay").disabled="disabled";
    document.getElementById("btnMute").disabled="disabled";
    document.getElementById("btnVolumeUp").disabled="disabled";
    document.getElementById("btnVolumeDown").disabled="disabled";
    document.getElementById("btnPlayBack").disabled="disabled";
    clearInterval(functionId);
}
function updateProgress() 
{
　　var value=Math.round((Math.floor(video.currentTime)/Math.floor(video.duration))*100,0);
    var progress = document.getElementById('playPercent');
    progress.value = value;
    var progressValue=document.getElementById("progressValue");
    progressValue.style.width = value+"%";    
    showTime.innerHTML=calcTime(Math.floor(video.currentTime))+'/'+calcTime(Math.floor(video.duration));
}
function calcTime(time)
{
    var hour;
    var minute;
    var second;
    hour=String(parseInt(time/3600,10));
    if (hour.length == 1)   hour   = '0' + hour;
    minute=String(parseInt((time%3600)/60,10));
    if (minute.length == 1)   minute   = '0' + minute;
    second=String(parseInt(time%60,10));
    if (second.length == 1)   second   = '0' + second;
    return hour+":"+minute+":"+second;
}
function progress_mouseover(ev)
{
    showTime.style.display="inline";
    showTime.style.left=ev.pageX+5+"px";
    showTime.style.top=ev.pageY+5+"px";
    showTime.innerHTML=calcTime(Math.floor(video.currentTime))+'/'+calcTime(Math.floor(video.duration));
    ev.stopPropagation();
}
function progress_mouseout(ev)
{
    showTime.style.display="none";
    showTime.innerHTML="";
}
function playPercent_click(evt)
{
    if(evt.offsetX)
    {
        playPercent=document.getElementById("playPercent");
        video.currentTime = video.duration * (evt.offsetX / playPercent.clientWidth);
    }
}
function progress_click(evt)
{
    progress=document.getElementById("progress");
    if(evt.offsetX)
        video.currentTime = video.duration * (evt.offsetX /progress.clientWidth);
    else
        video.currentTime = video.duration * (evt.clientX /progress.clientWidth);
}
function SpeedUp()
{    
    video.playbackRate+=1;
    speed=video.playbackRate;
}
function SpeedDown()
{
    video.playbackRate-=1;
    if(video.playbackRate<0)
        video.playbackRate=0;
    speed=video.playbackRate;
}
function SlowPlay()
{
    var btnSlowPlay=document.getElementById("btnSlowPlay");    
    if(btnSlowPlay.innerHTML=="慢动作")
    {
    video.playbackRate=0.5;
        btnSlowPlay.innerHTML="正常速度";
        document.getElementById("btnSpeedUp").disabled="disabled";
        document.getElementById("btnSpeedDown").disabled="disabled";
    }
    else
    {
    video.playbackRate=1;
        btnSlowPlay.innerHTML="慢动作";
        document.getElementById("btnSpeedUp").disabled="";
        document.getElementById("btnSpeedDown").disabled="";
    }
    speed=video.playbackRate;
}
function setMute()
{
    if(!video.muted)
    {
        video.muted=true;
        document.getElementById("btnMute").innerHTML="取消静音";
    }
    else
    {
        video.muted=false;
        document.getElementById("btnMute").innerHTML="静音";
    }
    muted=video.muted;
}
function VolumeUp()
{
    if(video.volume<1)
        video.volume+=0.1;
    volume=video.volume;
}
function VolumeDown()
{   
    if(video.volume>0)
         video.volume-=0.1;
    volume=video.volume;
}
function PlayBack(){
    var playBackBtn=document.getElementById("btnPlayBack");
    if(playBackBtn.innerHTML=="回放")
    {
        functionId=setInterval(playBack1,200);
        playBackBtn.innerHTML="取消回放";
        direction=-1;
    }
    else
    {
        clearInterval(functionId);
        playBackBtn.innerHTML="回放";
        direction=1;
    }
}
function playBack1()
{
    var playBackBtn=document.getElementById("btnPlayBack");
    if(video.currentTime==0)
    {
        playBackBtn.innerHTML="回放";
        clearInterval(functionId);
    }
    else
        video.currentTime-=1;
}
</script>  
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

分类:学无止境 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 12

js动态显示媒体文件播放时间

作者:admin 日期:2017-04-08

功能描述

为多媒体元素<video>添加一个“onTimeUpdate”事件，用于改变播放文件位置时调用。另外，增加一个ID号为“spnTimeTip”的<span>元素，用于动态显示媒体文件播放的当前时间与总量时间。

实现代码

在DreamweaverCS5中新建一个HTML页面dome.html，加入代码如代码清单dome所示。

代码清单dome 通过timeupdate事件动态显示媒体间文件播放时

源码分析

在本实例中，当多媒体元素触发timeupdate事件时，调用_个自定义函数v_timeupdate()t在该函数中，分别使用整除与求余数的方法，分割多媒体元素当前时间（currentTime)属性与时间总量(duration)属性返回的秒值，组成分与秒的格式。在组成过程中，又调用了另外一个自定义函数RuleTime()，该函数可以将长度不足2位的数字，在前面加“0”进行补充，实现过程如Javascript代码中加粗部分所示。

Tags: 动态显示动态显示媒体文件媒体文件播放时间播放时间