html5媒体播放例子代码

╰半橙微兮° 2022-07-14 01:48 184阅读 0赞

<!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>

效果：

![Center][]

[Center]: /images/20220714/586c035847d7459d80df9e1e245cedab.png