Question

使用HTML，CSS和/或Javascript这似乎是一项简单的任务，但我不能通过谷歌搜索或在Stack Overflow上咨询数据库来解决问题。

我想要的，就是在左边有几排文字命名视频。当您单击其中一个视频名称时，视频将显示在右侧或上方。每次单击视频名称时，视频都会显示在右侧的同一个框中。所以，它有点像切换频道，而文本锚点就是你的遥控器。

一个例子是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

我的问题是：可以创建一个简单的视频播放器，通过点击文本锚点来响应，或者这太复杂了（至少对我的理解水平来说，即我不做php）。谢谢你的帮助。

巴里格里克

Answer 1

好的工作原理，你需要为视频创建一个容器，然后在通过JavaScript / jQuery点击它们时让一组链接更改视频源。

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

演示 - jsFiddle

＆＃13;

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

＆＃13;

#videoContainer {
  height: 350px;
  width:600px;
}

#videoContainer iframe {
  width:100%;
  height: 100%;
}

＆＃13;

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

＆＃13;

代码非常评论，但如果您有任何问题，请告诉我们！

视频库：点击文字，显示视频

1 个答案: