Html 5 Video Controls

Im having an issue where when a video has been published as HTML5 the browser strips out the articulate/storyline2 player and replaces it with the standard HTML5 video player controls. This breaks my presentation because where the default articulate sat theres no a white blank strip where the default player controls sat.

Is there a fix for this or a work around ?

8 Replies
Paul Knights

HI Ashley, I'm actually wondering about the opposite. In ST360 we are wondering why courses viewed on mobile (IOS or Android) the standard HTML5 video controls are missing?

The standard controls for HTML5 video control are very good so why does articulate not use these? They include a fullscreen option for playing the video which is very useful on small devices. Currently any course we output with the control set inside ST360 to 'below' comes up with a sort of basic flash player control, play/pause and scrub.

Any idea on when the team are going to use the full native HTML5 code/controls for handling video?

Thanks,

pk

Ashley Terwilliger

Hi Paul,

It's actually an issue we have reported to our team as a possible software bug. 

From here, I’ll meet with my team to take a closer look so we can determine next steps. Sometimes my team catches errors in my logic and we don’t have a bug after all. Of course, if that’s the case, I’ll let you know! 

Depending on priority and risk, some bugs can be fixed quickly, while others take longer to resolve. Here's more information on how we identify and tackle bugs.

I’ll let you know as soon as we have an update on this issue. Thanks so much again for letting us know about this, and I’m sorry if it’s slowing you down.

Ivan Belash

So far I managed to find two workarounds for full screen video without aspect ratio changing. In both cases, it is required to set slide background to transparent:

  1. Right click on the slide thumbnail and select Format Background
  2. Set Transparency to 100%
  3. Click Close

First workaround:

  1. Resize video, so as default Storyline video controls appears within slide area.

Second workaround (based on https://blog.commlabindia.com/elearning-development/articulate-storyline-video-player ):

  1. Create a directory.
  2. Create an HTML file with a link to the video inside of the directory:
    <!DOCTYPE html>
    <html>
    <body>
    <video style="display:flex;height:99%;width:99%;margin:auto auto auto auto" controls autoplay>
    <!-- Do not set width and height to 100% as it leads to scroll bars in browser -->
    <!-- Also, there is annoying jittering in Chrome when video width and height are 100% -->
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag from HTML5.
    </video>
    </body>
    </html>

    Note, the video file (in here, video.mp4) must be in the same directory as HTML file.

  3. Insert this directory into SL360 as Web Object.
  4. Set size and position of this Web Object to fit the slide area.

Second workaround does not work well in Chrome due to annoying jittering when video width and height are 100%.

Ashley Terwilliger

Hi Ivan,

No need to submit a case if you are running into the same issue here, where video controls are autohiding on mobile devices even if you enable video controls on inserted YouTube videos. 

If you want to let me know what iOS or Android device you're using I can add that to the report our team is looking at. Once we have more detail to share we'll post here.