如何更改视频源onclick？答案

【问题标题】：How to change video source onclick?如何更改视频源onclick？
【发布时间】：2016-07-11 06:34:24
【问题描述】：

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/

【问题讨论】：

标签： javascript jquery video

【解决方案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>

【讨论】：

【解决方案2】：

改变这一行：

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

有了这个：

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

【讨论】：

【解决方案3】：

我注意到你将它标记为 jQuery，所以这是你将如何在 jQuery 中实现它的方法。

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

【讨论】：

您需要从选择器中删除“来源”。
你确定吗？看起来源标签是有 src 属性的。

【解决方案4】：

这是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'; 
    }


});

【讨论】：