2012-08-08 38 views
0

我想在用户单击视频列表中的某个元素时更改嵌入视频的来源。它在FF中正常工作,但在IE和Chrome中都没有任何反应。任何人都可以告诉我如何让这个功能在所有浏览器上正常工作?
继承人我的JavaScript:更改嵌入式视频的src在FF中工作,但不在IE或Chrome中

function updateSource(id) 
{ 
    var video = document.getElementById('video'); 
    video.src=document.getElementById(id).getAttribute('data-value'); 
} 

,这里是我的HTML:

<embed id="video" src="https://www.youtube-nocookie.com/v/h5NeJaWR5WA?version=3&amp;hl=en_US&amp;rel=0&showinfo=0" 
      type="application/x-shockwave-flash" width="480" height="360" 
      allowscriptaccess="never" allowfullscreen="true"></embed> 


<li id="one" class="videoLink" style="margin-top: -1em;" onclick="updateSource(this.id)" 
data-value="https://www.youtube-nocookie.com/v/h5NeJaWR5WA?version=3&amp;hl=en_US&amp;rel=0&showinfo=0"> 
     <img class="youtubeThumb" src="http://img.youtube.com/vi/h5NeJaWR5WA/default.jpg" /> 
     <p class="videoTitle">Video Number One!</p> 
</li> 
<li id="two" class="videoLink" onclick="updateSource(this.id)" 
data-value="http://www.youtube-nocookie.com/v/r19okL-IW6Q?version=3&amp;hl=en_US&amp;rel=0&showinfo=0"> 
     <img class="youtubeThumb" src="http://img.youtube.com/vi/r19okL-IW6Q/default.jpg" /> 
     <p class="videoTitle">Video Number Two!</p> 
</li> 
+0

视频元素在哪?您提供了不完整的HTML。 – 2012-08-08 22:44:17

+0

我发布后就注意到了。现在更新了。 – Jmh2013 2012-08-08 22:47:06

+0

另外,你永远不应该用一个数字开始一个id。这在W3C规范中已明确规定(并且已知会导致问题)。 http://www.w3.org/TR/html4/types.html#type-name。另外,确保ID不重复。 - 为了清楚起见,公平地说,ID的数字通常不会导致问题......除非您开始编写脚本来访问DOM(这就是发生的事情)。 – 2012-08-08 22:50:13

回答

1

解决方法:http://jsfiddle.net/tuDXg/4/

我不相信embed元素支持更新src属性。您应该将其包装在一个div中,并将div的innerHTML更改为具有更新的src的新embed元素。

+0

谢谢!这很好用!我没有想过替换整个'embed'元素。 – Jmh2013 2012-08-08 23:31:26

0

事实上,它看起来像(id值)的数量的问题。它认为你传递一个整数(而不是一个字符串)作为索引(而不是一个ID值)。

+0

我将ID更改为'one'和'two',但我仍然遇到同样的问题。我更新了我的代码。 – Jmh2013 2012-08-08 23:00:37

+0

事实证明,数字作为id是好的。看我的[jsFiddle](http://jsfiddle.net/tuDXg/4/)。 – CgodLEY 2012-08-08 23:16:13

+0

他们可能会工作...但是,不应该这样使用。 – 2012-08-09 00:09:09

相关问题