HTML5 Audio Elements

Source: Internet
Author: User

One, the audio file format
. Ogg/.mp3/.wav/.aac/.mp4/.opus, the last of a new audio file format, when the book is written only Firefox support.
For audio, two of the best formats are OGG and MP3.

second, add a single audio file with controls to the Web page
<audio src="My-audio.ext" AutoPlay controls muted loop preload></audio>
Note that the include AutoPlay property overrides the setting of the Preload property because only the audio file is loaded to play.

Iii. providing multiple audio sources with alternate content
In order to get support for all compatible HTML5 browsers, you need to provide at least two different formats for audio.
<audio controls>
<source src= "Piano.ogg" type= "Audio/ogg" >
<source src= "Piano.mp3" type= "Audio/mp3" >
<p>your Browser doesn ' t support HTML5 Audio, but can <a href= "Piano.mp3" >download the audio file</a> (MP3, 1.3 MB) .</p>
</audio>
The Type property can help the browser determine whether it can play a file. For audio files, the values are always audio/plus the format itself, including Audio/ogg, Audio/mp3, AUDIO/AAC, Audio/wav, and Audio/mp4.

third, add video and audio with backup Flash
   Reference:Use John Dyer's MediaElement.js (http://mediaelementjs.com) to demonstrate how to embed flash.
For MediaElement.js to run with native video and audio, you need to do some extra work. First, you need to get the mediaelement.js files and put them in the Web folder. Then put some of these files in the Web page. The steps are:

1. Get the MediaElement.js file and include the file in the site Directory
(1) Visit http://mediaelementjs.com. Click the Download Latest button to download the ZIP package.
Copy the Build folder (shown in 17.13.2), and then paste it into the Web site folder.

2. Add mediaelement.js to the Web page

3. To add alternate Flash for video
<!--The following code should be placed under all content--
<script>
$ (' video '). MediaElementPlayer ();
</script>

Or
<!--The following code is placed after all content--
<script>
$ (' audio '). MediaElementPlayer ();
</script>

If the page contains both video and audio, the script that you need to modify the page asks is as follows:
<script>
$ (' Audio,video '). MediaElementPlayer ();
</script>
</body>


Browsers such as Ps:internet Explorer 8 ignore the audio and source elements and use an alternate Flash player directly. Video or audio content can be played as long as the user has Flash installed.
Advanced Multimedia
Another benefit of using HTML5 native multimedia is that you can take advantage of a lot of new features and new features that come from HTML5 or HTML5 related. This section focuses on two of these: canvas elements and SVG.

"Reference Resources"

Other Flash playback solutions include
1, Video.js (www.videojs.com), JW Player (www.longtailvideo.com/jw-player/), FlowPlayer (http://flowplayer.org) and so on. JW Player and
The free version of FlowPlayer will display their identity on the media player.
2,? " Video on the Web "(http://diveinto.html5doctor.com/video.html)
3,? " WebVTT and Video Subtitles "(www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitles)
4,? " HTML5 canvas:the Basics "(http://dev.opera.com/articles/view/html-5-canvas-the-basics)
5, '? ' Learning SVG "(http://my.opera.com/tagawa/blog/learning-svg)

HTML5 Audio Elements

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.