3 Replies Latest reply on Aug 12, 2014 8:54 AM by jbowden

    Trying to create HTML5 Video Playlist in Edge Animate - I can't get it to work. Please help!?!?

    Jason_Link Level 1

      Hi All,

      I am creating an interactive site through Edge Animate and am in the process of trying to create a HTML 5 Video Playlist to function within Edge Animate.

       

      Current Process - Example:

      I have 3 videos that need to be played on a certain page.

       

      I created a symbol and dragged the videos to the stage and hidden them within that symbol's timeline.


      I then use thumbnail images in a side playlist to either .remove(); .hide(); a video and .show(); the next.

       

      However when I do a hide / show option, the video continue to plays in the background if I don't also create an if/else statement to pause it.

       

      My concern with pausing it is that it will continue to load and dramatically slow down the load time of the site.

       

       

      References:

      I found this which looks very helpful but don't know how to add this to edge composition.

       

      http://demosthenes.info/blog/909/Create-An-Automatic-HTML5-Video-Playlist

       

       

      Please help or put me in the right direction to create a playlist would be hugely... AMAZINGLY.. helpful.

       

      Thanks,

      Jason

        • 1. Re: Trying to create HTML5 Video Playlist in Edge Animate - I can't get it to work. Please help!?!?
          jbowden Adobe Employee

          Hi Jason,

           

          If you don't intend for the user to go back and replay a video, then adding each video to its own symbol and then removing the symbol when the user goes to the next video is the quickest and easiest way to accomplish this. Otherwise, hide/show will require you to pause the video as you noted, and it won't stop downloading until the browser thinks it has enough to play back without pausing.

           

          If you do intend for the user to go back, it's trickier but still possible - you could createChildSymbol to add video symbols back. If they are all the same frame size, you could avoid the entire symbol/remove/createChildSymbol structure and use a single video element and change the src files, then use the load() method to reload the video element - but if you're concerned about video playback performance, only the first source file will preload in the browser. But this is more in line with the playlist idea that you linked to. You could also use addEventListener to have these things happen when video events such as ended have fired, and even track where the user was in variables and restore them if they go back (if that's what you wanted).

           

          In summary, there are a few ways to tackle this - perhaps the more difficult part could be lining it up with what you want the user to be able to do.

           

          hth,

          Joe

          1 person found this helpful
          • 2. Re: Trying to create HTML5 Video Playlist in Edge Animate - I can't get it to work. Please help!?!?
            Jason_Link Level 1

            Hi Joe,

            Thank you so much for your help on this one. It is hugely appreciated!!

             

            I have been working frantically to implement your solution to get this working. I used the 'change src' method.

            I have added all my code below in case anyone wants the solution in the future.

             

            Could you please help below as I am now totally stuck with the <track> and 'event listener issues' !!

             

            Issue #1:

            I am having major problems with loading the 'closed captions' track element.

             

            Everything I click for the video to change source / to the next video, the closed caption track adds to the video and doesn't 'unload' the previous one. You then end up with multiple different subtitle tracks on the video screen

             

            - The closed captions / subtitles are not showing up in Google Chrome either?

             

            Issue #2:

            I can't get the event listener in edge animate to work for 'playing' and 'ended'. Can you please help and point me in the correct direction??

             

            Screenshot (showing what happens after the 3rd video is loaded)

            Screen Shot 2014-08-11 at 12.24.57 pm.png

             

            This is the Code I am currently using in the "Creation Complete" of this Symbol.

             

            SET UP OF VIDEO PLAYER AND FIRST VIDEO

            var vid = sym.$("video_Chapter5");

            vid.html('<video id="ch5video" width="100%" height="auto" margin= "0 auto"  \

            position ="relative"  poster="video/video1_poster.jpg"  controls="controls" </video> \

            <source id ="videomp4src" src="video/Video_mp4_1.mp4" type="video/mp4" </source> \

            <source id ="videoogvsrc" src="video/Video_ogv_1.ogg" type="video/ogv" </source> \

            <source id ="videowebmsrc" src="video/Video_webm_1.ogg" type="video/webm" </source> \

            <track id ="trackvtt" kind="subtitles" src="video/Video_1_Script.vtt" srclang="en" label="English" hidden </track>');

             

            VARIABLE IDS

            $(document).ready(function() {

              var videoID = 'ch5video';

              var sourceID1 = 'videomp4src';

              var sourceID2 = 'videoogvsrc';

              var sourceID3 = 'videowebmsrc';

              var trackID = 'trackvtt';

              var vid1mp4 = 'video/Video_mp4_1.mp4';

              var vid2mp4 = 'video/Video_mp4_2.mp4';

              var vid3mp4 = 'video/Video_mp4_3.mp4';

              var vid4mp4 = 'video/Video_mp4_4.mp4';

              var vid1ogv = 'video/Video_ogv_1.ogv';

              var vid2ogv = 'video/Video_ogv_2.ogv';

              var vid3ogv = 'video/Video_ogv_3.ogv';

              var vid4ogv = 'video/Video_ogv_4.ogv';

              var vid1webm = 'video/Video_webm_1.webm';

              var vid2webm = 'video/Video_webm_2.webm';

              var vid3webm = 'video/Video_webm_3.webm';

              var vid4webm = 'video/Video_webm_4.webm';

              var script1vtt = 'video/Video_1_Script.vtt';

              var script2vtt = 'video/Video_2_Script.vtt'; 

              var script3srt = 'video/Video_3_Script.vtt'; 

              var script4vtt = 'video/Video_4_Script.vtt';   

              var newposter1 = 'video/video1_poster.jpg';

              var newposter2 = 'video/video2_poster.jpg';

              var newposter3 = 'video/video3_poster.jpg';

              var newposter4 = 'video/video4_poster.jpg';

             

            VIDEO PLAYLIST THUMBNAIL BUTTONS - TO CHANGE VIDEO IN PLAYER

              sym.$('btn1').click(function(event) {

              sym.$('#'+videoID).get(0).pause();

              sym.$('#'+sourceID1).attr('src', vid1mp4);

              sym.$('#'+sourceID2).attr('src', vid1ogv);

              sym.$('#'+sourceID3).attr('src', vid1webm);

              sym.$('#'+trackID).attr('src', script1vtt);

              sym.$('#'+videoID).get(0).load();

              sym.$('#'+videoID).attr('poster', newposter1);

              sym.$('#'+videoID).get(0).play();  

              });

              sym.$('btn2').click(function(event) {

              sym.$('#'+videoID).get(0).pause();

              sym.$('#'+sourceID1).attr('src', vid2mp4);

              sym.$('#'+sourceID2).attr('src', vid2ogv);

              sym.$('#'+sourceID3).attr('src', vid2webm);

              sym.$('#'+trackID).attr('src', script2vtt);

              sym.$('#'+videoID).get(0).load();

              sym.$('#'+trackID).load();

              sym.$('#'+videoID).attr('poster', newposter2);

              sym.$('#'+videoID).get(0).play();  

              });

              sym.$('btn3').click(function(event) {

              sym.$('#'+videoID).get(0).pause();

              sym.$('#'+sourceID1).attr('src', vid3mp4); 

              sym.$('#'+sourceID2).attr('src', vid3ogv); 

              sym.$('#'+sourceID3).attr('src', vid3webm);

              sym.$('#'+trackID).attr('src', script3srt);

              sym.$('#'+videoID).get(0).load();

              sym.$('#'+videoID).attr('poster', newposter3);

              sym.$('#'+videoID).get(0).play();

              });

              sym.$('btn4').click(function(event) {

              sym.$('#'+videoID).get(0).pause();

              sym.$('#'+sourceID1).attr('src', vid4mp4);

              sym.$('#'+sourceID2).attr('src', vid4ogv);

              sym.$('#'+sourceID3).attr('src', vid4webm);

              sym.$('#'+trackID).attr('src', script4vtt);  

              sym.$('#'+videoID).get(0).load();

              sym.$('#'+videoID).attr('poster', newposter4);

              sym.$('#'+videoID).get(0).play(); 

              });

             

            EVENT LISTENER FOR PLAYING - TO CREAT BACKGROUND /LIGHT BOX SCREEN

            sym.$('#'+videoID).get(0).addEventListener('playing', function () {

            sym.getSymbol("backscreen_Ch5").$("backscreen").show();

            sym.getSymbol("backscreen_Ch5").play("play");

            });

             

            EVENT LISTENER FOR ENDED - TO PLAY NEXT VIDEO IN SERIES

            sym.$('#'+videoID).get(0).addEventListener('ended', function () {

            //code to play next video

            });

             

             

             

            });

            • 3. Re: Trying to create HTML5 Video Playlist in Edge Animate - I can't get it to work. Please help!?!?
              jbowden Adobe Employee

              Hi Jason,

               

              Sorry, I don't have a lot of personal experience working with the track element, but in case you haven't already seen it, there's plenty of information about it here:

               

              Getting Started With the Track Element - HTML5 Rocks

               

              Not sure why your addEventListener code is not working. Do you have the correct variable scope? Do you get any errors in the browser console?

               

              Joe

              1 person found this helpful