Unity 5 WebGL multiple video streaming, array issue.

Hi @jonas echterhoff and the rest of the community,

I'm currently having an issue getting multiple videos (specifically 3) to update, play and pause in my project.
The videos are in a scroll rect and a video is triggered to play when it hits the center of the screen, and pauses when it exits from the center of the screen.

The problem is, with the code below, only the third video (video 3) plays, and I have isolated the issue to be in the VideoInit() function. the 'object ID' stays at 3. Video init is called 3 times as there are 3 videos and it is called once for every video.

the 'id' passed in from unity is attached to each video in the project (1,2 and 3 respectively).

this is compared with an 'id' on the javascript side.

the line

Code (JavaScript):

1.  console.log("array item "+ i + ":" + videos.videoArray[i].id)

outputs:

Code (JavaScript):

1.  
2. array item 0:1
3. array item 0:2
4. array item 0:3
5.  

which would imply the array is not correctly being populated with the 3 videos; the 2nd video overwrites the 1st video and the 3rd video overwrites the 2nd video, rather than making the array bigger to fit all three videos.

My question is, how can I fix my code below to correctly populate the array?
code is below :

Code (JavaScript):

1.  
2.  
3. var LibraryVideo = {
4. $videos: {},
5.  
6. VideoInit1: function(url, id)
7. {
8.     if(videos.videosArray == null) {
9.         videos.videoArray = [];
10.     }
11.  
12.     videos.videoArray.push({});
13.     videos.videoArray[videos.videoArray.length - 1] = document.createElement('video');
14.     videos.videoArray[videos.videoArray.length - 1].style.display = 'none';
15.     videos.videoArray[videos.videoArray.length - 1].src = Pointer_stringify(url);
16.     videos.videoArray[videos.videoArray.length - 1].loop = true;
17.     videos.videoArray[videos.videoArray.length - 1].id = id;
18.    
19.  
20.     console.log(videos.videoArray[videos.videoArray.length - 1].id);
21.     console.log(url);
22.     for (var i=0; i<videos.videoArray.length; i++)
23.     {
24.     console.log("array item "+ i + ":" + videos.videoArray[i].id)
25.     }
26. },
27.  
28. VideoUpdate1: function(tex,id)
29. {
30.     var video = null;
31.     for (var i =0 ; i< videos.videoArray.length; i++)
32.     {
33. console.log("object ID:" + videos.videoArray[i].id);
34. console.log("Unity ID:" + id);
35.         if(videos.videoArray[i].id == id)
36.         {
37.         video = videos.videoArray[i];
38.         }  
39.     }
40.     if (video == null)
41.     {
42.     console.log("update return");
43.     return;
44.     }
45.  
46.     if(video.paused) {
47.         return;
48.     }
49.  
50.     if(video.readyState == video.HAVE_ENOUGH_DATA)
51.     {
52.         GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[tex]);
53.         GLctx.texImage2D(GLctx.TEXTURE_2D, 0, GLctx.RGBA, GLctx.RGBA, GLctx.UNSIGNED_BYTE, video);
54.     }
55. },
56.  
57. VideoPause1: function(id)
58. {
59.     var video = null;
60.     for (var i =0 ; i< videos.videoArray.length; i++)
61.     {
62.         if(videos.videoArray[i].id == id)
63.         {
64.         video = videos.videoArray[i];
65.         }  
66.     }
67.         if (video == null)
68.         {
69.         console.log("pause return");
70.         return;
71.         }
72. video.pause();
73. },
74.  
75. VideoPlay1: function (id)
76. {
77.     var video = null;
78.     for (var i =0 ; i< videos.videoArray.length; i++)
79.     {
80.         if(videos.videoArray[i].id == id)
81.         {
82.         video = videos.videoArray[i];
83.         }  
84.     }
85.         if (video == null)
86.         {
87.         console.log("play return");
88.         return;
89.         }
90.  
91. video.play();
92. }
93.  
94. };
95. autoAddDeps(LibraryVideo, '$videos');
96. mergeInto(LibraryManager.library, LibraryVideo);

thank you!

 

UPDATE: found the solution.

The code did not work due to a syntax error than did not come up on line 8:

Code (JavaScript):

1.     if(videos.videosArray == null) {

should be

Code (JavaScript):

1.     if(videos.videoArray == null) {

As a result this code is now called.