Video Cropped on iPad HTML5 AND Android Flash

Hi Group

I've just hit a problem and am interested if anyone else has seen it.

At one point in a Storyline course I play an MP4 video (about 2 mins and 17mb) in a lightbox.

Someone on an iPad complained when viewing the course on HTML5 (published as SCORM) that not all of the video was showing. The video was cropped, only showing the right-most half of the video. I republished to Tin Can so that they could use the Articulate Player (I didn't like the HTML5 output anyway) and the video showed beautifully.

I thought that was the end of the problem, but I just tried viewing on my (older) Galaxy tablet using Flash and I see the same thing (as per this image - see how the video only occupies half of the progress bar and the words are cropped. BAD!)

Note that this happens (on my Android tablet and I assume the iPad with HTML5) when the content is published to an LMS on server A, and as standard web content on server B. It even happens when published to Articulate's TempShare so it's unlikely to be a server-side issue. 

Has anyone seen this before? Any ideas why this would happen under iPad HTML5 AND Flash on Android?

Thanks for any clues - or easy work-around.

PeteB

8 Replies
Ashley Terwilliger

Hi Pete,

From that image, I'm not following what you mean about only occupies half the progress bar? You mentioned this occurred on the iPad as well, so we'd want to take a look at that version and test it out. Since we don't officially support Android, I can't offer any information there but hopefully if we're able to see what's happening in the iPad version it would help with your Android view as well. 

Peter Brown

Hi Ashley

I've updated the image in the original post which perhaps shows the cropping effect better: Normally the video's width is the same as the width of the progress bar/scrubber. The video in the image is only half the width of the progress bar.

As a further test I converted the MP4 to a FLV and the same thing happens. So as well as ruling out a server-side header issue, I don't think it's related to the media itself, either.

STOP PRESS: I made a test and put it on TempShare at: http://s3.amazonaws.com/tempshare-stage.storyline.articulate.com/stp18k38qkkjft1t9k175112tvnrc4/story.html

The test story plays the same video:

  • Once on a standard display screen, and
  • Once on the same screen that's been lightboxed.

The video plays great on the standard display screen, but the PROBLEM APPEARS when THAT SAME SCREEN is LIGHTBOXED.

Note that if I force the HTML5 version of the course on my DESKTOP there is some ugly cropping on the lightboxed page there too.

I think we have our culprit. Looks like there's a bug when playing a video in a lightbox in HTML5 (and on Flash on an Android tablet)

I'd be interested if you could try it and confirm the issue.

Thanks, as always, for the great support.

PeteB

Peter Brown

Thanks for the confirmation, Ashley. I'll leave a copy of the story.html file in a public DropBox folder at: https://dl.dropboxusercontent.com/u/39750076/VideoTest.story

What you call useable, and what my paying customers call useable might be two different things

I should have mentioned that I was using Chrome whilst doing my tests - but probably that isn't a contributing factor seeing as it first came to my attention on an iPad.

I'm hopeful that if and when this problem gets fixed it'll start to work under Flash on my Android tablet, too. Usually that works perfectly (just like on a desktop) even though it isn't officially supported.

Should I submit this as a case?

Thanks again for taking a look.

Thanks again, and I look forward to hearing what happens next.

Peter Brown

The published test seems to work now, although I've been unable to test it on the iPad which originally caused the problem. This coupled with the fact that no one else in the world seems to have seen this issue makes me write the issue off and say that it is down to an older OS or some other platform specific issue rather than the StoryLine output.

Thanks to the great, patient Articulate support people (Jonathan especially) who spent their valuable time looking into it.