Question

我正在尝试制作一个带有iframe的视频菜单和右侧的视频列表，这些标签会使iframe的内容在点击时发生变化。我的解决方案适用于chrome，但在mozila和IE上失败。

使用jquery有什么我应该做的吗？

为何加入我们？
加入这个计划只需要一点点演示
欢迎来到H＆amp; H中心？
我们欢迎您来到Happy＆amp;健康中心
我们的导师
我们的教练会告诉您这个课程对您有多大益处
公开

我试图定位＆＃34;主要视频＆＃34;的ID但它不适用于谷歌浏览器以外的其他浏览器

非常感谢

Answer 1

以下是一个简单的例子，这是 FIDDLE 在最新的Chrome，Firefox＆amp; IE。

<ul>
  <li data-href="http://youtube.com/embed/XzbdY_rPtjw">Video 1</li>
  <li data-href="http://youtube.com/embed/qr3dWscslo8">Video 2</li>
  <li data-href="#">Video 3</li>
  <li data-href="#">Video 4</li>
  <li data-href="#">Video 5</li>
</ul>

<iframe src="http://youtube.com/embed/XzbdY_rPtjw"></iframe>

iframe {
  width: 460px;
  height: 300px;
  border: 1px solid #eee;
}
ul {
  list-style: none;
}
li {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}
li:hover {
  color: #666;
}

(function($) {
  $('ul li').click(function() {
    $('iframe').attr('src',$(this).data('href')); 
  });
})(jQuery);

Answer 2

实际上，除非确实需要，否则你真的不需要javascript。人们经常忽略<iframe>只是一个框架，因此可以通过target属性进行定位。这是一个例子

<iframe width="500" height="500" src="about:blank" name="testframe"></iframe>

<a href="http://test.com" target="testframe">Test</a>
<a href="http://qwerty.com" target="testframe">Qwerty</a>

在此处查看此行动：http://jsfiddle.net/LLnEU/

交换iframe src以更改其中的视频

2 个答案: