将html5中的多个video列表交替存储为javascript数组

我在网络浏览器上设计了一个类似i-phone的屏幕，我正在测试这个应用程序，我正在构建。 它工作得很好，直到我想要调用另一组video。

什么有效

该应用程序的结构使得当用户看到屏幕时，她被引导到具有垂直video的频道。 左上角和右上角的按钮前进到下一个和上一个video。

有一个“通道”按钮，如果按下该按钮，则向用户显示一个较小的窗口，用户可以通过单击第二组按钮和下一个按钮来查看其他通道。

jquery显示/隐藏较小的窗口：

 $(".buttonTeardropChannelBlue").click( function (){ if( $("#bottomVid").is(':visible') ) { $("#bottomVid").hide(); } else { $("#bottomVid").show(); } }); 

如果用户想要观看该特定频道，她可以点击较小的窗口，该窗口隐藏当前窗口并前进到另一个频道。 可以点击video，一旦发生这种情况，用户将被定向到下一个频道。

下面是完美地用于推进当前选择的video的代码，它包含以数组排列的video。

 var Vids = (function() { var _currentId = -1; var _urls = ["videos/ParisisBurning_370x660_Get_Into_The_Suits_Vert.mp4","videos/ParisisBurning_370x660_School_Vert.mp4","videos/ParisisBurning_660x370_I_came_I_saw_Vert.mp4", "videos/ParisisBurning_660x370_I_went_to_a_ball.mp4"]; // literal array return { next: function() { if (++_currentId >= _urls.length) _currentId = 0; return this.play(_currentId); }, prev: function() { if (--_currentId < 0) _currentId = _urls.length - 1; return this.play(_currentId); }, play: function(id) { var myVideo = document.getElementsByTagName('video')[0]; myVideo.src = _urls[id]; myVideo.load(); myVideo.play(); return false; } } })(); 

什么行不通

问题：显示和隐藏多个video列表

但是，当我想要选择不同类别的video时，问题就开始了，除了不同的video之外，这些video具有完全相同的代码。 我已经更改了函数的名称，比如VidsTwo，但问题仍然存在。

 var VidsTwo = (function() { var _currentId = -1; var _urls = ["videos/Politics_Atl_We_are_the_people.mp4","videos/Politics_Atlanta_Whose_Streets.mp4", "videos/Politics_Womens_March_Washington_CBS_VERT.mp4", "videos/Politics_No_bans_no_walls_America_is_home_to_all_VERT.mp4", "videos/Politics_Let_them_in_VERT.mp4", "videos/Politics_Tear it Down_JFK_VERT.mp4", "videos/Politics_This_is_What_America_Looks_Like_embrace.mp4", "videos/Politics_This_land_was_made_VERT.mp4", "videos/Politics_We_need_an_independent_investigation_town_hall.mp4", "videos/Politics_Just say no_town_hall_VERT.mp4", ]; // literal array return { next: function() { if (++_currentId >= _urls.length) _currentId = 0; return this.play(_currentId); }, prev: function() { if (--_currentId < 0) _currentId = _urls.length - 1; return this.play(_currentId); }, play: function(id) { var myVideo = document.getElementsByTagName('video')[0]; myVideo.src = _urls[id]; myVideo.load(); myVideo.play(); return false; } } })(); 

问题仍然存在 ：除了新频道之外，按钮还将继续播放当前频道的video，并且不会隐藏当前video。 据我所知，因为在javascript代码中，它使用了标签的select元素，即“video”。 并且所有数组列表都有“video”，因此它正在播放所有这些video。

这个问题的最佳解决方案是什么，因为我希望能够将video分成具有相似主题内容的“频道”类别，并且用户在查看第二个较小的窗口时会调用这些类别。video？

核心问题

有没有办法让它不播放选择的arrays？ 我可以在Javascript代码中更改哪些内容表明这些单独的video数组不属于同一个类？ 如何在代码中明确说明这些video虽然都是video，但属于不同的类别，因此只有在调用特定类别时才能播放？

头脑风暴解决方案：

• 我想我可能需要第二个div，它将有第二行按钮调出第二个函数，因为prev和next表示为每个video类声明的单独变量…但这是一个我的新手技巧有点复杂:)
• 或者也许父类的每个video都应该作为隐藏的div保存在html本身上，并且应该使用“show”来调用
  父div的下一个孩子“，而不是被保存为数组
  javascript代码？
• 下一步是为每个video添加选框文本，所以在html本身上可能有单独的隐藏div是比将video存储为javascript数组更好的解决方案？
• 这基本上是一个原型/测试版的东西，它将成为一个应用程序，所以还没有数据库，（这将使它更容易
  一旦我开始更深入的用户测试，最终存储此信息）。 这个复杂function仅用于测试:)

更新：我仍然很好奇最好的解决方案是什么，但是在这种情况下，我已经决定将div直接添加到html并使用jquery的下一个兄弟选择器。 因为我会有一些特定于某些video的文字，所以无论如何它们都无法正确连接到javascript数组。 我发现javascript数组解决方案“更酷”，但它最终可能不是最好的。

Answer 1

让Vids像这样：

 var Vids = function(vidArray=[]) { var _currentId = -1; var _urls = vidArray; return { next: function() { if (++_currentId >= _urls.length) _currentId = 0; return this.play(_currentId); }, prev: function() { if (--_currentId < 0) _currentId = _urls.length - 1; return this.play(_currentId); }, play: function(id) { var myVideo = document.getElementsByTagName('video')[0]; myVideo.src = _urls[id]; myVideo.load(); myVideo.play(); return false; } } }; 

然后准备你的url数组并调用Vids：

 var urls =["videos/ParisisBurning_370x660_Get_Into_The_Suits_Vert.mp4","videos/ParisisBurning_370x660_School_Vert.mp4","videos/ParisisBurning_660x370_I_came_I_saw_Vert.mp4", "videos/ParisisBurning_660x370_I_went_to_a_ball.mp4"]; Vids(urlf).play(3); //Replace 3 with any id