11 Replies Latest reply: Jan 8, 2014 7:33 AM by sinious RSS

    Video end action - load new page

    rickg1949 Community Member

      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

        • 1. Re: Video end action - load new page
          sinious CommunityMVP

          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>

          • 2. Re: Video end action - load new page
            rickg1949 Community Member

            I know what you mean about "risky".  Not being that comforable in the Flash world, I wanted to be able to export my movies and use the browser in full screen mode to run a local HTML5 site.  The challenge I have is that this is for a display in a museum using a PS2 mouse pedistal controller.  The previous playback equipment is failing and complicated, so I want to replace the system with a PC that opens to the menu page.  I have used Encore to create a similar system, but its Flash output needs to embed the player controls which I don't want to show. 

             

            Trying just to have a menu page with options, click to play various movies and return to menu page.

             

            I have been successful just now by using a redirect metatag making the time a couple seconds longer than the video.  Worked very well.

             

            Thanks in advance for suggestions.

             

            Rick

            • 3. Re: Video end action - load new page
              sinious CommunityMVP

              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).

              • 4. Re: Video end action - load new page
                rickg1949 Community Member

                I have been able to create what I need in Flash and I understand why you feel it's better.  I have the functionality working to have the multi-button menu with roll-overs up when app opens, and click on button and play an mp4 movie.

                 

                Now I'm just stuck on how to incorporate eventlisteners to get the app back to the menu once a video finishes.

                 

                Set it up with menu graphics on frame 1, then instances of FLVPlayback on fames 30 and 60 to start with.  Click on button for video 1 and we go to frame 30 and play mp4 and same for video 2 to frame 60.  I just can't get back to menu.

                 

                Is it that I need to use the NetConnection actions?

                 

                What I'm looking for is code that when "video1" (test1.mp4) ends we return to frame 1 labeled "menu" and when "video2" (test2.mp4) ends we do the same.

                 

                Thank you, thank you, thank YOU!!  in advance,

                 

                Rick

                • 5. Re: Video end action - load new page
                  sinious CommunityMVP

                  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!

                  • 6. Re: Video end action - load new page
                    rickg1949 Community Member

                    Getting these two errors:

                     

                    Scene 1, Layer 'actions', Frame 30, Line 3, Column 411119: Access of possibly undefined property COMPLETE through a reference with static type Class.
                    Scene 1, Layer 'actions', Frame 30, Line 3, Column 131061: Call to a possibly undefined method addEventListener through a reference with static type Class.

                     

                    using this script on actions layer for video on frame 30:

                     

                    import fl.video.VideoEvent;

                     

                     

                    FLVPlayback.addEventListener(VideoEvent.COMPLETE, onCompleteF);

                     

                     

                    function onCompleteF(e: VideoEvent): void {

                     

                     

                              gotoAndStop(1);

                     

                     

                    }

                     

                    Ideas?

                    • 7. Re: Video end action - load new page
                      sinious CommunityMVP

                      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.

                      • 8. Re: Video end action - load new page
                        rickg1949 Community Member

                        Thank you so much.  I had given each video an instance: "video1, video2, etc"

                         

                        So changed event listener code to this:

                         

                        import fl.video.VideoEvent;

                         

                         

                        video1.addEventListener(VideoEvent.COMPLETE, onCompleteF);

                         

                         

                        function onCompleteF(e: VideoEvent): void {

                         

                         

                                  gotoAndStop(1);

                         

                         

                        }

                         

                        But still getting an error #1119 in line 4 of each video:

                         

                        Scene 1, Layer 'actions', Frame 30, Line 4, Column 361119: Access of possibly undefined property COMPLETE through a reference with static type Class.

                         

                        Tried renaming the function for video2 to unique name of onCompleteF_2 and that didn't work.

                         

                        thanks again. rg

                        • 9. Re: Video end action - load new page
                          sinious CommunityMVP

                          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);

                          }

                          • 10. Re: Video end action - load new page
                            rickg1949 Community Member

                            Sinious, I owe you a beer!!!   Thanks so much!!

                             

                            rg

                            • 11. Re: Video end action - load new page
                              sinious CommunityMVP

                              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!