Presentation is loading. Please wait.

Presentation is loading. Please wait.

Neal Stublen Pre-HTML5 Solutions  Audio and video were embedded in pages using plug-ins Apple Quicktime Microsoft Silverlight Adobe.

Similar presentations


Presentation on theme: "Neal Stublen Pre-HTML5 Solutions  Audio and video were embedded in pages using plug-ins Apple Quicktime Microsoft Silverlight Adobe."— Presentation transcript:

1 Neal Stublen

2

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  details support

8 Including Video  Basic tag use:  Typical tag use:

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

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)

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

16 Specifying Codecs

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


Download ppt "Neal Stublen Pre-HTML5 Solutions  Audio and video were embedded in pages using plug-ins Apple Quicktime Microsoft Silverlight Adobe."

Similar presentations


Ads by Google