Question

我正在编写我的第一个JavaScript视频播放器。它具有一个主窗口和三个侧窗，其中将填充随机视频。当用户单击侧面视频时，它将移至主窗口，而随机选择的视频将替换其在侧面窗口中的位置。

我已经开始工作了，以便选择后顶部视频会移到主窗口。一旦发现，我计划将此代码与其他视频复制。我遇到的问题是用从视频缓存中选择的随机视频替换选定的侧面视频窗口。

我尝试了以下代码的多种变体。

JavaScript


    // Change main video to selection 
    var video = document.getElementById('one');
    video.src = "videos/video-2.mp4";   


    //VideoCache Array
    var videoCache = ["video-1.mp4", "video-2.mp4", "video-3.mp4",  "video-4.mp4", "video-5.mp4", "video-6.mp4", "video-7.mp4", "video-8.mp4",  "video-9.mp4", "video-10.mp4"];

    //Select Random Video   
    selectVideo = videoCache[Math.floor(Math.random() * videoCache.length) *1]; 


    //Add selected video to second video slot   
    var video2 = document.getElementById('two');
    video2.src = "selectVideo"; 

});

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Oakland Commune</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css" />    
  </head>
  <body>

  <p id="test">Test Me!<p>

  <div id = "wrapper">

     <div id ="first" class="video-wrappers"> 
        <video id="one" width="400" controls>
            <source src="videos/video-1.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
     </div>

      <div id ="second" class="video-wrappers">
         <video id="two" width="400" controls>
            <source src=" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
      </div>

      <div id ="third" class="video-wrappers">
           <video id="three" width="400" controls>
            <source src="videos/video-3.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
          </div>
  <div id ="fourth" class="video-wrappers">
           <video id="four" width="400" controls>
            <source src="videos/video-4.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
        </video>
      </div>
  </div>
  <script type="text/javascript" src="scripts.js"></script>

  </body>
</html>

用于替换所选视频的随机视频不会加载。

Javascript视频播放器未加载随机选择的视频

0 个答案: