设置进度条样式
<style>
#range_btn{
width: 550px;
}
</style>js代码段
<script>
window.onload= function () {
var video=document.getElementById("video");
var btnstart=document.getElementById("btn");
var now_time=document.getElementById("now_time");
var alltime=document.getElementById("alltime");
var range_btn=document.getElementById("range_btn");
var btnsound=document.getElementById("btnsound");
var sound=document.getElementById("sound");
var full=document.getElementById("full");
btnstart.onclick=function(){
if(this.innerHTML=="播放")
{
video.play();
this.innerHTML="暂停";
}
else{
video.pause();
this.innerHTML="播放";
}
};
//时间更新时 进度条变化
video.ontimeupdate= function () {
//this.currentTime 获取当前时间
var now=Math.floor(this.currentTime);
now_time.innerHTML=times(now);
};
//缓冲完毕 停止之后执行
video.oncanplay= function () {
//this.duration 获取当前对象的总时间
var all=Math.floor(this.duration);
alltime.innerHTML=times(all);
};
//时间显示形式的变化
function times(time){
var sec=time%60;
var min=parseInt(time/60%60);
var hour=parseInt(time/3600);
return (hour<=10?"0"+hour:hour)+":"+(min<=10?"0"+min:min)+":"+(sec<=10?"0"+sec:sec);
}
//进度条的鼠标事件
range_btn.onmousedown= function () {
range_btn.onmousemove= function () {
video.currentTime=this.value;
};
range_btn.onmouseup= function () {
range_btn.onmousemove=null;
}
};
sound.onclick= function () {
video.volume=this.value/100
};
btnsound.onclick= function () {
//muted 属性设置或者返回视频是否应该被静音 ture为静音状态 false为有声音一般默认为false
video.muted=!video.muted;
if(video.muted){
sound.value=0;
}
else{
sound.value=video.volume*100;
}
};
//全屏要考虑浏览器的兼容性
full.onclick=function (){
console.log(video.mozRequestFullScreen);
if(video.requestFullscreen)
{
video.requestFullscreen();
}
else if(video.mozRequestFullScreen)
{
video.mozRequestFullScreen();
}
else if(video.oRequestFullscreen)
{
video.oRequestFullscreen();
}
else if(video.msRequestFullscreen){
video.msRequestFullscreen();
}
else if(video.webkitRequestFullscreen)
{
video.webkitRequestFullscreen();
}
}
}
</script>主体代码段
<body>
<video src="./mp4/volcano.mp4" id="video"></video>
<br/>
<button id="btn">播放</button>
<span><span id="now_time">00:00:00</span>/<span id="alltime">00:00:00</span></span>
<input type="range" id="range_btn" value="0" max="100">
<button id="btnsound">静音</button>
<input type="range" id="sound" value="0" max="100">
<button id="full">全屏</button>
</body>
3182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
