Home > Article > Web Front-end > Detailed explanation of H5 new attributes audio and video control code examples

Detailed explanation of H5 new attributes audio and video control code examples

黄舟Original: 2017-05-19 16:53:251824browse

This article mainly introduces the control details (recommended) of H5's new attributes audioaudio and videovideo. It has certain reference value. If you are interested Students can learn about it.

This article talks about the control of audio and video, the new attributes of H5, as follows:

1. Audio (audio)

<audio controls="controls">
<source src="这里面放入音频文件路径"></source>
</audio>

2. Video

 <video controls="controls" loop="loop" autoplay="autoplay" id="video">
<source src="这里面放入视频文件路径"></source>
</video>
<button>静音</button>
 <button>打开声音</button>
 <button>播放</button>
 <button>停止播放</button>
 <button>全屏</button>

The following is the control of video files;

javascriptexport.

<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. How to set the progress bar and the video playback duration

to be synchronized.

As shown in the picture:

Detailed explanation of H5 new attributes audio and video control code examples

Let me talk about it here, first

(1), you need to get the total duration of the video (duration) Assign the maximum value to the progress bar, progress.max=video.duration;

(2), need to obtain the current time position of the current video playback (current Time ) is assigned to the length of the current progress bar, progress.value=video.currentTime;

Then while the video is playing, it is necessary to ensure that the value of the progress bar can obtain the length of the video and the current playback time position in time.

You need to open a timer setInterval(pro, 100);: that is to say, get the value of the video once every 1 millisecond and assign it to the progress progress bar, so as to ensure timeliness.

This way the progress bar can be accurately synchronized with the video.

4. How to use the form element range attribute to control the volume of the video.

1. First, you need to get the value of the range and assign it to the volume of the video to control the volume of the video.

<input type="range" min="0" value="50" max="100" id="range" />
var ran=document.getElementById("range");

Get the range.value,

Assign the audio attribute to the video: video.volume=range.value/100;

At this time, you can simply drag the range to control the volume of the video.

Then you also need to judge whether the previous sound is turned off. The two are independent events. Therefore, you need to judge whether it is muted in the drag event, and then set muted to false.

Detailed explanation of H5 new attributes audio and video control code examples

The final implemented code is as follows;

<!DOCTYPE html> 
<html> 
<body> 
<video id="video1" controls="controls" width="400px" height="400px">
<source src="img/1.mp4">
</video>
<p>
<button onclick="enableMute()" type="button">关闭声音</button>
<button onclick="disableMute()" type="button">打开声音</button>
<button onclick="playVid()" type="button">播放视频</button>
<button onclick="pauseVid()" type="button">暂停视频</button>
<button onclick="showFull()" type="button">全屏</button><br />
<span>进度条:</span>
<progress value="0" max="0" id="pro"></progress>
<span>音量:</span>
<input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>
</p>
<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>
</body> 
</html>

[Related recommendations]

1. Detailed explanation of the video tag test application of html5

2. Use the video element to create a video player in HTML 5

3. The problem of sharing a video tag that cannot play mp4 and its solution Solution

4. The solution to the problem that the H5 video tag can only play sound but not video

5. The MIME of IIS has not registered the MP4 type. Solution to the inability to recognize the vidoe tag

The above is the detailed content of Detailed explanation of H5 new attributes audio and video control code examples. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of sample code sharing for creating dynamic particle grid animation using HTML5 CanvasNext article：Detailed explanation of sample code sharing for creating dynamic particle grid animation using HTML5 Canvas

See more

Detailed explanation of H5 new attributes audio and video control code examples

Related articles