Skip navigation
Currently Being Moderated

Video end action - load new page

Jan 2, 2014 11:34 AM

Tags: #video #jquery #javascript

How can I create/add an end action to load a new page once an HTML5 video has played?  Basically trying to have a menu, play videos full screen and have browser return to home page/main menu at the end of the video.  Need to do this in a browser for a kiosk, not use DVD player software so that I can eliminate on-screen controls.

 

Rick

 
Replies
  • Currently Being Moderated
    Jan 2, 2014 1:47 PM   in reply to rickg1949

    Using HTML for a kiosk is risky. If the OS isn't configured correctly, longpressing areas can open up context menus and let your users steer off course. You should either re-consider using HTML in a kiosk other than to present information or use a more controllable technology like an embedded Flash player running Fullscreen video which JavaScript can easily communicate with. Is Flash possible for you to use?

     

    In either case here's an interesting article on the caveats of trying to remove fullscreen controls (it's just not a good idea and can get a user stuck, which is why it isn't easy).

     

    As for the event, "onended" is the event you want to listen for in a HTML video.

     

    e.g.:

     

    <!-- video -->

    <video id="myVideo" src="myvideo.ogv">Video not supported!</video>

     

    <!-- script -->

    <script>

    document.getElementsById('myVideo').onended = function(e) {

      // do what you want here

    }

    </script>

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 2, 2014 2:02 PM   in reply to rickg1949

    I use Flash fairly exclusively (and AIR) for kiosks due to it being a great multimedia engine, 3d engine and scripting environment with OS-level control when needed. In the future you should consider it.

     

    Otherwise the event example will assure your users video will end exactly when it actually does and save you from all those meta refresh tags.

     

    The controls are just the hiccup. Consider them similar to popup windows to the politically correct police. Messing with what people consider almost OS-level preferences is tough. Sometimese merely for preferences (opening a new browser window) or for safety (no on-screen controls in a fullscreen movie gets a user stuck).

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2014 12:11 PM   in reply to rickg1949

    The FLVPlayback class comes with a "complete" event that fires off once the video ends.

     

    Give your FLVPlayback an instance name and simply apply this code in a frame script on the same frame (30, 60, etc). For example if you gave it the instance name myFLVPlayback, then:

     

    // import event

    import fl.video.VideoEvent;

     

    // attach event to instance name 'myFLVPlayback', run onCompleteF when at end

    myFLVPlayback.addEventListener(VideoEvent.COMPLETE, onCompleteF);

     

    // function that fires

    function onCompleteF(e:VideoEvent):void

    {

         // do what you want here, for example,

         // go back to frame 1

     

         gotoAndStop(1);

     

    }

     

    If the user pauses the video, do note that this event won't fire. The video must play through to completion for this event to fire.

     

    Also note some not-so-perfectly formed videos can cause the FLVPlayback component to fail to detect the end of the video or fire off this event. This has happened a lot less lately but it has been known to happen. Give it a try!

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2014 1:22 PM   in reply to rickg1949

    The class name for FLVPlayback is "FLVPlayback" so you will need to name your "instance" of your FLVPlayback component something different. Otherwise Flash thinks you're referencing the FLVPlayback class and not your instance.

     

    To make it really clear, go to the frame your FLVPlayback component is on, click it to select it, then in the properties panel make sure you give it a unique "instance" name:

     

    instancename.png

     

    As you see here I named it myFLVPlayback.

     

    You then want to apply the code to that, like I did above.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 7, 2014 2:24 PM   in reply to rickg1949

    It's just the IDE fighting with the built in flash.events.VideoEvent class. Change the code to be explicit:

     

    import fl.video.VideoEvent;

     

    video1.addEventListener(fl.video.VideoEvent.COMPLETE, onCompleteF);

     

    function onCompleteF(e:fl.video.VideoEvent):void

    {

              gotoAndStop(1);

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 8, 2014 7:33 AM   in reply to rickg1949

    Glad you got it working. If you're all set please just mark a correct answer so we can filter unanswered questions.

     

    You're welcome and good luck!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points