Home > Developer > Web Develop
1. Audio
<audio controls= "Controls" >
<source src= "Insert audio file path" ></source>
</audio>
2. Video
<video controls= "Controls" loop= "Loop" autoplay= "AutoPlay" id= "video" >
<source src= "This puts the video file path" ></source>
3. How to set the progress bar and video playback duration
Synchronized.
:
Here, first.
1, need to get the total length of the video (duration) assigned to the maximum value of the progress bar, progress.max=video.duration;
2, need to get the current video playback current time position (CurrentTime) assigned to the current progress bar length, progress.value=video.currenttime;
Then in the video playback, to ensure that the value of the progress bar in time to obtain the length of the video and the current playback time position.
Need to open a timer setinterval (pro,100): That is, in 1 milliseconds to get the value of the video is assigned to the progress progress bar, so as to ensure timeliness.
So the progress bar can be synchronized with the video accurately.
4. How to use the table cell Range property to control the volume size of the video.
1, first need to get the value of range, assigned to the volume of the video to control the volume of the video,
<input type= "range" min= "0" value= "max=" + id= "range"/>
var Ran=document.getelementbyid ("range");
Get Range.value,
Audio properties assigned to video: video.volume=range.value/100;
This allows you to simply drag the range and control the volume of the video.
Then also need to go in front of the sound off the judgment, two are independent events, so you need to determine in the drag event is silent muted, and then in the muted set to false.
Please read my blog for details:
1 <!DOCTYPE HTML> 2 <HTML> 3 <Body> 4 <VideoID= "Video1"Controls= "Controls"width= "400px"Height= "400px">5 <Sourcesrc= "Img/1.mp4">6 </Video>7 8 <Div>9 <Buttononclick= "Enablemute ()"type= "button">Turn off sound</Button>Ten <Buttononclick= "Disablemute ()"type= "button">Turn on sound</Button> One <Buttononclick= "Playvid ()"type= "button">Play Video</Button> A <Buttononclick= "Pausevid ()"type= "button">Pause Video</Button> - <Buttononclick= "Showfull ()"type= "button">Fullscreen</Button><BR/> - <span>Progress bar:</span> the <Progressvalue= "0"Max= "0"ID= "Pro"></Progress> - <span>Volume:</span> - <inputtype= "Range"min= "0"Max= "+"value= " the"onchange= "SetValue ()"ID= "Ran"/> - </Div> + - <Script> + varbtn=document.getElementsByTagName ("Button"); A varMyvideo=document.getElementById ("Video1"); at varPro=document.getElementById ("Pro"); - varran=document.getElementById ("ran"); - - //Turn off Sound - functionEnablemute () { - myvideo.muted=true; in btn[0].disabled=true; - btn[1].disabled=false; to } + - //Turn on sound the functionDisablemute () { * myvideo.muted=false; $ btn[0].disabled=false;Panax Notoginseng btn[1].disabled=true; - } the + //Play Video A functionPlayvid () { the Myvideo.play (); + setinterval (Pro1, +); - } $ //Pause Video $ functionPausevid () { - myvideo.pause (); - } the //Full Screen - functionShowfull () {Wuyi Myvideo.webkitrequestfullscreen (); the } - //Progress bar Display Wu functionPro1 () { - Pro.max=myvideo.duration; About Pro.value=Myvideo.currenttime; $ } - - - //drag range to adjust volume A functionSetValue () { + Myvideo.volume=Ran.value/; the myvideo.muted=false; - } $ the the the </Script> the - </Body> in </HTML>
HTML5 basic audio and video tutorial
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
