Working with audio & video files

In this article

Supported formats

Video
  • .mp4
  • .m4v
  • .mov, encoded with H264

If your video files are in a different format, there are free video converters online that you can use. We recommend HandBrake - but there are several good options out there.  

While videos can be hosted online, we highly recommend storing video files locally on the device when possible to prevent performance issues caused by problems with device connectivity or bandwidth.

Audio
  • .mp3
  • .wav
  • .aac
  • .ac3
  • m4a

Linking directly to an audio or video file

If you link directly to an audio or video file, the app will automatically play the file full-screen with controls showing. To allow a visitor to navigate, you can turn on the Navigation Bar so that visitors are able to access the rest of your content when they are finished with the content. 

If linking directly and choosing to set an Idle Time Limit, you must either:

  • enable the app's Pause Idle Time Limit While Media is Playing setting (available in Kiosk Pro Basic, Plus or Enterprise on iOS/iPadOS 15 or later) 
  • OR the Idle Time Limit must be longer than the length of the audio clip or video, 

otherwise the Idle Time Limit will trigger before the file finishes playing since no one will likely be interacting with the screen during playback.

Embedding audio or video into a page

Embedding audio or video into an HTML page gives you more control over how the content is displayed.

If you have an  Idle Time Limit set, you can prevent interruption of an embedded video by the Idle Timer by: 

To embed audio or video into a page, we recommend using the corresponding HTML 5 tag:

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

For a more detailed overview of the HTML5 video player, you can look at Mark Pilgrim's 'Dive Into HTML5'.

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>

Applying 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 with 'autoplay' 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>

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.

Preventing default full-screen video on iPhone & iPod Touch

The iPhone and iPod Touch handle video differently than an iPad, automatically defaulting to playing all video full-screen within the native iOS video player. This can be problematic for a kiosk application as it can be disorienting to a kiosk visitor.

Specific coding can be added in order for your video to play inline within your page, eliminating these issues. To play video inline on an iPhone or iPod Touch in Kiosk Pro, you'll need to include the tag 'webkit-playsinline' in the video player like this:

<video src="video.mp4" webkit-playsinline></video>

Troubleshooting

If you're experiencing problems playing an audio or video file, there are several things you can check:

Is the file in the correct location? Has the file been corrupted?

The fastest way to check these is to use Kiosk Pro's Homepage setting as a temporary testing location. You can check this by setting the Homepage to the file's URL or file path to see if it plays as expected.

If the file plays correctly when set as the Homepage, but not as part of your regular content or screensaver, check the file path to make sure that the file is being referenced correctly.

Is the file in a format and codec compatible with iOS?

If a video file still does not play correctly, we recommend running the file through HandBrake to see if that takes care of it. HandBrake has a set of settings specific for Apple that can convert video to the preferred .mp4 format. While the screensaver does work with .mov files, these must be encoded using the H264 codec and so we've seen a number of issues relating to this video format in the past. 

Are you running the latest versions of the app and iOS/iPadOS?

Check to make sure you are running the latest version of the app and iOS/iPadOS; if not, please update to see if that takes care of the problem.

If you continue to have issues after trying these things, let us know and we can help troubleshoot your issue.

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