Interactive HTML5 Video in Storyline

Feb 09, 2016

Hey everyone!

Has anyone ever created interactive video in Storyline that plays well on a mobile device? If you have examples, please share!

We are trying to push Storyline to the limits and want our learners to be able to interact with the video. However, when you view a video on a mobile device, like an iPhone, it loads the video full-screen vs. inline. Not sure how interactive video would work on an iPhone.

Any creative ideas? If someone has done this, let us know! :-)

Jason

23 Replies
Bastien Médard

Hello,

We are facing the exact same challenge. The interactive piece only works on iPad, not on iPhone (Safari automatically scales the video to full screen, which overlays the interactivity in the background). From what I have read, tested and discussed, Storyline does not offer a solution for now. 

You might want to explore another solution, e.g. Captivate, until Storyline releases the announced web-based version. Interactive video + mobile is a growing request so I would be surprised it weren't part of the next release.

That's the conclusion I have come to after exploring this issue.

Someone else has found a better way?

Bastien

Nicole Legault

Hi Jason!

Thanks for posting your question here in the forums. 

Just wanted to let you know that I've also run into the issue of my videos popping up full-screen instead of inline on the iPhone in e-learning examples I've created so I feel your pain, and I have been there myself!

That being said... it's not something that is controlled by Articulate Storyline, it's actually an iOS thing and in fact it is specifically stated in Apple's documentation that videos will play full screen on iPhones.

Also just want to point out that the same thing happens with a course developed with Captivate 9. The video will still pop-up fullscreen instead of inline on the iPhone.

:) Best of luck with your project!

 

Jason Dumois

Exactly. I definitely am aware, however, there must be a way to tweak the JavaScript or HTML5 files that Storyline exports. Another company called RaptMedia was able to get around the standard iOS issue, so hoping with the tweak of the published files, that we could do the same!

Can you check with your developers and see if they have some code, etc. to get this to work?!

Thanks!

Jason

N R

Hi All,  Did any of you find a solution to this problem?  I understand that when IOS10 was released there was an option to stop videos playing fully screen. 

Apple developer site:

"When the webkit-playsinline property is specified, Safari on iPhone allows videos to play inline. Videos without the property will commence playback in fullscreen, but users can pinch close on the video to continue playing the video inline."

Does anyone know how to specify the webkit-playsinline property in the Storyline published files ?

I read online that this code my solve the problem but not sure where to put it. 

<video src="file.mp4" playsinline>

Regards

Nigel 

 

Justin Grenier

Hi, Nigel!

We added the inline video playback feature to Storyline 360 in our January 26th release.  Just publish your course and it’ll automatically work!

If you're using Storyline 2 or earlier, here's an article on how you can take advantage of this new iOS functionality to make YouTube videos play inline.

Good luck with your project!

N R

Hi Justin,  I took this demo from the Articulate Tutorial page,  opened it in Storyline 360 and published only to HTML5.  Tested it on the Iphone. It worked fine as long as it is viewed in portrait view.  The moment you turn to landscape it converts to full screen and buttons stop working.  Here is the published file if you want to try:

 http://www.bhivelearning.com/Interactive%20Video%20Quiz%20-%20Storyline%20output/story_html5.html  

Any fix you could suggest would be appreciated. 

Nigel 

This discussion is closed. You can start a new discussion or contact Articulate Support.