Displaying video

In this article

Common questions

Related known issues

Kiosk Pro can support video displayed on its own or embedded into a page. Embedded video is recommended for best performance and flexibility.

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.

Supported video formats

Kiosk Pro can support the same video formats as the iPad:

  • .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.

Linked Video

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

If linking directly to video and choosing to  set an Idle Time Limit, it must be longer than the length of the video, otherwise the Idle Time Limit will trigger before the video is finished playing since no one will be interacting with the screen during video playback.

Embedded video

Embedding video into an .html page gives you more control over how the video is displayed. This allows you to define a number of things:

  • The size of the video
  • Page background color
  • Autoplay and loop options
  • Visibility of controls

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

<video width="320" height="240" controls autoplay>
	<source src="movie.mp4" type="video/mp4">
</video>

In this example, a width and height are defined, video controls will be displayed and the video will play automatically. More information about this code can be found in our  HTML 5 Video & Audio Attributes article.

If you have an  Idle Time Limit set, you can also delay the idle timer using calls included in our JavaScript API, allowing you to set a shorter idle timer for most pages while still preventing interruption of video content.

Autoplay video for Youtube & Vimeo

Apple's WebView browsers that Kiosk Pro is based on both disable autoplay by default. We've designed Kiosk Pro to re-enable this functionality.

While this functionality works for most projects, sometimes this can be overwritten when using an embedded video from Youtube or Vimeo that has autoplay turned on. In this case, you'll need to tell your content that it is being served from a desktop browser, which doesn't try to disable autoplay.

Using the  Site Version feature in our Plus or Enterprise versions, you can change the Custom User Agent String and make your content think Kiosk Pro is the desktop version of Google Chrome. Since user agent strings are typically long and complicated for typing in on an iPad, you can easily change this setting using remote settings .xml files on our site:

How to set a custom user agent string through Remote Setting Control

  1. In the Kiosk Pro settings menu, scroll down to the Remote Update category.
  2. Tap Remote Settings Control.
  3. Set Enable = On.
  4. Set XML File Location = http://www.kioskproapp.com/desktop.xml
  5. Run Kiosk Presentation.

This XML file will update the Custom User Agent String setting to the desktop Chrome string, then set your Remote Settings Control settings back to the default.

Allowing only specific videos

If your content has an embedded video from a website like Youtube or Vimeo, you most likely don't want visitors to have access to other videos on those websites. You can keep visitors restricted to that single video using the 'Apply Restrictions to Embedded Content' setting (if using a Youtube video, see 'Related Videos' below).

Steps
  1. Add the domains you want to be available to your Allowed Domains list in Kiosk Pro settings. Do not add the website your video is from.
  2. Disable 'Apply Restrictions to Embedded Content'.

Visitors will only be able to navigate through your Allowed Domains, and the Allowed Domains list will not block embedded content. The embedded video will be available, but links inside the embedded video will not be allowed.

Example

You can see an example of this in action by visiting this page in Kiosk Pro and following the steps above. The url you would add to the Allowed Domains list is 'http://www.kioskproapp.com/documents/apply-restrictions.html'.

Youtube will display "related videos" when a video is finished playing. 'Apply Restrictions to Embedded Content' is unable to block these links.

To disable "related videos" from showing, you can add ?rel=0 to the end of the video's URL. For example, if your URL is:

http://www.youtube.com/embed/ZSzeFFsKEt4

you would change it to:

http://www.youtube.com/embed/ZSzeFFsKEt4?rel=0

Creating a screensaver

People are naturally attracted to movement. A screensaver is a great way to attact visitors to your kiosk and provides an opportunity to communicate the purpose of your kiosk.

The simplest way to implement a screensaver is to use the Screensaver feature available in our Plus and Enterprise versions. This setting allows you to set up local video or image files to loop continuously as a screensaver without any programming required.

If you prefer to create your own screensaver to use as your Homepage in our Pro or Lite versions, you could create a screensaver web page using HTML & JavaScript. In this case, we'd recommend designing the page so that when the screen is touched, it redirects to your 'real' homepage. Then, if you have an Idle Time Limit set, the screen will return to your screensaver page after a visitor walks away and the screen is not interacted with.

Troubleshooting

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

Is the video file in the correct location?

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

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

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

If the video still does not play correctly (for example, showing a crossed out 'no-play' icon), we recommend running the file through  HandBrake to see if that takes care of it. HandBrake has a set of settings specific for iPad that can convert video to the preferred .mp4 or .mov formats with the correct codec and has resolved a number of user issues in the past.

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

Check to make sure you are running the latest version of the app and iOS; 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'll help troubleshoot your issue.

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