Javascript

Buy me a beer or a book?

amazon PayPal - The safer, easier way to donate online!

HTML5 inline mobile video playback with cuepoints

After previously writing about how to use cuepoints in the Popcorn.js library I thought I would delve in deeper, there are lots of good use cases for cue points with HTML5 video such as making a video of a presentation have downloadable material appear at key points during the presentation, or perhaps showing annotations during an audio lecture.

What I planned to do was to go out and make different pieces of content appearing throughout a video using Popcorn.js but not just for desktop but for iPhone, newer Android devices, and iPad. Unfortunately althought there is an attribute for the video tag "webkit-playsinline" this only works in embedded web mode so cannot be used to override the default fullscreen view of iPhone.

What we can do however, is to get Android playing inline with a small tweak to the way the video is played and for iPhone display an alert on the user's first time playing the video informing them that they can pause at any time to return and view content relating to the current scene that they are on. You can see a screenshot below:
html5-inline-mobile-video-popcorn-cuepoints-javascript

 

You can view a demo of HTML5 inline mobile video playback with cuepoints here

Free Downloads