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

Question

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

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