javascript - 视频库 : Click on text, 有视频出现

Question

这对于 HTML、CSS 和/或 Javascript 来说似乎是一项简单的任务，但我找不到解决方案，无论是通过谷歌搜索还是在 Stack Overflow 上查阅数据库。

我想要并且已经看到的是在左侧有几行文本命名视频。当您单击其中一个视频名称时，该视频将出现在右侧或上方。每次单击视频名称时，该视频都会显示在右侧的同一个框中。所以，这有点像切换 channel ，而文本 anchor 就是您的 Remote 。

MSNBC 就是一个例子，但我认为这超出了我的薪酬等级:

http://www.msnbc.com/msnbc/watch/clinton-on-email-scandal-i-want-it-resolved-612366403989 )

我通过搜索 Stack Overflow 找到的另一个示例，但使用图像而不是视频是这个:

http://imagethrow.com/design-studio-all-throws.html

我的问题是:是否可以创建一个简单的视频播放器，通过单击文本 anchor 进行响应，或者这是否太复杂了(至少就我的理解水平而言，即我不使用 php)。感谢您的帮助。

巴里·格里克

Answer 1

好的，为此，您需要为视频创建一个容器，然后让一组链接在通过 JavaScript/jQuery 单击它们时更改视频源。

当您使用 YouTube 观看视频时，我们将使用 youtube 嵌入代码 (iframe)

演示 - jsFiddle

$( document ).ready(function() {

  // load video function on link click
  $( "#video-list" ).on( "click", "a", function(e) {
    // prevent default anchor behaviour
    e.preventDefault();
    // get the video URL from link
    var videoID = $(this).attr('data-video');
    // load the video into the iframe
    $('#videoContainer iframe').attr("src", videoID);
  });
    
});

#videoContainer {
  height: 350px;
  width:600px;
}

#videoContainer iframe {
  width:100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- video container -->
<div id="videoContainer">
  <!-- youtube's iframe embed code - you can set a default video here -->
  <iframe id="youtube" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
</div>

<!-- videos list -->
<ul id="video-list">
  <li><a href="#" data-video="https://www.youtube.com/embed/IWegh6TRx6c">Lord Trolldemort</a></li>
  <li><a href="#" data-video="https://www.youtube.com/embed/9_1TDrwaMOc">Fabulous Secret Powers</a></li>
  <li><a href="#" data-video="https://www.youtube.com/embed/1dWjKkF0Zi4">Consequences</a></li>
</ul>

代码有很好的注释，但如果您有任何问题，请告诉我!