3.如何设置进度条和视频的播放时长同步进行。 这里说一下，首先 1、需要获取视频的总时长(duration)赋值给进度条的最大值，progress.max=video.duration; 2、需要获取当前视频播放的当前时间位置(currentTime)赋值给当前进度条的长度，progress.value=video.currentTime; 然后在视频播放的同时，要保证进度条的值能够及时获取到视频的时长和当前播放时间位置。 需要开一个定时器setInterval(pro，100);：就是说在1毫秒获取一次视频的数值赋值给progress进度条，这样就能保证及时性。 这样进度条就能和视频的准确的同步了。 4.如何用表单元素 range属性控制视频的音量大小。 1、首先需要获取到range的value值，赋给视频的音量上去，才能控制视频的音量大小， var ran=document.getElementById("range"); 获取range.value, 赋值给video的音频属性:video.volume=range.value/100; 这时候就能实现简单拖动range而控制视频的音量了。 然后还需要进去前面的声音关闭判断，两则是独立的事件，所以，需要在拖动事件中进行判断是否是静音muted，然后在进行muted设置为false。 具体代码请详看我的博客:
最终实现的代码如下；
关闭声音 打开声音 播放视频 暂停视频 全屏 进度条: 音量:
var btn=document.getElementsByTagName("button"); var myvideo=document.getElementById("video1"); var pro=document.getElementById("pro"); var ran=document.getElementById("ran");
//关闭声音 function enableMute(){ myvideo.muted=true; btn[0].disabled=true; btn[1].disabled=false; }
//打开声音 function disableMute(){ myvideo.muted=false; btn[0].disabled=false; btn[1].disabled=true; }
//播放视频 function playVid(){ myvideo.play(); setInterval(pro1,1000); } //暂停视频 function pauseVid(){ myvideo.pause(); } //全屏 function showFull(){ myvideo.webkitrequestFullscreen(); } //进度条展示 function pro1(){ pro.max=myvideo.duration; pro.value=myvideo.currentTime; }
//拖动range进行调音量大小 function setvalue(){ myvideo.volume=ran.value/100; myvideo.muted=false; }