I am publishing a course to Tin Can API format with Articulate Storyline 2, which has several slides with small MP4 videos embedded. I would like the videos to play within slide and not go full-screen. It works fine when I launch the course from a PC, but when I run it off of an iOS devices like iPhone or iPad, all of the videos run full screen, even though their settings in Articulate are to show video in-slide. Any tips?
The videos expand to fill the screen when viewed in mobile Safari on iPhones and this is expected behavior. Mobile Safari automatically scales videos to fit the screens of smaller devices, such as iPhones. (See Apple's developer documentation for details.)
If you need to avoid this behavior, we recommend viewing courses with videos on larger screens, such as iPads, laptops, and desktop computers. Or, create a simplified version of the course that doesn't include videos for iPhone users. I haven't seen the videos show as such on an iPad - so we'd likely need to take a look at your .story file and how you've set it up and included the videos.
Thank you for the reply and the information. This does make sense. I did find a work-around: I played the slides in question on a PC and did a screen recording of the slide playing, keeping the embedded videos in proportion. I have added a .zip file of the presentation for your review and other suggestions. Slide 13 is an example of the several embedded videos, and slide 14 was my work-around.
Thanks for sharing this - it seems to be a copy of your published output which I'd need to see a copy of the .story file which is the file prior to publishing to see how you were setting this up and what occurs when I publish and take a look at it.
I'm not clear on the additional steps you mentioned in terms of using the screen recording to keep the video in proportion - did that change how it behaved on an iPad for you?
I have attached the .story format. For my work around I basically used another tool to record the screen as I previewed the slides with multiple embedded videos on a PC, which showed them in-slide. The screen capture then became an MP4 which I added as a full-screen video slide. When I published this to my LMS and viewed it from an iPhone, individual video clips did not go full-screen because they were now recorded as a single screen capture.
If you have any other thoughts on this, I am open to them. It would save me the extra steps. Thanks.
Thanks for sharing that .story file here. I took a look and uploaded it to SCORM Cloud and tested on my iPhone 6 - it still when full screen when it hit the first video slide, which as I mentioned is expected. There isn't a way to prevent that based on the video type you insert as videos will be encoded as described here in the published output.
Sorry, I sent you the old presentation. The new one does the same thing- as you said, it magnifies all videos to full screen. Here is the second version. It still magnifies to full screen, but on slide 12 for instance all videos are recorded playing at once as a screen capture, and then this is what I uploaded in place of that slide. So I did not really solve the root problem, just brute-forced as way around it.
So those three items on the slide were previously all separate videos? If so, using the screen capture to combine them into one video would be the best option as the HTML5 output can't play more than one media element at a time as detailed here.
I appreciate the confirmation. I am still pretty new to this and trying to produce my first set of e-learning courses for my company. It is always good to hear from the experts!
9 Replies
Hi Carlos,
The videos expand to fill the screen when viewed in mobile Safari on iPhones and this is expected behavior. Mobile Safari automatically scales videos to fit the screens of smaller devices, such as iPhones. (See Apple's developer documentation for details.)
If you need to avoid this behavior, we recommend viewing courses with videos on larger screens, such as iPads, laptops, and desktop computers. Or, create a simplified version of the course that doesn't include videos for iPhone users. I haven't seen the videos show as such on an iPad - so we'd likely need to take a look at your .story file and how you've set it up and included the videos.
Hello Ashley,
Thank you for the reply and the information. This does make sense. I did find a work-around: I played the slides in question on a PC and did a screen recording of the slide playing, keeping the embedded videos in proportion. I have added a .zip file of the presentation for your review and other suggestions. Slide 13 is an example of the several embedded videos, and slide 14 was my work-around.
Hi Carlos,
Thanks for sharing this - it seems to be a copy of your published output which I'd need to see a copy of the .story file which is the file prior to publishing to see how you were setting this up and what occurs when I publish and take a look at it.
I'm not clear on the additional steps you mentioned in terms of using the screen recording to keep the video in proportion - did that change how it behaved on an iPad for you?
Hello Ashley,
I have attached the .story format. For my work around I basically used another tool to record the screen as I previewed the slides with multiple embedded videos on a PC, which showed them in-slide. The screen capture then became an MP4 which I added as a full-screen video slide. When I published this to my LMS and viewed it from an iPhone, individual video clips did not go full-screen because they were now recorded as a single screen capture.
If you have any other thoughts on this, I am open to them. It would save me the extra steps. Thanks.
Hi Carlos,
Thanks for sharing that .story file here. I took a look and uploaded it to SCORM Cloud and tested on my iPhone 6 - it still when full screen when it hit the first video slide, which as I mentioned is expected. There isn't a way to prevent that based on the video type you insert as videos will be encoded as described here in the published output.
Hi Ashley,
Sorry, I sent you the old presentation. The new one does the same thing- as you said, it magnifies all videos to full screen. Here is the second version. It still magnifies to full screen, but on slide 12 for instance all videos are recorded playing at once as a screen capture, and then this is what I uploaded in place of that slide. So I did not really solve the root problem, just brute-forced as way around it.
Hi Carlos,
So those three items on the slide were previously all separate videos? If so, using the screen capture to combine them into one video would be the best option as the HTML5 output can't play more than one media element at a time as detailed here.
Thank you Ashley,
I appreciate the confirmation. I am still pretty new to this and trying to produce my first set of e-learning courses for my company. It is always good to hear from the experts!
No problem Carlos - we're here to help, and seeing the file in addition to what you described was the key. :)
This discussion is closed. You can start a new discussion or contact Articulate Support.