H5的audio音频和video视频运用详解--百分百源码网

H5的audio音频和video视频运用详解-

发布时间：08/01 来源：未知浏览：关键词：

这次给大家带来H5的audio音频和video视频运用详解，运用audio音频和video视频属性的注意事项是什么，下面就是实战案例，一起来看一下。这次给大家带来H5的audio音频和video视频运用详解，运用audio音频和video视频属性的注意事项是什么，下面就是实战案例，一起来看一下。

本文讲诉了H5新属性audio音频和video视频的控制，概括如下：

1.音频（audio）

2.视频（video）

下面是关于视频文件的控制；

javascript引出。

《script》
var myVideo=document.getElementById("video");
var btn=document.getElementById("button");
btn[0].click=function(){
    myVideo.muted=true;(可否静音：是)
}
btn[1].click=function(){
    myVideo.muted=true;(可否静音：否)
}
btn[2].click=function(){
    myVideo.play();(播放)
}
btn[3].click=function(){
    myVideo.pause();(休止播放)
} 
btn[4].click=function(){
    myVideo.webkitrequestFullscreen();(全屏显示)
}  
《script》

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。

终究实现的代码如下；

 
 
 








进度条:

音量:


《script》
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;
}
 《script》