18. HTML5 Video and Audio

Source: Internet
Author: User

Video Tags Overview:

The <video> element provides play, pause, and volume controls to control the video.

The <video> element also provides the width and Height properties to control the size of the video. If you set the height and width, the required video space is retained when the page loads. If you do not set these properties and the browser does not know the size of the video, the browser will not be able to load a specific space, the page will vary depending on the size of the original video.

The content inserted between <video> and </video> tags is presented to browsers that do not support video elements.

The <video> element supports multiple <source> elements. <source> elements can be linked to different video files.

The <video> element also supports subtitle element <track>.

Browser-supported video formats for video tags:
Browser MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

    • MP4 = MPEG 4 file with H + video encoding and AAC audio encoding
    • WebM = WebM file with VP8 video encoding and Vorbis audio encoding
    • OGG = Ogg file with Theora video encoding and Vorbis audio encoding

To add a video, you should add the video folder to the front-end directory and store the file in that directory:
format Mime-type
MP4 Video/mp4
WebM Video/webm
Ogg Video/ogg

<track> subtitle Effects:
Properties value Description
Default Default Specifies that the track is the default. If the user does not select any tracks, the default track is used.
Kind Captions
Chapters
Descriptions
Metadata
Subtitles
Specifies the text type of the text track.
Label Text Specifies the label and title of the text track.
Src Url Required. Specifies the URL of the track file.
Srclang Language_code Specifies the language of the track text data. This property is required if the kind property value is "subtitles".

Audio Overview:

The control property is used to add play, pause, and volume controls.

Between <audio> and </audio> you need to insert the hint text of the <audio> element that the browser does not support.

The <audio> element allows multiple <source> elements to be used. <source> elements can link different audio files, the browser will use the first supported audio file

MIME type for audio format:
Format Mime-type
MP3 Audio/mpeg
Ogg Audio/ogg
Wav Audio/wav

HTML5 <video>-Control using the DOM

HTML5 <video> and <audio> elements also have methods, properties, and events.

The methods, properties, and events of <video> and <audio> elements can be controlled using JavaScript.

The methods are used for playing, pausing, loading, and so on. The properties (such as length, volume, etc.) can be read or set. DOM events can inform you, for example, that the,<video> element starts playing, paused, stopped, and so on.

For more information, see the HTML5 audio/video DOM reference Manual

18. HTML5 Video and Audio

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.