iOS HTML5 Player Alignment

Matt Porritt

6 posts

Posted Sunday, August 19, 2012 at 10:19 PM  

Hi,

I've been experimenting with using Storyline to create SCORM content for Moodle 2.3, and so far I've found it a great product.   I am having some trouble with the alignment of the Storyline player, these issues occur both when embeded into Moodle and when the content is viewed directly in the web browser.

Basically is there a way to stop the player from centering the content in the middle of the screen on iOS devices?

When the content is viewed in a web browser only or embededd into Moodle (PC and non HTML 5) it is centered on the screen. I've fixed this by adjusting the player settings in Storyline to use current browser size and scale to fill browser window and changing the inline body height css to 80% (<body style="height: 80%;") in story.html.

 

However if the story_html5.html is viewed on a pc (multiple browsers) or on an iOS device it is still centered on the screen.  This becomes a real problem when embedding in Moodle and viewing on an iOS device as the left hand side of the player content (including the next and prev buttons) gets cut off.

I've been able to fix this when the HTML5 is viewed on a pc browser by adding top:0px!important; left:0px!important; to the framewrap class in player.css.  This doesn't fix the problem though on iOS devices.

 

Does anyone know how to move the player content from the center to the top left on iOS devices?

 

Thanks

 


Options

This post has 0 verified answers

All Replies

Matt Porritt

6 posts

Posted Tuesday, August 21, 2012 at 6:14 PM  

Hi,

I've been able to fix the alignment issue in iOS devices as well as well as the scale issue I was having when embedding the content into Moodle (caused by the iFrame).  It isn't a solution for the faint hearted as it requires changes to the storyline_compiled.js file, also note this worked in my situation and may not work in yours.  It may not even be a good idea and cause issues down the line.

 

The changes are: (storyline_compiled.js)

Line 916: make .css("left",a) and .css("top",b) to .css("left",0) and .css("top",0)

Line 1014 &1015: change the variables that set the let and top css to "left:0px!important" and "top:0px!important"

these changes will make the content align to the top left of the browser

 

To fix the scale issue when embedded in an iFrame or LMS etc. The changes are: (storyline_compiled.js)

Line 1014&1013 make all top.window.innerHeight and top.window.innerWidth to window.innerHeight and window.innerWidth i.e. remove the "top"

 

I hope this helps someone.

 


Options
User Rank Gerry Wasiluk

4,267 posts

Posted Monday, January 14, 2013 at 7:40 AM  

Hey, Matt!

 

After two Storyline updates, does your method for iOS still work?  I've been playing with this and can't get it to work.

 

When you publish, what are your player settings for displaying the content?


Options
Matt Porritt

6 posts

Posted Monday, January 14, 2013 at 8:39 PM  

Hi Gerry,

It is still working on my implementation, with the update 2 for Storyline the storyline_compiled.js has changed a fair bit so it took me a while to go through it and make the changes.  Now I just copy over this file when I publish a project.

 

The player settings in Storyline when I publish are in the screen shot below

As a matter of interest are you deploying via Moodle (LMS) or directly in the iOS web browser?

 

Kind Regards,

Matt P

 


Options
User Rank Gerry Wasiluk

4,267 posts

Posted Tuesday, January 15, 2013 at 5:50 AM  

Thanks, Mark!

 

Yes, I'm using the same settings when publishing.

 

Any chance of you sharing you edited storyline_compiled.js file with me?  I'd like to try it for testing if I could.  Editing that file is not for the weak of heart--or the unskilled.  And I'm more of a semi-skilled hacker. 

 

I'm currently trying to help a major U.S. corporation, a big user of the Articulate Suite, adopt Storyline and they have two LMS's, one for internal learners and one for external learners.

 

The internal LMS is from SAP and it's dated 2007.  This is one that your fix may help me with.  I'm surprised Storyline content works as well as it does there.  This LMS has a lot of issues with displaying content through an iPad.  Not surprising given the LMS's date.

 

