javascript - 如何更改onclick视频源？

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 插件将视频播放器添加到我的网页。

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

jsFiddle http://jsfiddle.net/ah1fj7te/

Answer 1

更简单的方法是给您的 <source>对象 ID。并使用 document.getElementById 通过 ID 引用该对象和 document.addEventListener

更改您的 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>