如何更改视频源onclick? [英] How to change video source onclick?

问题描述

HTML:

来源 1
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centric" 控制 preload="none" width="640" height="360" poster="" 数据设置="{}"><source src="example_video_1.mp4" type='video/mp4'/></视频>

脚本:

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

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

有谁知道如何更改点击视频的来源?

jsFiddle http://jsfiddle.net/ah1fj7te/

解决方案

给你的 对象一个 ID 会更容易.并使用 document.getElementById<通过 ID 引用对象/code> 和 document.addEventListener

更改您的 HTML:

源1
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centric" 控制 preload="none" width="640" height="360" poster="" 数据设置="{}"><source id="source_video" src="example_video_1.mp4" type='video/mp4'/></视频><脚本>document.getElementById('source_one').addEventListener('click', function() {document.getElementById('source_video').src = 'example_video_2.mp4';});

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>

Script:

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

The video source is not changing after clicking on div. I am using the Video.js plugin to add video player to my webpage.

Does anyone know how to change source of video onclick?

jsFiddle http://jsfiddle.net/ah1fj7te/

解决方案

It would be easier is to give your <source> object an ID. and reference the object by the ID using document.getElementById and document.addEventListener

Change your 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>

这篇关于如何更改视频源onclick?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！