Play Video & Audio with HTML 5
While iOS automatically disables autoplay of media, Kiosk Pro is able to support autoplay so that your HTML5 media player for audio or video files play when the page loads.
You can make video/audio play automatically on page load by adding the 'autoplay' attribute inside the <audio> or <video> tag itself:
<video autoplay> <source src="movie.mp4" type="video/mp4"> </video>
<audio autoplay> <source src="song.mp3" type="audio/mpeg"> </audio>
To make your video/audio loop automatically, add the attribute ‘loop’ to the tag:
<video loop> <source src="movie.mp4" type="video/mp4"> </video>
<audio loop> <source src="song.mp3" type="audio/mpeg"> </audio>
To display controls to allow visitors to play and pause video or audio, or enter fullscreen video, add the attribute 'controls' to the tag:
<video controls> <source src="movie.mp4" type="video/mp4"> </video>
<audio controls> <source src="song.mp3" type="audio/mpeg"> </audio>
Apply multiple attributes
To apply more than one attribute, just add them inside the tag separated by spaces. In our testing, attribute order appears to be important for correct execution. 'autoplay' is first, then 'loop', and finally 'controls'.
<video autoplay loop controls> <source src="movie.mp4" type="video/mp4"> </video>
<audio autoplay loop controls> <source src="song.mp3" type="audio/mpeg"> </audio>
For an overview of the HTML5 video player, you can look at Mark Pilgrim's 'Dive Into HTML5'.
Sample files demonstrating these attributes in both audio and video are available as a zipped file. You can also preview them in your browser:
After downloading these files, they can be unzipped and examined in a text editor as a code example or transferred to the iPad to be viewed locally for demonstration purposes.
Steps for substituting the video/audio for your own:
- Unzip the files.
- Open the .html file in either a coding software (i.e. Adobe Dreamweaver) or a plain text editor (i.e. Notepad on Windows. You cannot use Word or other word processing software as it can add extra markup to the text making it unusable).
- Find the section marked with <video> or <audio> tags.
- If your video is not an .mp4, delete
type='video/mp4'and if your audio is not an .mp3, delete
- Change the
src=""to contain the filename of your video/audio file within the quotation marks.
- Save the .html file.
- Transfer the .html and media files into the Kiosk Pro documents folder on the iPad using iTunes.
- Set the Homepage to the file name of the .html file.