Tag Archives: jquery

Mobile Videos and Button Interaction

I recently worked on a project in which I was asked to bring mobile users to a webpage with a video, play the video, and then immediately display buttons/options the moment the video ends. A lot of this sound simple from a normal web perspective, but I forgot the implications of embedded video interactions from a mobile standpoint. Not to mention iOS standards as well.

To start, iOS ended its autoplay video capabilities due to “unsolicited downloads over cellular networks at the user’s expense” so we cannot simply force users to start watching our videos.

Darn ;)

So that’s fine; I’ll just skip the autoplay and move towards post-video buttons. Should be easy, right? Wellllll turns out it’s not so straight-forward. My first idea was to just use YouTube’s extensive video-editing capabilities. Hard to think I can make things work if YouTube can’t! Now, YouTube has a pretty thorough verification process (and rightfully so!). After a proper YouTube verification, you can start linking your YouTube videos to your external sites. But first, you need to add the “Associated Website” to your Google Webmaster account. Only then will that website show in the “External Annotations” portion of YouTube’s Channel Settings (under Video Manager or Settings). Hooray! Now you can add labels/speech bubbles/boxes to your YouTube videos as you wish and link them to your personal website. Everything is going as planned!

::screeeeech::

Found deep within YouTube’s support site: “Annotations do not appear on custom YouTube chromeless players, or on mobile, tablet and TV devices.”

Great. All of that and you won’t see the buttons on mobile devices. Hmmmm.

I tried Vimeo as well due to their settings that allow for you to select an action after a video ends. One of which happens to be a linking option, but once again it cannot work on mobile devices. This makes sense, too, as tapping videos most often causes a pause or play effect. A button would conflict with that listener and ruin the simply usability.

So what can you do? Oh I know. You can scrape the video and force a modal box! Thanks, HTML5 and jQuery!

Good guy HTML5 has the lovely <video> tag, which pairs nicely with jQuery for many callback options! I was barking up so many coding trees when all I needed was the following:

$("video").bind("ended", function() { //callback when video ends
$('#vid_container').remove(); //remove the div containing the <video> tag to rip the native video player down from view
$('#myModal').modal('show'); //show modal (I used Bootstrap here)
});

Tada! Now a user initiates the video, the video ends, and immediately a modal box full of options appears. You don’t have to wait for your users to hit “Done” at the end of the video to view the options. Plus, it works on all major mobile browsers (I found friends with Droid phones; we all know Apple is more fussy here). Now, “what if they don’t watch the whole video?” you ask? That’s fine. The content will only be removed after the “ended” callback is called so they will still see the video landing page if they don’t follow the rules. I can always code some more listeners for such behavior. “Uh oh, what if they want to watch it again or they ignore the modal box options?” Great question! I decided to rig the modal box to reload the video page upon being ‘hidden’ so that the video will be back in place. Be sure to check the callback options in your chosen modal library to see if you can tell when a user has closed or hidden the modal box. I realize users can sometimes click outside the modal box or accidentally close it so it’s good to have a backup plan just in case!

So again, my initial project goals seemed easy from a desktop browser perspective, but it’s important to know the rules of mobile web. You may jump through some hoops or see some dead ends, but there are more than enough resources to come up with some creative work-arounds :)

Happy coding!

Back to Stack Dog