The basic method of embedding audio and video playback in web pages using HTML5

Time:2021-9-5

HTML5 features, including native audio and video support without flash.

HTML5 < audio > and < video > tags make it easy to add media to the site. We only need to set the SRC attribute to identify media resources, including the controls attribute, so that users can play and pause media.

Embedded video
The following is the simplest form of embedding video files in web pages:

XML/HTML CodeCopy contents to clipboard
  1. <video src=“foo.mp4”  width=“300” height=“200” controls>  
  2.     Your browser does not support the <video> element.      
  3. </video>  

The current HTML5 draft specification does not specify which video format browsers should support in the video tag. But the most common video formats are:

Ogg: Ogg file with thedora video encoder and Vorbis audio encoder.
Mpeg4: MPEG4 file with H.264 video encoder and aac audio encoder.
We can specify media files using the < source > tag with media type and other attributes. The video element allows multiple source elements, and the browser will use the first approved format:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.    <video  width=“300” height=“200” controls autoplay>  
  5.        <source src=“/html5/foo.ogg” type=“video/ogg” />  
  6.        <source src=“/html5/foo.mp4” type=“video/mp4” />  
  7.        Your browser does not support the <video> element.   
  8.    </video>  
  9. </body>  
  10. </html>  

Video attribute specification
The HTML5 video tag can use multiple attributes to control the look and feel and various control functions:

attribute describe
autoplay If this Boolean property is specified, the video will start to play automatically as long as the loading of data is not stopped.
autobuffer If this Boolean property is specified, the video will start buffering automatically even if automatic playback is not set.
controls If this attribute is specified, the user is allowed to control video playback, including volume control, fast forward, pause or resume playback.
height This property specifies the height of the video display area in CSS pixels.
loop If this Boolean property is specified, it means that automatic playback is allowed after playback.
preload If you specify this property, the video will be loaded and ready when the page is loaded. Ignore if autoplay is specified.
poster This is an image URL that is displayed to the user for playback or fast forward.
src The video URL to embed. Optionally, you can use the < source > element substitution in the video block to specify the video to embed.
width This property specifies the width of the video display area in CSS pixels.

Embedded audio
The < audio > tag supported by HTML5 is used to embed voice content in HTML or XHTML documents as shown below.

XML/HTML CodeCopy contents to clipboard
  1. <audio src=“foo.wav” controls autoplay>  
  2.     Your browser does not support the <audio> element.      
  3. </audio>  

The current draft HTML specification does not specify which audio format the browser should support in the audio tag. But the most common audio formats are Ogg, MP3 and wav.

We can use the < source > tag with media type and other attributes to specify media. The audio element allows multiple source elements, and the browser will use the first approved format:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <body>  
  4.    <audio controls autoplay>  
  5.        <source src=“/html5/audio.ogg” type=“audio/ogg” />  
  6.        <source src=“/html5/audio.wav” type=“audio/wav” />  
  7.        Your browser does not support the <audio> element.   
  8.    </audio>  
  9. </body>  
  10. </html>  

Audio attribute specification

HTML5 audio tag can use multiple attributes to control appearance, feeling and various control functions:

attribute describe
autoplay If this Boolean property is specified, the audio will automatically start playing as long as the loading of data is not stopped.
autobuffer If this Boolean property is specified, the audio will start buffering automatically even if automatic playback is not set.
controls If this attribute is specified, it means that the user is allowed to control audio playback, including volume control, fast forward and pause / resume playback.
loop If this Boolean property is specified, it means that automatic playback after audio playback is allowed.
preload This property specifies that the audio is loaded and ready when the page is loaded. Ignore if autoplay is specified.
src The audio URL to embed. Optionally, you can use the < source > element in the audio block to specify the audio to be embedded instead.

Handling media events
HTML5 audio and video tags can use multiple attributes to control various control functions with javascript:

event describe
abort This event is generated when playback is aborted.
canplay This event is generated when enough data is available and the media can be played.
ended This event is generated when playback is complete.
error This event is generated when an error occurs.
loadeddata This event is generated when the first frame of media is loaded.
loadstart This event is generated when media loading begins.
pause This event is generated when playback is paused.
play This event is generated when playback starts or resumes.
progress This event is generated when the media download progress is regularly notified.
ratechange This event is generated when the playback speed changes.
seeked This event is generated when the fast forward operation is completed.
seeking This event is generated when the fast forward operation begins.
suspend This event is generated when media loading is paused.
volumechange This event is generated when the audio volume changes.
waiting This event is generated when a requested operation (such as playback) is delayed and waiting for another operation to complete (such as fast forward).

The following is an example of allowing a given video to play:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE HTML>  
  2. <head>  
  3. <script type=“text/javascript”>  
  4. function PlayVideo(){   
  5.    var v = document.getElementsByTagName(“video”)[0];     
  6.    v.play();    
  7. }   
  8. </script>  
  9. </head>  
  10. <html>  
  11. <body>  
  12.    <form>  
  13.    <video  width=“300” height=“200” src=“/html5/foo.mp4”>  
  14.        Your browser does not support the <video> element.   
  15.    </video>  
  16.    <input type=“button” onclick=“PlayVideo();”  value=“Play”/>  
  17.    </form>  
  18. </body>  
  19. </html>  

Configure server media type
Most servers do not provide Ogg or MP4 media with the correct MIME type by default, so we may need to add appropriate configuration.

Copy code

The code is as follows:

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]