The other LMS is from Saba and we have some of the same and different issues there.  That LMS is far newer (5.5) but still a version behind the newest version of Saba (6.0) that is supposed to formally support the iPad.

 

 


Options
Matt Porritt

6 posts

Posted Tuesday, January 15, 2013 at 1:53 PM  

Hi Gerry,

I've uploaded the .js file if it won't download drop me a PM and I'll email it to you.

It was definatley fun and games editing the file the first time around as it has been "compiled" to save sapce and as a result it is not very human readable anymore.  A dev copy of the file would be great to get me hands on.

 

I've not used either of those systems (well SAP I have but not the LMS side of it), but my solution may still work.  The main changes in the .js file that I've made are around both the position of the presentation within the web browser and how the presentation displays when included as part of an Iframe or "internal window".  By the look ok it the Storyline presentations are expecting to be delivered to the end user in their own web browser tab/window not within a frame, which is how LMS's will deliver it..

 

Anyway let me know how it goes.

 

Matt P


storyline_compiled.js
Options
User Rank Kevin Thorn

1,208 posts

Posted Tuesday, January 15, 2013 at 2:01 PM  

Thanks for the effort and the share, Matt!


Options
User Rank Gerry Wasiluk

4,267 posts

Posted Wednesday, January 16, 2013 at 6:31 AM  

Yes, thanks!

 

Looks like the file came through okay when I did a "save link as" in Firefox.  I know sometimes folks will zip up a file and attach that when there are issues.

 

Time for testing later today.  THANKS again!


Options
User Rank Gerry Wasiluk

4,267 posts

Posted Thursday, January 17, 2013 at 6:51 AM  

Aww, rats!  No love with the file in this LMS.

 

It seems to work at first but then the HTML5 launch page comes up, it throws this LMS's content player off.  All the bottom controls on the player get shoved off the bottom of the screen and I can't get at them.

 

Back to the drawing board . . .

 

 


Options
Matt Porritt

6 posts

Posted Thursday, January 17, 2013 at 1:41 PM  

Arghh.. that is frustrating.

With Moodle the SCORM window that the Storyline Packages deploy in can be adjusted, I'm not sure about other systems.

 

It would be good from within Storyline to specify aspects of the DOM (box) so you can taylor things like position of the Storyline output with reference to its container as well things like maximum or absolute size.

 

 I'm going to be doing some more LMS mobile work in the comming weeks this includes converting some Engage packages to Storyline.  If I come up with any further developments I'll post them here.

 

Matt P


Options
User Rank Gerry Wasiluk

4,267 posts

Posted Sunday, January 20, 2013 at 7:13 AM  

Hi, Matt!  I think I got it to work!

 

It was a combination of your file and some other things that I did.  I had to set the player's browser settings to Browser size:  Display at user's current browser and Player size:  Lock player at optimal size.

 

I also had to create my own custom launch file for HTML5 and then embed the regular HTML launch file with the object tag so I could control the size of the embed.  A couple of other files needed a brief edit.

 

Content launched and acted perfectly.  At course exit, the LMS properly updated my status and time in the course.

 

Here's the Storyline HTML5 content inside the SAP LSO LMS content player with both the top title bar and bottom controls (the yellow buttons) of the player showing on my iPad. 

 

 

 

I'm going to now verify and refine (especially to see if I can get the content size to max out a bit more in the player) and then document.  I'll also share my entire final solution here.

 

Anyways, again, THANKS for your sharing and for your file.  VERY MUCH APPRECIATED!  I've spent a ton of hours on this and you were a big part of this success.


Options
Matt Porritt

6 posts

Posted Sunday, January 20, 2013 at 1:24 PM  

HI Gerry,

I'm glad you got this to work, it looks good! I know how frustrating it can be to solve these problems and how good it feels when you finally do.  Glad I could help and I'd be interested in seeing the rest of your solution when you've refined it.

 

Anything else I can help with please let me know.

 

Kind Regards,

Matt P


Options