HTML5 Video Player iBloc

The HTML5 Video Player iBloc is a highly customizable video player designed for mobile devices (e.g., iPhone, iPad and Android) and modern web browsers that support the HTML5 video tag (see below for a list of supported browsers).

Current Version: 1.0.1
Supported iRise Studio Versions: 8.9 – 8.12
Supported Browsers: IE 9.0+, Firefox 3.5+, Safari 4.0+, Chrome 8.0+, iOS Safari, Android (default browser)
Works in iRise iPhone and iPad apps: Yes

What does it do?

  • Plays externally hosted video files of any size, length or resolution (dimensions can be scaled to any size).
  • Supports any combination of MP4, Ogg, and WebM formats.
  • Supports viewing videos in full-screen mode on mobile devices and computer monitors.
  • Can display or hide native device or browser video controls.
  • Can optionally mute audio by default, loop video, and auto-start* on load.
  • Supports custom video and audio controls* using standard iRise widgets, including play, pause, mute/unmute, volume up/down, restart, skip back/forward, rewind, fast forward, and enter fullscreen mode.
  • Supports custom video seek and volume slider* controls.
  • Can display elapsed and remaining time in standard iRise text widgets.
  • Can display any ‘poster image’ by default before the video starts playing.
  • Fires custom events on play, on pause and on video ended, which can trigger standard iRise Actions and Action iBlocs.
* Auto-start and custom volume controls are not supported by iOS or Android mobile devices.

How do I use it?

  1. Drag the iBloc onto the page.
  2. To change the height or width of the video, resize by clicking and dragging (like any iRise page widget), or change the Height and Width in the properties panel. (Note that the video will be ‘letterboxed’ if the aspect ratio of the iRise widget does not match the video’s aspect ratio.)
  3. Enter one or more URLs of MP4, Ogg, or WebM video files. The URL must be a direct link to a video file (see Advanced tips & tricks below for some video hosting options).
  4. Any combination of video formats can be used, but at least one must be entered, or no video will be displayed. You should use the format(s) supported by your target device(s) and/or browser(s). (iOS devices, Safari, or IE 9+ : MP4; Firefox : Ogg or WebM; Android devices or Chrome : any format).
  5. Your video will play with standard browser/device controls by default. You can hide the standard controls, set other options, create custom buttons, sliders and more in the other sub-panels of the Properties panel.

Tips & Tricks

  • You can host your video file(s) on an iRise Definition Center server if you have access to one. Simply place your files in this directory (or create a subdirectory): “C:\iRise\DefCenter\Tomcat\webapps\ROOT\” (replace ‘C’ with the letter of the drive where iRise is installed). The URL of your video will be “http://[your def ctr domain name]/[subdirectory (optional)]/“.
  • There are some free (and many low-cost) services on the web that can host your video files. One that we have tested and works is File Den. Just make sure that the service you use supports direct linking to files (no download pages or dynamic query-based URLs will work). These services generally have storage and bandwidth limits, so be cognizant of your file sizes.
  • When you create video seek or volume sliders, the section that you use for the slider will become the slider bar, so adjust the height, width, and formatting of the section to get the appearance that you want. The slider handle and the area to the left (or below) the handle can be styled using the properties in the slider sub-panels of the Properties panel.

Feel free to download this and any of our free iBlocs here, and please tell us what you think.

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© Copyright 2013 - id8    Privacy Policy