Skip to main content
florianr17851728
florianr17851728
Participant
October 18, 2016
Question

Customise a playbar and its behaviour

  • October 18, 2016
  • 1 reply
  • 132 views

Hi there!

I'm a total beginner in Captivate 9 on a MAC.

My goal is simple: I want to be able to distribute a project which behaves basically like a DVD or BluRay, but as a HTML5-Project, because we need to upload it to a Sever, so that the visitors can access ( b e   l i n k e d)   to the index.html-File and view the presentation.

I have a main-menu from which I branch out to five individual sub-menus. In each sub-menu there are several full-hd movies (.mp4), which can be targeted with individual buttons. On every sub-menu there also is a "jump-back-button" which brings me back to the main-menu. Simple and straight forward, just like we all know it from DVD and BluRay...

This all works like a charm: I can access every single movie, and after playing a movie, I placed an action "Jump back to last slide visited". Now comes the tricky part: I want to be able to give the user the possibility to jump back to the slide (sub-menu) he originally came from DURING playback of the movie,      AND I want to be able to pause/resume the currently playing movie.  The playbar should vanish after the user stops moving the mouse and re-app e a r as soon as the user moves the mouse again!

During the process, I discovered that multi-slide synchronised video works best. Using the "normal" method gives me the option to choose a skin which doesn't work correctly after exporting to HTML5. If I choose "no skin" and export as HTML5, I get a playbar from the browser which doesn't have the skip-back button.

I thought I could customise a playbar where I could use the "back" option to jump back to where I came from. But the "back"              option jumps to the next available slide within in project hierarchy, which makes it impossible to target a specific slide. Also, after looking around on the web, I saw that exporting to HTML5 overrides the skins and uses a playbar provided by your browser, and there I don't have the Skip-Back option.

I would need to customise a fully functional playbar which works when I publish the project to HTML5

Right now, I have a minimised the playbar with only " P l a y" (Pause)      and " d u r a t i o n". I then placed a transparent button over the whole slide containing the movie clip (leaving space for the appearing playbar below) and gave it the action to jump back to last slide visited. And guess what: it all works fine!

But I'm aware that this isn't the coolest way of doing it. So I'm just wondering: is there a better way of achieving this?

Any comments and helping hands are very appreciated. Thanks  😉

Best regards,

Steven R.

    This topic has been closed for replies.

    1 reply

    TLCMediaDesign
    TLCMediaDesign
    Inspiring
    October 18, 2016

    Honestly your best option is to build and html page with custom video controls, there are many templates you can use. You could add the "jump" button and have it execute JavaScript. You just need to pre-pend the script with window.parent because you are in an iFrame:

    var wpw = window.parent.window;

    wpw.cpCmndGotoSlide = wpw. cpInfoLastVisitedSlide;

    You can download the files and a good tutorial here.

    http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices