Home > Developer > Web Develop
HTML5 's audio and video
L Label
? Audio, video
? Source
L Video Container
? Container file, similar to compressing a set of files
– Audio Tracks
– Video Tracks
– Meta Data: Cover, title, subtitles, etc.
– Format:. avi,. flv,. mp4,. mkv,. OGV, etc.
L Codec
? The original video container is very large, the encoding needs to be encoded, the playback needs decoding
? Audio Codec
–AAC, MPEG-3, Ogg Vorbis
? Video Codec
–h.264, VP8, Ogg Theora
codecs : Each browser may use a different codec, open source, there are charges.
Codecs are compressed when they are loaded into the page, and then decoded and amplified when you click Play.
<body>
<audio controlssrc= "Johann_sebastian_bach_air.mp3" ></audio>
<!--<video controlssrc= "INTERMISSION-WALK-IN.OGV" ></video>-->// this way IE does not support the use of the following method
<video controls>
<sourcesrc= "INTERMISSION-WALK-IN.OGV" ></source>
<sourcesrc= "Intermission-walk-in_512kb.mp4" ></source>//ie perform this article
</video>
</body>
Attention:
You must add controls to display
There is no codec for OGV format video in IE
Source if not supported, go to the next bar
L Media Elements
? CONTROLS: Show or hide user control interface
? AutoPlay: Does the media play automatically
? Loop: Whether the media is looped back
? CurrentTime: The time it takes to start to play
? Duration: Total media time (read only)
? Volume relative value of volume:0.0-1.0
? Muted: whether mute
? Autobuffer: When starting the buffer load, AutoPlay, ignore this property
? currenttime: The time it takes to start to play now
Can be read, can also be set
You can set the playback time to start when you first enter
Window.onload =function () {
var OA = document.getElementById (' A1 ');
SetInterval (function () {
Console.log (Oa.currenttime);
},1000);
Oa.currenttime = 60; // Play from - Start
};
</script>
<body>
<audioid= "A1" controlssrc= "Johann_sebastian_bach_air.mp3" ></audio>
</body>
? Duration: Total Media Time ( Read Only )
? volume:0.0-1.0 the volume relative value
The volume is muted from 0 to 1 of the value 0
? Muted: is muted
Flase means not mute
Window.onload =function () {
var OA = document.getElementById (' A1 ');
Console.log (oa.duration);
Console.log (Oa.volume);
Console.log (oa.muted);
};
</script>
<body>
<audioid= "A1" Controls src= "Johann_sebastian_bach_air.mp3" ></audio>
</body>
Total time played
? Autobuffer: whether the buffer loads at the beginning, AutoPlay , this property is ignored when
Once the page is loaded, it is loaded and does not need to be loaded at the start of the player point
L Media Element _2
? Paused: Whether the media is paused (read only)
? Ended: Media playback complete (read only)
? Error: When the media error occurs, return the fault code (read only)
? CURRENTSRC: Returns the media address as a string (read-only)
? Play (): Media playback
? Pause (): Media paused
? Load (): Reload Media
? paused: whether the media is paused ( Read Only )
? ended: whether the media is finished playing ( Read Only )
? Error: the error code is returned when the media error occurs ( Read Only )
? CURRENTSRC: returns the media address as a string ( Read Only )
Window.onload =function () {
var OA = document.getElementById (' A1 ');
Console.log (oa.paused);
Console.log (oa.ended);
Console.log (Oa.error);
Console.log (OA.CURRENTSRC);
};
</script>
<body>
<audioid= "A1" controlssrc= "Johann_sebastian_bach_air.mp3" ></audio>
</body>
? Play (): Media playback
? pause (): Media Pause
? load (): Reload Media
Mouse move in, play, move out, pause playback
You must reload the address with load after you change it
Window.onload = function () {
Varov = document.getElementById (' v1 ');
Varoinput = document.getElementById (' input1 ');
VaraS = document.getElementsByTagName (' source ');
ov.onmouseover= function () {
This.play ();
};
ov.onmouseout= function () {
This.pause ();
};
oinput.onclick= function () {
as[0].src= ' Xxxx.mp4 ';
as[1].src= ' Yyyy.mp4 ';
Ov.load ();
};
};
</script>
<body>
<input type= "button" value= "Reload" id= "input1"/>
<video id= "V1" >
<sourcesrc= "INTERMISSION-WALK-IN.OGV" ></source>
<sourcesrc= "Intermission-walk-in_512kb.mp4" ></source>
</video>
</body>
L Media Element _3--Media element event
? Loadstart Progress suspendemptied stalled play pause Loadedmetadata Loadeddata waiting playing Canplaycanplaythrough seek ing seeked timeupdate ended Ratechange Durationchangevolumechange
Ended after playback is done, popup 123
Window.onload = function () {
Varov = document.getElementById (' v1 ');
Ov.addeventlistener (' Ended ', function () {
alert (123);
},false);
};
</script>
<body>
<video controls Id= "V1" >
<sourcesrc= "INTERMISSION-WALK-IN.OGV" ></source>
<sourcesrc= "Intermission-walk-in_512kb.mp4" ></source>
</video>
</body>
L Video Extra features
? Poster: Preview picture before video playback
? width, Height: Set the size of the video
? Videowidth, Videoheight: Actual size of the video (read only)
Actual size, even if modified, can find the original element size
Window.onload = function () {
Varov = document.getElementById (' v1 ');
Ov.poster= ' 2.png ';
Ov.width= 500;
Ov.height= 500;
alert (ov.videowidth);
Ov.addeventlistener (' Ended ', function () {
alert (123);
},false);
};
</script>
<body>
<video controls Id= "V1" >
<sourcesrc= "INTERMISSION-WALK-IN.OGV" ></source>
<sourcesrc= "Intermission-walk-in_512kb.mp4" ></source>
</video>
</body>
HTML5 's audio and video
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
