Question

HTML：

<div class="source" id="source_one" onclick="chnageToSourceTwo()">
    Source 1
</div>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="" data-setup="{}">
    <source src="example_video_1.mp4" type='video/mp4' />
</video>

脚本：

function chnageToSourceTwo() {
    document.getElementById("example_video_1").src="example_video_2.mp4";
}

点击div后视频源不会改变。我正在使用Video.js插件将视频播放器添加到我的网页。

有人知道如何更改视频来源吗？

jsFiddle http://jsfiddle.net/ah1fj7te/

Answer 1

为<source>对象提供ID会更容易。并使用document.getElementById和document.addEventListener

按ID引用该对象

更改您的HTML：

<div class="source" id="source_one">Source 1</div>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="640" height="360" poster="" data-setup="{}">
    <source id="source_video" src="example_video_1.mp4" type='video/mp4' />
</video>

<script>
  document.getElementById('source_one').addEventListener('click', function() {
    document.getElementById('source_video').src = 'example_video_2.mp4';
  });
</script>

Answer 2

这是DEMO

这里有一些代码：

var a = document.getElementById('source_one');
a.addEventListener('click',function() {
document.getElementById("example_video_1").children[0].src="example_video_2.mp4";
a.innerHTML = 'Source 2';
alert(document.getElementById('example_video_1').children[0].src); // just to show that it is changed...
});

如果您希望能够切换两个视频，请使用：

DEMO

var a = document.getElementById('source_one');
var b = document.getElementById("example_video_1");
a.addEventListener('click',function() {
    if (document.getElementById("example_video_1").children[0].src == 'http://fiddle.jshell.net/_display/example_video_2.mp4') // replace with real url
 {
    document.getElementById("example_video_1").children[0].src="example_video_1.mp4";
    a.innerHTML = 'Source 1';
    }
    else {
    document.getElementById("example_video_1").children[0].src="example_video_2.mp4";
    a.innerHTML = 'Source 2'; 
    }


});

Answer 3

我注意到你把它标记为jQuery，所以这里是你如何在jQuery中实现它。

$("#example_video_1 source").attr("src", "example_video_2.mp4");

Answer 4

更改此行：

document.getElementById("example_video_1").src="example_video_2.mp4";

有了这个：

document.getElementById("example_video_1").getElementsByTagName('source')[0].src="example_video_2.mp4";

如何更改视频源onclick？

4 个答案: