Interactive HTML5 Video in Storyline
Feb 09, 2016
By
Jason Dumois
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
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
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!
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
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
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!
Thanks Justin! I have 360 can't wait to test!
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 is a screen shot of what happens when you use it in landscape. The items at the bottom hide the submit button and when you try to scroll down to see it, it keeps on prompting you to go full screen. I tested this in Rise and it works fine. So if you could just do the same in Storyline it would be great!
I got it to work by moving the submit button to the middle of the screen. You can see it here
Nice Job Nigel! It looks great on my iPhone!
Question - how do you keep the videos from appearing full screen on the iPhone? I have noticed that even YouTube videos appear full screen vs. inline on the HTML page. We want a menu to remain on the page at all times and the videos to load inline directly above it.
Nigel,
Could you upload your Story file? I'd love to learn how you programmed this!
Hi Jason, I did not do much. I got the Story file form this Articulate Tutorial page, opened and published in Storyline 360. Just had to move the submit button to the middle of the screen. Good luck !
Nice! Thanks Nigel!!!!
@Nigel - I republished the video quiz using SL360's latest update. The video appears to play correctly without the need to scroll (iPhone 6plus)
Can you take another look to see if the updated version is playing correctly for you?
Hi David, Yes I am using the latest version of storyline 360. Could it be that I am using an Iphone 5 and the screen is smaller. It works fine until I try to press the submit button then the bars at the top and bottom appear and prevent me from progressing. Works fine in portrait .
Let's try something different. I re-published the file with the player size set to scale based on browser size.
Can you try this example: http://articulate-heroes-authoring.s3.amazonaws.com/Examples/Storyline/SL2/VideoQuiz/scaled-version/story.html
Thanks, I found this useful.
@David Anderson. Still getting the bars when I try to press the submit button.
Hi Jason! I shared our example here on this link. feel free to comment and ask if you have any question.
https://community.articulate.com/discussions/building-better-courses/ewyse-interactive-video-example-mobile-compatible-micro-learning-branching-scenarios
Mario
Hi Mario, looks great but I could not get it to work on my Android device. - Just a black screen saying rotate phone and nothing happens when i rotate the phone.
NIgel
Thank you Nigel for feedback. Can you tell me what model of phone do you
have and what version of Android is installed?
Sorry just realized my phone was locked on potrait mode :) Works great now!
This is exactly what came up on my mind the moment I submitted the question about your phone model and Android version. In Storylone 360 Player we did not allow playing in portrait mode, only landscape mode is allowed.
This discussion is closed. You can start a new discussion or contact Articulate Support.