Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use HTML5 to load audio and video in the front end. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

[1. Preface]

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

HTML5 and tags make it easy for us to add media to the site. We just need to set the src property to identify the media resource, including the controls property so that the user can play and pause the media.

[2. Embed video]

Here is the easiest way to embed a video file in a Web page:

Your browser does not support the element.

The current draft HTML5 specification does not specify which video format browsers should support in the video tag. But the most commonly used video format is:

Ogg: an Ogg file with Thedora video encoders and Vorbis audio encoders. Mpeg4: MPEG4 file with H.264 video encoder and AAC audio encoder.

We can use tags with media types and other attributes to specify media files. The video element allows multiple source elements, and the browser uses the first recognized format:

Your browser does not support the element.

[III. Video attribute specification]

The HTML5 video tag can use multiple attributes to control the look and feel as well as various control functions: (refer to Baidu)

[IV. Embedded audio]

The tags supported by HTML5 are used to embed voice content in HTML or XHTML documents as shown below.

Your browser does not support the element.

The current draft HTML specification does not specify which audio format browsers should support in the audio tag. But the most commonly used audio formats are ogg,mp3 and wav.

We can use tags with media types and other attributes to specify media. The Audio element allows multiple source elements, and the browser uses the first recognized format:

Your browser does not support the element.

Audio attribute specification

The HTML5 audio tag can use several properties to control the look, feel, and various control functions:

[v. JavaScript handles media events]

HTML5 audio and video tags can use multiple attributes to control various control functions using JavaScript:

The following is an example that allows a given video to be played:

Function PlayVideo () {var v = document.getElementsByTagName ("video") [0]; v.play ();} Your browser does not support the element.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.