Safari HTML5 Audio and Video Guide – Audio, Video, & Visual Effects

Audio and Video HTML

In its simplest form, the <audio> and <video> tags require only a src attribute to identify the media, although you generally want to set the controls attribute as well, so the user can play and pause the media. The browser allocates space, provides a default controller, loads the media, and plays it when the user clicks the play button. It’s all automatic. There are optional attributes as well, such as autoplay, loop, height, and width.

Device-Specific Considerations

There are a handful of device-specific considerations you should be aware of when embedding audio and video using HTML5.

Optimization for Small Screens
Currently, Safari optimizes video presentation for the smaller screen on iPhone or iPod touch by displaying audio or video using the full screen—video controls appear when the screen is touched, and the video is scaled to fit the screen in portrait or landscape mode. Neither video nor audio is presented within the webpage. The height and width attributes affect only the space allotted on the webpage, and the controls attribute is ignored. This is true only for Safari on devices with small screens. On Mac OS X, Windows, and iPad, Safari displays audio and video inline, embedded in the webpage.

User Control of Downloads Over Cellular Networks
In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad play event does not.

Download file here

Incoming Search Terms : android tablet html5 video autostart, ipad safari audio javascript