Detailed description on the control of New H5 audio and video attributes (recommended), h5audio
This article describes the control of the new H5 attribute audio and video, as follows:
1. audio (audio)
<Audio controls = "controls"> <source src = "put the audio file path here"> </source> </audio>
2. video)
<Video controls = "controls" loop = "loop" autoplay = "autoplay" id = "video"> <source src = "put the video file path here"> </source> </video> <button> mute </button> <button> enable sound </button> <button> play </button> <button> stop playback </button> <button> full screen </button>
The following is the control of video files;
Javascript.
<Script> var myVideo = document. getElementById ("video"); var btn = document. getElementById ("button"); btn [0]. click = function () {myVideo. muted = true; (whether to mute: Yes)} btn [1]. click = function () {myVideo. muted = true; (whether to mute: No)} btn [2]. click = function () {myVideo. play (); (play)} btn [3]. click = function () {myVideo. pause (); (stop playing)} btn [4]. click = function () {myVideo. webkitrequestFullscreen (); (full screen)} </script>
3. How to set the progress bar and video playback duration
Synchronization.
:
First
(1) You need to obtain the total video duration (duration) and assign the maximum value to the progress bar, progress. max = video. duration;
(2) You need to obtain the current time position (currentTime) of the video to assign the length of the current progress bar, progress. value = video. currentTime;
At the same time of video playback, ensure that the progress bar value can get the video length and current playback time position in a timely manner.
You need to enable a timer setInterval (pro, 100); that is to say, you can obtain the video value once in 1 millisecond and assign it to the progress bar, so as to ensure timeliness.
In this way, the progress bar can be accurately synchronized with the video.
4. How to Use the range attribute of the form element to control the video volume.
1. First, you must obtain the value of range and assign it to the video volume to control the video volume,
<input type="range" min="0" value="50" max="100" id="range" />var ran=document.getElementById("range");
Get range. value,
Audio attribute assigned to video: video. volume = range. value/100;
In this case, you can easily drag the range to control the video volume.
Then you need to go to the front sound to close the judgment, and the two are independent events. Therefore, you need to determine whether the muted is mute in the drag event, and then set muted to false.
The final implementation code is as follows;
<! DOCTYPE html> <body> <video id = "video1" controls = "controls" width = "400px" height = "400px"> <source src = "img/1.mp4 "> </video> <div> <button onclick =" enableMute () "type =" button "> close sound </button> <button onclick =" disableMute () "type =" button "> enable sound </button> <button onclick =" playVid () "type =" button "> play a video </button> <button onclick =" pauseVid () "type =" button "> pause video </button> <button onclick =" showFull () "type =" button "> full screen </button> <br/> <span> progress bar: </span> <progress value = "0" max = "0" id = "pro"> </progress> <span> volume: </span> <input type = "range" min = "0" max = "100" value = "50" onchange = "setvalue () "id =" ran "/> </div> <script> var btn = document. getElementsByTagName ("button"); var myvideo = document. getElementById ("video1"); var pro = document. getElementById ("pro"); var ran = document. getElementById ("ran"); // disable the sound function enableMute () {myvideo. muted = true; btn [0]. disabled = true; btn [1]. disabled = false;} // enable the sound function disableMute () {myvideo. muted = false; btn [0]. disabled = false; btn [1]. disabled = true;} // play the video function playVid () {myvideo. play (); setInterval (pro1, 1000);} // pause the video function pauseVid () {myvideo. pause ();} // full screen function showFull () {myvideo. webkitrequestFullscreen ();} // progress bar displays function pro1 () {pro. max = myvideo. duration; pro. value = myvideo. currentTime;} // drag the range to adjust the volume. function setvalue () {myvideo. volume = ran. value/100; myvideo. muted = false ;}</script> </body>
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
