H5新属性音频音频和视频视频控制细节(推荐)

本文讨论了H5新音频音频和视频视频的控制,如下所示:

1。音频(音频)






2。视频(视频)




静音
打开声音

停止播放
全屏幕


下面是对视频文件的控制;

Javascript引起。


VaR MyVideo = document.getelementbyid(视频);
VaR建立document.getelementbyid(按钮);
- { 0 }。单击=函数(){
MyVideo。静音= true;(静音:是的)
}
- { 1 }。单击=函数(){
MyVideo。静音= true;(静音:无)
}
- { 2 }。单击=函数(){
MyVideo.play();(播放)
}
- { 3 }。单击=函数(){
MyVideo.pause();(停止)
}
- { 4 }。单击=函数(){
MyVideo.webkitrequestFullscreen();(全屏幕显示)
}



三.如何设置进度条和视频的播放长度

使同步.

如图所示。


让我们在这里说,首先

(1)对时间的总长度的最大值(时间),需要从视频的进度条,最大进步最大= video.duration获得;

(2),有必要获取当前时间的位置(时间)的当前视频播放的进度条,进度值= video.currenttime分配;

然后,在播放视频时,必须确保进度条的值可以获得视频的时间长度和当前播放时间的位置。

我们需要打开一个定时器setInterval(亲,100);也就是说,在1毫秒内,我们得到一个视频的价值分配的进度条,以便我们能及时。

这个进度条可以精确地与视频同步。

4。如何使用窗体元素范围属性来控制视频卷的音量。

1,首先,你需要得到范围的值值,并给出视频的音量来控制视频音量的大小。


Var ran=document.getElementById (range);


得到range.value,

分配给视频的音频属性:视频。卷=范围。值100;

这一次,您可以简单地拖动范围和控制视频的音量。

然后我们需要走在前面的声音关闭判断,两个单独的事件,因此,需要估计在拖动事件沉默静音,然后在静音设置为假。


最终实现代码如下所示。









把声音关掉
打开声音
播放视频
暂停视频
全屏幕
进度条:

体积:




VaR建立document.getelementsbytagname(按钮);
VaR MyVideo = document.getelementbyid(VIDEO1 );
VaR的亲= document.getelementbyid(亲);
VaR跑= document.getelementbyid(跑);

关闭语音
功能enablemute(){
MyVideo。静音=真;
- { 0 }。禁用=真;
- { 1 }。禁用= false;
}

打开声音
功能disablemute(){
MyVideo。静音= false;
- { 0 }。禁用= false;
- { 1 }。禁用=真;
}

视频回放
功能playvid(){
Myvideo.play();
setInterval(pro11000);
}
视频/暂停
功能pausevid(){
Myvideo.pause();
}
全屏
功能showfull(){
Myvideo.webkitrequestFullscreen();
}
进度条显示
功能的pro1(){
亲。马克斯= myvideo.duration;
价值= myvideo.currenttime亲;
}

调整音量范围
功能的setValue(){
MyVideo。量=跑。价值/ 100;
MyVideo。静音= false;
}









以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。