Before HTML5 came out, online audio and video were realized with the help of Flash or third-party tools. Now HTML5 also supports this function. In a browser that supports HTML5, audio and video can be played without installing any plug-ins. Native support for audio and video injects huge development potential into HTML5.
Audio embedding in HTML (traditional method): Although this method can be implemented, it requires the browser to support Flash and cannot be controlled, so it is very troublesome to implement.
<object height=200 width=200 data=2_1.swf ></object><embed src=2_1.mp4 type=>
So that means there is a big problem with HTML5, which is compatibility. Audio
Audio formats supported by HTML5: videoVideo format:
It can be seen from the above that HTML5 seems to support a few formats, so when you find that audio and video are not displayed when using HTML5, it should be a problem that the format is not supported. Note: MP4 has 3 encodings, mpg4(xdiv),,mpg4(xvid), avc(h264). Only h264 is the recognized MP4 standard encoding (I am also fooled here, other formats only have sound but no images.) If you encounter this kind of problem, just use a video format converter to convert the format and it will be OK.
Audio is very simple to implement: the toolbar here uses the browser's default toolbar.
<audio src=htmls/1.mp3 controls=controls loop=loop preload=auto >Your browser does not support the video element</audio>
Although the browser default can be used for videos, private customization is not possible, so from a technical perspective, you still need to learn how to make your own tools to implement functions (audio can also refer to this method).
audioVideo.html
<!DOCTYPE html><html><head><meta charset=UTF-8><title>Place video on web page</title><style type=text/css></style><script type=text/javascript src= js/ControlBar.js></script></head><body><audio src=htmls/1.mp3 controls=controls loop=loop preload=auto >Your browser does not support the video element</audio><video id=myPlayer width=600 height=400 src=htmls/2_1.mp4 controls=controls loop=loop poster=3.jpg>Your browser does not support audio Element <!-- MP4 has 3 encodings, mpg4(xdiv),,mpg4(xvid), avc(h264), Only h264 is the recognized MP4 standard encoding--></video><div id=progress></div><!-- Volume control--><input id=volume type=range min=0 max=1 step =0.1 onchange=Volume(this)><!-- Rate and time progress information--><span id=rate>1</span>fps <span id=info></span><button onclick=Play(this) id=btn1>Play</button><button onclick=Fast()>Fast forward</button><button onclick=Slow()>Slow forward</button><button onclick=Prev() >Back</button><button onclick=Next()>Forward</button><button onclick=Muted(this)>Mute</button></body></html>
Display (html) and function implementation (js) are separated and imported from outside.
ControlBar.js
//Use script to detect browser tag support var support = !!document.createElement(audio).canPlayType;if (!support) {alert(your browser does not support the playback of this video);}//Define global Video object var e1 = null;window.addEventListener(load, function() {e1 = document.getElementById(myPlayer);});/*Forward: one minute*/function Next() {e1.currentTime+=10; //Set the property currentTime, fast forward 10s}/*Rewind: one minute*/function Prev() {e1.currentTime-=10; //Set the property currentTime, go back 10s}/*Play/ Pause*/function Play(e) {if(e1.paused){e1.play();document.getElementById(btn1).innerHTML=pause}else{e1.pause();document.getElementById(btn1).innerHTML=play}}/*Slow forward: When it is less than or equal to 1, it only slows down by 0.2 each time; when it is greater than 1, it decreases by 1 each time */function Slow(){if(e1.playbackRate<=1){e1.playbackRate-=0.2;}else{e1.playbackRate-=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}/ *Slow forward: When it is less than or equal to 1, it only slows down by 0.2 each time; when it is greater than 1, it decreases by 1 each time */function Fast(){if(e1.playbackRate<1){e1.playbackRate+=0.2;}else{e1.playbackRate+=1;}document.getElementById(rate).innerHTML=fps2fps(e1.playbackRate);}function fps2fps(fps ){if(fps<1){return fps.toFixed(1);}else{return fps;}}/*Mute*/function Muted(e){if(e1.muted){e1.muted=false;e.innerHRML=X;document.getElementById(volume).value=e1.volume;}else{e1.muted=true;e.innerHRML= x;document.getElementById(volume).value=0;}}/*Adjust volume*/function Volume(e){if(e1.muted==true){e1.muted=false;}e1.volume=e.value;}/* Progress information: control the progress bar and display the progress time*/function Progress() {var p1=document.getElementById(progress);p1.style.width=(e1.currentTime/e1.duration)*720+px;document.getElementById(info).innerHTML=s2time(e1.currentTime)+/+s2time(e1 .duration);}function s2time(s){var m=parseFloat(s/60).toFixed(0);s=parseFloat(s%60).toFixed(0);return (m<10? 0+m:m)+:+(s<10?0+ s:s);}/* After the web page is loaded, add the progress processing function to the timeupdate event of the video object*/window.addEventListener(load,function(){e1.addEventListener(timeupdate,Progress);});/*Add progress to the window.onload event Processing function */window.addEventListener(load,Progress);Functions implemented: play, pause, fast forward, slow forward, forward, backward, volume control, progress bar and time display. It can be seen that more complex functions can be achieved through the properties and methods of Audio or Video.
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.