更改嵌入视频的src在FF中有效,但在IE或Chrome中无效

时间:2012-08-08 22:41:30

标签: javascript html5 video cross-browser embed

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

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>

2 个答案:

答案 0 :(得分:1)

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

我不相信embed元素支持更新src属性。你应该将它包装在一个div中,并使用更新的src将div的innerHTML更改为新的embed元素。

答案 1 :(得分:0)

实际上,看起来数字(id值)确实是个问题。它认为你传递一个整数(不是字符串)作为索引(不是id值)。