HTML5 Multimedia Support
•Download as PPTX, PDF•
0 likes•510 views
The World Wide Web Consortium (W3C) introduced the video element for the purpose of playing videos and movies. The intent was to offer a standard way to play video on the web without requiring plug-ins.
Recommended
More Related Content
What's hot
What's hot (12)
Viewers also liked
Similar to HTML5 Multimedia Support
Similar to HTML5 Multimedia Support (20)
More from Henry Osborne
More from Henry Osborne (20)
Recently uploaded
Recently uploaded (20)
HTML5 Multimedia Support
- 3. POPULAR FORMATS Ogg/Theora (.ogv) WebM/VP8 (.webm) MPEG-4/H.264 (.mp4)
- 4. IMPLEMENTINGTHE <VIDEO> ELEMENT <video width="320" height="240" controls="controls"> <source src="movie.mp4" /> You need a browser that supports HTML5! </video>
- 5. SETTINGTHE SOURCE <video controls="controls" height="480"> <source src="eagle.webm" type='video/webm; codecs="vorbis, vp8"' /> <source src="eagle.ogv" type='video/ogg; codecs="theora, vorbis"' /> <source src="eagle.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> </video>
- 6. CONFIGURINGTHE <VIDEO> ELEMENT autoplay controls height loop muted poster preload src width
- 7. ACCESSINGTRACKS TheW3C has developed a new standard, calledWebVTT (WebVideoTextTracks). WebVTT file format is simple and easily readable by browsers and developers. Based on a popular subtitling format called SubRipText (SRT).
- 8. USING WEBVTT FORMAT WEBVTT FILE 00:00:07.500 --> 00:00:08.750 He's fidgety. 00:00:09.000 --> 00:00:12.000 There he goes!!!
- 10. AUDIO FORMATS Ogg/Vorbis (.oga, .ogg) MP3 (.mp3) MP4 (.mp4, .mp4a, .aac) WAV (.wav)
- 11. THE <AUDIO> ELEMENT <audio controls="controls"> <source src="song.mp3" /> You need a browser that supports HTML5! </audio>
- 12. SETTINGTHE SOURCE <audio id="audio" controls="controls"> <source src="media/kittycat.oga" type='audio/ogg; codecs="vorbis"' /> <source src="media/kittycat.wav" type='audio/wav; codecs="1"' /> <source src="media/kittycat.mp3" type='audio/mpeg; codecs="mp3"' /> </audio>
- 13. CONFIGURINGTHE <AUDIO> ELEMENT autoplay controls loop preload src
Editor's Notes
- The World Wide Web Consortium (W3C) introduced the video element for the purpose of playing videos and movies. The intent was to offer a standard way to play video on the web without requiring plug-ins. This goal has been circumvented by lack of agreement about which video formats should be supported in web browsers. Currently, the W3C does not specify which video formats browsers should support. Browsers can decide which format they want to support, so the developer must provide formats that are available across most browsers.
- Ogg/Theora (.ogv extension) At one point, W3C specified the Ogg/Theora format, which appears to be a format that is royalty free without patent issues. Then the W3C removed the Ogg/Theora from the specifications because of the possibility of litigation. This format is supported by the Firefox, Chrome, and Opera browsers. WebM/VP8 (.webm extension) Google acquired the WebM/VP8 format when it bought On2 Technology. According to Google officials, WebM works well on even lower-power devices, including netbooks and handhelds. WebM will be available under a royalty-free Berkeley Software Distribution (BSD) open-source license. The WebM/VP8 video format is supported by the Firefox, Chrome, Opera, and Android browsers. In addition, Internet Explorer 9+ will support this format when the VP8 codec is installed. The current release of the VP8 codec is available here: https://tools.google.com/dlpage/webmmf/. MPEG-4/H.264 (.mp4 extension) This format is an evolution of previous formats that was intended to create a standard capable of providing good video quality at substantially lower bit rates than previous standards. The MPEG-4/H.264 format has patented technologies, but MPEG LA, which is a private organization in charge of administrating the patents, announced that the H.264-encoded Internet video that is free to end users will never be charged royalties. MPEG-4/H.264 is supported by the Internet Explorer, Chrome, and Safari browsers, but Chrome has announced its intent to remove support for MPEG-4/H.264 in the near future.
- The <source> element specifies a video source. At a minimum, you need to set the src attribute to the URL of the video. You should also include more than one <source> element to provide many sources so the browser can choose the most appropriate video codec. The type attribute includes both the MIME type and the codecs. Although the type attribute isn’t usually required, the browser can use it to help choose the proper video file to display.
- autoplay Specifies that video starts playing immediately. controls Specifies that the play/pause button, video cursor, and maximize be displayed. height Indicates the height in pixels of the rendered <video> element. loop Specifies that the video will repeat when it has reached the end of its stream. muted Specifies that the audio is silent. poster Specifies that the URL of an image is to be shown when the video is not playing. preload Specifies how the video should be loaded when the page loads. It can be set to auto, metadata, or none. The auto setting starts loading the video when the page loads. The metadata setting loads only the metadata, and the none setting doesn’t load anything. src Specifies the URL of the video. width Indicates the width in pixels of the rendered <video> element
- The W3C has developed a new standard, called WebVTT (Web Video Text Tracks), that provides the ability to display captions on the video; all browsers implementing the <track> element will support it. The WebVTT file format is simple and easily readable by browsers and developers. It’s based on a popular subtitling format called SubRip Text (SRT). If you already have your content in SRT format, converters are available on the web to convert to the WebVTT format.
- WebVTT format is very simple. The file starts with a declaration of the WebVTT file, a line is skipped, and a cue is defined. The cue is composed of a timespan on the first line, and the caption follows on the next line or lines. After that, a new line separator is provided, and the next cue is defined.
- The W3C introduced the <audio> element for the purpose of playing music and sounds. Like the introduction of the <video> element, the intent was to offer a standard way to play multi-media on the web without requiring plug-ins.
- Ogg/Vorbis (.oga, .ogg extension) This format appears to be royalty free without patent issues. It’s supported by the Firefox, Chrome, and Opera browsers and has a MIME type of audio/ogg and a codec of vorbis. MP3 (.mp3 extension) This format is pervasive because it’s a common format for much of the music media. It’s supported by the Safari, Chrome, and Internet Explorer browsers and has a MIME type of audio/mpeg and a codec of .mp3. MP4 (.mp4, .mp4a, .aac extension) This format is primarily used by Apple. In spite of this format’s high quality AAC or AAC+ codec, the MP3 format is still more prevalent. This format is supported on the Internet Explorer and Safari browsers and has a MIME type of audio/mp4; mp4a.40.5 is the codec value. WAV (.wav extension) This format is also pervasive and is usually used for audio fragments, or snippets, such as ring tones and sounds. It’s supported by the Firefox, Chrome, and Opera browsers and has a MIME type of audio/wav and a codec of 1 (the number one)
- autoplay Specifies that video starts playing immediately. controls Specifies that the play/pause button, video cursor, and maximize be displayed. loop Specifies that the video will repeat when it has reached the end of its stream. preload Specifies how the video should be loaded when the page loads. It can be set to auto, metadata, or none. The auto setting starts loading the video when the page loads. The metadata setting loads only the metadata, and the none setting doesn’t load anything. src Specifies the URL of the video.