This article tells the control of H5 new attribute Audio audio and Video video. The specifics are as follows:
1. Audio (Audio)<UDIO Controls = Controls> <Source SRC = Put the audio file path in it> </source> </audio>2. Video (Video)
<video Controls = Controls loop = Loop Autoplay = Autoplay ID = VIDEO> <Source SRC = Put the video file path in it> </source> </video> <Button> </Button> On> Open the sound </ Button> <Button> Play </Button> <Button> Stop playing </Button> <Button> Full Screen </Button>
The following is the control of video files;
JavaScript leads.
<script> var myVideo = document.GetelementByid (video); var btn = document.GetelementByid (button); btn [0] .clICK = FUNCTION () {myvideo.muted = true; (Silent: Yes: Yes)} btn [1 ] .click = function () {myvideo.muted = true; (whether it is silent: no)} btn [2] .CLICK = FUNCTION () {myvideo.play (); () () {myvideo.pause (); (stop playing)} btn [4] .CLick = Function () {myvideo.webkitrequestfulScreen (); (full screen display)} </script> 3. How to set up the playback time of progress bar and videoSynchronous.
As shown in the figure:
Let me talk about it here, first of all
(1), the maximum value of the total length of the video to the video to the progress bar, the progress.max = video.Duration;
(2), need to get the length of the current position of the current video playback to the length of the current progress bar, the progress.value = video.currenttime;
Then while video playback, it is necessary to ensure that the value of the progress bar can get the duration of the video and the current playback time position in time.
You need to open a timer SetInterval (Pro, 100);:: It means that the value of the video is assigned to the Progress progress bar at 1 millisecond, so as to ensure the timelyness.
In this way, the progress bar can be accurately synchronized with the video.
4. How to control the volume of the video with the Range attribute of the table element.1. First of all, you need to get the value value of the Range, and the volume given to 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 Range.value,
Audio attributes assigned to Video: Video.volume = Range.value/100;
At this time, the volume of simply dragging Range and controlling the video.
Then you need to go in the sound to close the judgment. The two are independent events. Therefore, you need to determine whether it is mute Muted in the drag event, and then set it to FALSE in the Muted.
The final code is as follows;
<! Doctype html> <html> <body> <video ID = Video1 Controls = Controls Width = 400px Height = 400px> <Source SRC = IMG/1.MP4> </Video> <Button onclick = ENablemute () Type = Button> Close Sound </Button> <Button Onclick = Disablemute () Type = Button> Open the sound </Button> <Button Onclick = Playvid () Type = Button> Play video </Button> <button Onclick = Pauvid ( ) Type = Button> Passing Video </Button> <Button Onclick = Showfull () Type = Button> Full Screen </Button> <SPAN> Progress: </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); // Close the sound function enablemute () {myvideo.muted = true; btn [0] .disabled = true; btn [1] .disabled = false;} // Open the sound function disablemute () {myvideo.muted = false; btn [0] .disabled = Falsee ; BTN [1]. disabled = TRUE;} // Play the video function playvid () {myvideo.play (); SetInterval (pro1,1000); } // Full screen function showfull ( ) {myvideo.webkitrequestfulscreen ();} // Progressive strip display function E performing tuning amount funch setValue () {) {) Myvideo.volume = Ran.value/100; myvideo.muted = false;} </Script> </Body> </html>The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.