1 / 25

HTML5 and CSS3

Neal Stublen nstublen@jccc.edu. HTML5 and CSS3. Chapter 5 Audio and Video. Pre-HTML5 Solutions. Audio and video were embedded in pages using plug-ins Apple Quicktime Microsoft Silverlight Adobe Flash. Native Audio and Video.

menora
Download Presentation

HTML5 and CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

  2. Chapter 5Audio and Video

  3. Pre-HTML5 Solutions • Audio and video were embedded in pages using plug-ins • Apple Quicktime • Microsoft Silverlight • Adobe Flash

  4. Native Audio and Video • HTML5 provides audio and video elements for built-in media support • Not supported pre-IE9 • Audio • Roughly 85% support • Video • Roughly 85% support

  5. Video Container Format • Containers are specific file formats for transporting audio and video • Wraps a video track, audio track, and data to synchronize the tracks • Language information • Media metadata • Containers for HTML5 include MPEG-4, Ogg, WebM

  6. Audio and Video Codecs • Codecs define algorithms used to encode or decode a media stream • Coder/decoder • Video codecs relevant to HTML5 include H.264, Theora, and VP8 • Audio codecs relevant to HTML5 include AAC and Vorbis

  7. Browser Support • Audio and video streaming requires browser support for the container and codecs used for a specific media stream • Audio and video tags provide a standard way of incorporating media on a web page, but the browser/OS still need to support chosen data formats • http://caniuse.com details support

  8. Including Video • Basic tag use: <video src=“example.webm”></video> • Typical tag use: <video src=“example.webm” width=“800” height=“480” controls></video>

  9. Built-in Controls • The controls attribute specifies that the browser should display built-in controls for controlling playback • Controls are browser-specific • No standard appearance • Standard appearance would require use of additional markup and JavaScript

  10. The autoplay attribute • Media will not begin playing automatically • The autoplay attribute will start playback after the page has loaded <video src=“example.webm” autoplay></video>

  11. The loop attribute • Seeks back to the start of the media after reaching the end • Most likely use may be background sounds or music (perhaps in a game) <video src=“example.webm” loop></video>

  12. The preload attribute • preload=“auto” • Begins loading the media stream before the user presses the play button • Faster response • preload=“none” • Prevents loading the video before pressing play • Less bandwidth • preload=“metadata” • Loads media metadata (duration, dimensions) • Browsers determine the default value

  13. The poster attribute • Specifies an image that should appear as the “teaser” for a video element • poster=“teaser.png”

  14. The audio attribute • Allows the audio track to be muted by default • audio=“muted”

  15. Handling Supported Formats • Provide source elements instead of a src attribute <video controls> <source src=“example.mp4” type=“video/mp4” /> <source src=“example.webm” type=“video/webm” /> </video>

  16. Specifying Codecs <source src=“example.mp4” type=‘video/mp4; codecs=“avc1.42E01E, mp4a.40.2” /> <source src=“example.webm” type=‘video/webm; codecs=“vp8, vorbis” />

  17. source Order • Browsers will use the first compatible source element even if they support multiple available formats

  18. Fallback Support • Browsers that don’t support the audio and video tags will simply render the content within the tags • An object tag can be used to embed support for older methods, such as Flash • Modern browsers will ignore the additional content within the tag that’s not a source element • Fallback support could be a download link

  19. MIME Types • The type attribute specifies the MIME type for the media • Multipurpose Internet Mail Extensions • Your web server may need to be properly configured to serve specific MIME types correctly

  20. Video Encoding • If you have video that is not in a supported format, it will need to be encoded again • Miro Video Converter • You should be able to encode a single source into the multiple formats that cover most browsers

  21. Custom Controls • Audio and video tags can be accessed from JavaScript just like any other elements • Additional markup can be used to create your own controls

  22. Audio and Video Events • canplay – indicates playback can begin • error • loadeddata • loadedmetadata • playing – also indicates looping • seeking • seeked

  23. Audio and Video Attributes • playbackRate • src (from attribute) • currentSrc (from attribute or element) • readyState • duration • buffered • videoWidth/videoHeight (source sizes)

  24. Audio Differences • Invisible unless controls are specified • Allows possibility of using multiple audio elements for background sounds • MP3 and Ogg/Vorbis formats will cover all major browsers

  25. Text Tracks • Including track elements within a video element allows inclusion of subtitles, captions <track kind=“subtitle” src=“subtitles.en.vtt” srclang=“en” label=“English” />

More Related