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.

Autoplay

You can make video/audio play automatically on page load by adding the 'autoplay' attribute inside the <audio> or <video> tag itself:

Video
<video autoplay>
	<source src="movie.mp4" type="video/mp4">
</video>
Audio
<audio autoplay>
	<source src="song.mp3" type="audio/mpeg">
</audio>

Loop

To make your video/audio loop automatically, add the attribute ‘loop’ to the tag:

Video
<video loop>
	<source src="movie.mp4" type="video/mp4">
</video>
Audio
<audio loop>
	<source src="song.mp3" type="audio/mpeg">
</audio>

Controls

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
<video controls>
	<source src="movie.mp4" type="video/mp4">
</video>
Audio
<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
<video autoplay loop controls>
	<source src="movie.mp4" type="video/mp4">
</video>
Audio
<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'.

Example files

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:
  1. Unzip the files.
  2. 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).
  3. Find the section marked with <video> or <audio> tags.
  4. If your video is not an .mp4, delete type='video/mp4' and if your audio is not an .mp3, delete type="audio/mpeg".
  5. Change the src="" to contain the filename of your video/audio file within the quotation marks.
  6. Save the .html file.
  7. Transfer the .html and media files into the Kiosk Pro documents folder on the iPad using iTunes.
  8. Set the Homepage to the file name of the .html file.

Note: If you are using an Idle Time Limit in Kiosk Pro settings, be sure that it is set to a longer length than your media file so that the video/audio is not interrupted. Another option is to use our custom Javascript API to control the Idle Time Limit.

Still stuck? How can we help? How can we help?