javascript - 在html5中交替存储为javascript数组的多个视频列表

Question

我已经在Web浏览器上设计了类似iphone的屏幕，在该屏幕上，我正在测试此应用程序，该应用程序正在构建中。直到我想调出另一组视频之前，它的效果都很好。

 什么有效

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

    <div id="topVid" class="videoContainer">
        <div class="topHorizontalButtonRow">
          <a href="#" class="buttonLeftTriangleBlue" onClick="return Vids.prev();"></a>
          <a href="#" class="buttonRightTriangleBlue" id="nextButtonTop" onClick="return Vids.next();"></a>
         </div>

        <video class="topVid" loop onclick="this.paused? this.play() : this.pause()" >
        <source src="videos/ParisisBurning_660x370_I_went_to_a_ball.mp4" type="video/mp4">
        Your browser does not support the video tag.
        </video>
    </div>   

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

<div id="bottomVid" class="videoContainerTwo hiddenElement">

    <div class="topHorizontalButtonRow">
    <div class="buttonLeftTriangleBlue"></div>
    <div class="buttonRightTriangleBlue"></div>
    </div>

    <video loop onclick="this.paused? this.play() : this.pause()" >
    <source src="videos/Politics_Refugee_Sign.mp4"  type="video/mp4">
    Your browser does not support the video tag.
    </video>

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

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

      } else {
        $("#bottomVid").show();
      }
  });

如果用户希望观看此特定频道，则可以单击较小的窗口，该窗口将隐藏当前窗口并前进到另一个频道。可以单击视频，一旦发生，用户将被带到下一个频道。

以下是完美地推进当前所选视频的代码，它包含以阵列形式排列的视频。

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

什么不起作用

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

但是，当我要选择不同类别的视频时，问题就开始了，除了不同的视频外，它具有完全相同的代码。我将函数名称更改为说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;
       }
    }
})();

问题仍然存在：除了新频道的按钮之外，按钮还将继续播放当前频道的视频，并且不会隐藏当前视频。我了解发生这种情况的原因是，在javascript代码中，它使用的是“视频”标签的select元素。并且所有数组列表都有“视频”，因此它正在播放所有视频。

考虑到我希望能够将视频划分为具有类似主题内容的类别“频道”，并且当用户在第二个较小的窗口中看到该类别时，该类别将由用户调用，这是对此问题的最佳解决方案视频？

核心问题

有没有办法让它不播放数组的选择？我可以在Javascript代码中进行哪些更改，以表明这些单独的视频阵列不属于同一类？我如何在代码中明确说明这些视频，尽管它们都是视频，但它们属于不同的类别，因此只有在调用其特定类别时才能播放？

集思广益的解决方案：


我想我可能需要第二个div，
第二行按钮调用第二个功能，因为
prev和next指示为每个变量声明的单独变量
类视频...但是对于我的新手来说，这有点复杂
技能：）
或将父班级的每个视频都保存在
html本身是一个隐藏的div，应使用“ show
父div的下一个孩子”，而不是另存为数组
JavaScript代码？
下一步是将字幕文本添加到每个视频，以便
在html上单独隐藏div是比以下更好的解决方案
将视频存储为javascript数组？
这基本上是一个原型/测试版，用于将成为
应用程序，因此尚无数据库，（这将使
一旦我开始进行更深入的用户测试，最终将存储此信息）。
此并发症仅用于测试：)


更新：我仍然对最佳解决方案感到好奇，但是，在这种情况下，我决定直接将div添加到html中，并使用jquery的下一个同级选择器。因为我将有一些特定于某些视频的文本，所以它们无论如何都无法正确连接到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;
   }
}
};

然后准备您的网址数组并调用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