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

Question

我在 Web 浏览器上设计了一个 i-phone-like 屏幕，我正在其中测试我正在构建的应用程序。在我想调出另一组视频之前，它一直很好用。

有效的方法

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

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

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

<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 show/hide 更小 window:

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

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

如果用户想要观看这个特定频道，她可以点击较小的 window，它会隐藏当前 window 并前进到另一个频道。可以点击视频，一旦点击，用户将被引导至下一个频道。

下面是完美推进当前 selection 视频的代码，它包含排列在数组中的视频。

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

什么不起作用

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

但是，当我想要 select 不同的 class 视频时，问题就出现了，除了不同的视频之外，它具有完全相同的代码。 我已将函数名称更改为 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 标签元素，即 "video"。并且所有数组列表都有 "video" 所以它正在播放所有列表。

这个问题的最佳解决方案是什么，因为我希望能够将视频分成具有相似主题内容的类别 "channels"，并且这些类别将是用户在观看第二个较小的 window 视频时呼叫？

核心问题

有没有办法让它不播放 select 数组？我可以在 Javascript 代码中更改哪些内容来指示这些单独的视频数组不属于同一个 class？怎么在代码中说清楚，这些视频虽然都是视频，但是属于不同的类别，只有调用了它们的特定类别才能播放？

头脑风暴解决方案：

我想我可能需要第二个 div 调用第二个功能的第二行按钮，因为 prev 和 next 表示为每个声明的单独变量 class 个视频...但这对我的新手来说有点复杂技能:)
或者 parent class 上的每个视频都应该保存在 html 本身作为一个隐藏的 div 并且应该通过使用 "show
来调用 parent div 的下一个 child”，而不是在
上保存为数组 javascript 代码？
下一步是为每个视频添加选取框文本，这样也许在 html 上单独隐藏 divs 本身是一个更好的解决方案将视频存储为 javascript 数组？
这基本上是一个 prototype/beta 的东西，它将成为一个应用程序所以还没有数据库，（这将使它更容易
一旦我开始更多 in-depth 用户测试，最终存储此信息）。此并发症仅供测试:)

更新： 我仍然很好奇最好的解决方案是什么，但是我决定，在这种情况下，将 divs 直接添加到html 并使用 jquery 的下一个兄弟姐妹 select 或。因为我会有一些特定于某些视频的文本，所以它们无论如何都不会正确连接到 javascript 数组。我找到了 javascript 数组解决方案 "cooler" 但它最终可能不是最好的。

Answer 1

制作这样的视频：

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 数组并调用视频：

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

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

Alternating multiple video lists in html5 stored as javascript arrays

javascript

arrays

jquery

next

html5-video

有效的方法

什么不起作用

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