Explore the community Forums Lectora Lectora Questions & Answers Full-screen video via JavaScript

Tagged: ,

Viewing 14 posts - 16 through 29 (of 29 total)
  • Author
    Posts
  • #417866 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    195 pts
    @Klaatu

    Carl, you’re missing it please take another look. It is in both files I uploaded. Keep in mind that in the exported sample, External-Player.zip you will find the correct index.html in the extern\webwin40 folder. You seem to be looking in the wrong place. Do not mess with the Lectora stuff.

    Also, in the second zip (CustomizedPlayer) look in, or better yet, do a search in the index.html file. The preload attribute it is certainly there in the video tag.

    What I posted is exactly what you indicated you needed for that project. I wouldn’t mess to much with it. It is a concise as possible and simply reusable, even for a novice.

    If you are planning on adding an entire copy of the MediaElement.js source files keep in mind that without knowing which files to include/remove it will be way heavier than necessary. That’s why I stripped out everything that was not needed. Why not just work with Lectora’s, it’s the same thing. If you want to work with Lectora’s you’ll just have to figure out how to traverse the dom to get at it.

    #418039 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    18 pts
    @CarlFink

    What I wasn’t getting was that you specifically mean the index.html inside the Web Window object. Yes, that worked. I was also able to add a “progress” attribute to it to display the progress bar.

    The one thing I still can’t do is the equivalent of the “OnDonePlaying” action in Lectora. I’m sure it is possible, but it isn’t obvious to me how without a lot of research. I can’t find any documentation in several searches on exactly what events the mediaelement.js player generates (and specifically what they’re named), and also it’s not clear to me how to have Lectora catch them. I know that’s documented somewhere.

    Somewhere.

    I’m also going to have to re-encode all the video to fit on the page since the web window doesn’t like being resized, but that’s trivial.

    Thanks.

    #418044 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    18 pts
    @CarlFink

    One more thing I noticed: if I place the HTML output on a specific (internal) IIS server, all the player controls except the skipback you wrote for me (thank you!) are not shown? It works fine locally and on SCORM Cloud. Some IIS setting?

    Question: is there any way to turn autoplay on? I hate to keep bothering you but I don’t see any clear docs on the mediaelement object. Can you point me to some? I suppose I could try to decode the normal Lectora code ….

    #418121 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    195 pts
    @Klaatu

    There’s a lot there so I will work on trying to answer it all. Most of it is doable (Auto play, onEnd action). Not too sure about the issue on your server, I don’t think the information services should be an issue. Keep in mind that returning the progress bar will give the participant the ability to skip ahead. I can’t take the credit for the skip back script as it was lifted directly from the demo, however, you’re welcome for any help I have provided. What is happening when you resize the web window? I did not have an issue. Remember, you’ll need to change the video size (in the web window html.index) to match the height and width of your video. From there, you should be able to make the web window size in Lectora match that height and width.

    I’ll work on the auto-play and having the MediaElement player send an onEnd action to Lectora’s action system. I’m a little busy right at this moment so it might take a bit to get back, keep checking.

    #418124 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    18 pts
    @CarlFink

    Darrel, while I really appreciate your volunteering to do all that, I was really asking for a link to the mediaelements.js documentation so I could do it myself. I like learning this stuff.

    When I resized the window in testing, the video within did not resize, and the controls were not reachable because the window clipped the video (and thus the controls were were outside the frame of the webwindow, off the bottom).

     

    Edit: I can put the progress bar in, but then cover it with an invisible rectangle, right?

    • This reply was modified 3 months ago by Profile photo of CarlFink CarlFink . Reason: Left something out
    #418130 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    18 pts
    @CarlFink

    Continuing to add: I just used your modified mediaelements code on another course. I had encoded the DVD video down to 480×360. If I make the web window that exact size, it works (although of course the video quality itself is quite low). If I increase the size of the web window without changing the script, the web window resizes, but the video within it remains 480×360 and leaves a huge gap. That’s what I was referring to when I wrote about it not wanting to resize–the video itself does not scale, only the div (?) it’s enclosed in. (Obviously, I haven’t looked into how Lectora implements web windows.)

    #418132 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    195 pts
    @Klaatu

    Hmm, not sure what is going on with your resizing issue. As long as the actual video file height and width match those in the web window html.index. <video> tag and the size of web window in Lectora there should be no issue. Just make sure the actual video is the size you want the web window in Lectora to be. Boy, that sounds confusing, I hope I explained it sufficiently.

    As far as where to look to learn (which is highly commendable) go to mediaelementjs.com. You will find usage and the valuable API info top right (or just use these links).

    If you are not used to calling Lectora actions from JavaScript it can be tricky, especially if you’re exporting your project with the troublesome ‘seamless play’ selected. I include the attached, not to do the work for you, but to provide additional material to assist in your learning. I always find examples of what I am trying to do extremely helpful. I left the progress bar in so that you can do what you don’t want your students to do, drag to right before the end of the video, so you can see the end of video action fire off without having to endure that animation one more time (the very last scene is bad enough to have to watch).

    By the way, the Auto play property will work just fine once it’s uploaded to your server. It wont work locally. If you do a lot of custom work I strongly suggest you set up a local server, such as WAMP on your authoring computer so you can see exactly how your work will function on a real server. Okay, I’m going off on a tangent. Time to refocus.

    You can call an action directly from JavaScript by calling the function action123() where 123 is the number of your action. You can fire off a group (one or more actions) by calling runGroup_og123() where 123 is the number of your group. If you are using ‘seamless play’ you will have to include parent (parent.runGroup_og123()) before the function call to properly target it (Good explanation why is explained elsewhere in the forum). I commented my code to show you where this goes.

    In the sample I attached, because I was not attaching the action to anything, I added a group and put the action in the group. I could have called the action directly (action299 in my sample) however, I decided to call the group (og290 in my sample) instead. I could have placed any number of actions in that group. By the way, the Lectora awt is in the zip as well.

    That’s about it. If you have a difficult time figuring out or finding instruction on the JavaScript (I didn’t put that many comments) let me know and I will write something up.

    Good luck and I hope this helps.

    #418167 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    18 pts
    @CarlFink

    OK, my participation here is now the forum equivalent of a run-on sentence. I just can’t stop adding stuff.

    Where would you like bug reports? Because I just found one, and I don’t see any mention of it being fixed in V18. (Not a video bug, a responsive design bug.)

    I had found that site, actually, but the docs involved are very … let’s say, as a technical writer who has written and edited many manuals over some decades now, I would not be proud of that documentation. I think I’ll look into buying a book. I have a credit sitting around somewhere for a free computer ebook.

    I’ll try your file this afternoon. Thank you, again.

    #418356 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    18 pts
    @CarlFink

    Interesting behavior. The fullscreen button on the player works fine when published as HTML, or when I preview the page in the browser. However, when I publish to AICC it works neither in SCORM Cloud nor in Success Factors LMS. In those settings (in the exact same browser) the fullscreen button does nothing except change its own appearance when clicked.

    Annoying.

    #418370 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    18 pts
    @CarlFink

    Solved the resizing issue, at least partly.

    In the file mediaelement-and-player.min.js (which is weirdly semi-obfuscated JavaScript) there is the string

    0,stretching:”auto”,classPrefix:”mejs__”,enableKeyboard:!

    (I write “string” because as I commented upthread, the entire file seems to write a long, complex JavaScript package as a single line.)

    If you swap “auto” to “responsive” then resizing the Web Window also resizes the video. Otherwise, not.

    One incompatibility: if you put scrollbars on “Auto” it causes an ugly white border around the bottom and right of the edges of the video. If you leave that off it just letterboxes (black borders) whenever the Web Window aspect ratio is not identical to the video’s.

    #418372 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    195 pts
    @Klaatu

    It may look it but it is not obfuscated. The “min” in the name indicates the script is minimized (standard in JavaScript). It has all whitespace, comments and formatting removed as it is not needed for the interpreter and slows things down. If you download the player source files from their website you can look at the un-minimized version which is easy to read and heavily commented. This is very helpful to understand how it works – if you understands JS.

    Yes, you can set the “stretching” parameter to ‘auto’, ‘responsive’ or ‘fill’. I didn’t include this opting instead to have you size the video and player the same. I suppose if you are building in responsive mode in Lectora you’d want that set to responsive or maybe fill depending on your needs. Read through the API, this player is loaded with awesome features and some very talented people have contributed valuable plugins (like skip back). The application programming interface is always a good thing to become familiar with when using any JavaScript library.

    Odd behavior in the LMS. I don’t think that should be happening. What you describe is the feature triggering (hence the change in the icon) but it is not going full screen, correct? Until I can test, the only thing I can think of is that your LMS is set to open a course in a new window and maybe that is somehow effecting the full screen feature from working properly? Interesting.

    You can accomplish most, if not all, of these things by manipulating the built in mediaelement player, however, the folks at Trivantis/StoneCalibre have made it ridiculously difficult by the way they implement it (don’t get me started..). It is, therefore, MUCH easier to just pop in your own version of the player when needed to give yourself simple and complete control over all it’s features.

    #418374 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    195 pts
    @Klaatu

    Oh, I forgot to mention. It is not good practice to change anything inside a third party library (i.e. mediaelement.min.js). The “stretching” parameter should be added inside the <video> tag like autoplay, height, width, etc. For example stretching = “responsive”.

    One other thing I left out above is that stretching can also be set to “none”.

    #418383 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    18 pts
    @CarlFink

    I should clarify: my intent with “Responsive” was both to allow resizing the video by dragging the resize handles on the Web Window, and also to allow programmatic size changes to emulate fullscreen by just setting the window to fill the browser. I’d also have to handle the window resizing event for the browser window itself, of course, to make the video continue to fit.

    Obviously I haven’t done that yet, but that’s where my head was going.

    #420462 Score: 0
    Profile photo of CarlFink
    CarlFink
    Member
    beginner
    intermediate
    contributor
    LUC16 Attendee
    wise owl
    curious george
    advanced
    18 pts
    @CarlFink

    PSA time:

    I think I’ll look into buying a book.

    So I found this offer. That’s a total of 17 O’Reilly books on web dev, including 7 at least partly about JavaScript. I paid $15 for the total. Even if less than half will ever be useful to me it’s a good deal, so I thought I’d mention it.

Viewing 14 posts - 16 through 29 (of 29 total)

You must be logged in to reply to this topic.