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:
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 (currentTime ) 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.
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
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!