ProblemYou want to add audio to a web page with HTML5.
Solution
Use the audio element to specify an audio file, as shown In picture
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Cookbook</title>
</head>
<body>
<h1>Audio Example</h1>
<audio src="html5audio.ogg" autoplay controls>
<a href="html5test.ogg">Download audio</a>
</audio>
</body>
</html>
Discussion
The audio element has five attributes associated with it: src, autobuffer, autoplay,
loop, and controls. If you don’t have the controls attribute, the audio player
disappears.
At the time of this writing, no one audio file type plays across all the browsers that
support the HTML5 audio element, as shown blow.
| Firefox 3.5 | Safari 4 | Chrome 3 beta | Opera 10 | ||
| Ogg Vorbis | Y | Y | |||
| MP3 | Y | Y | |||
| WAV | Y | Y | Y |
that cites both OGG and MP3 files. Then include Flash Player embed and object code
afterward:
<audio controls autobuffer>
<source src="html5audio.ogg" />
<source src="html5audio.mp3" />
<!-- include Adobe Flash player EMBED and OBJECT code here -->
</audio>
If you do insert audio, setting the file to autoplay is not recommended,
as it interferes with the experience for web surfers using screen readers.
Incorporating Video with HTML5
You want to add video to HTML5.
Use the HTML5 video element, as shown in picture below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Cookbook</title>
</head>
<body>
<h1>Video Example</h1>
<video src="html5video.ogg" width="320" height="240"
controls poster="html5video.jpg">
<a href="html5video.ogg">Download movie</a>
</video>
</body>
</html>
You do not have to specify the width and height of the video element. If you do not set
the video element with its respective attributes, the movie will play to the default values
of the video file itself.
A video file might have its own poster, which is a static image that represents the video
as a whole, similar to a thumbnail. However, you can override this poster by using the
poster attribute. The poster image can be any file type the browser supports (e.g., GIF,
JPEG, or PNG).
Although the controls attribute is optional, for the sake of usability I
suggest using it so as not to offend your site’s visitors.
You can place alternative text in between the video tags, including a link to download
the video file, for browsers that do not recognize the video element. This method allows
website visitors a method to view the content with third-party solutions other than
browsers.
At the time of this writing, Safari 3.1 and later, Firefox 3.5 and later, Opera 10 beta,
and Chrome 3 beta support the video element.
See Also
http://www.videolan.org/ for information on the export tools in the VLC software application,
which you can use to convert common video files to OGG format (supported
by Firefox and Opera)
0 comments:
Post a Comment