如何通过 link 单击更改视频 js 源
How to change video js source with a link click
我正在尝试创建一个包含少量动漫剧集的简单网站。我有一个关于 javascript 的问题。如何通过单击我的 link 之一来更改视频源?我知道,我必须使用事件侦听器并根据我单击的 link 更改 <source>
,但我不擅长编程或谷歌搜索。
我使用的视频播放器是“video js”。
如果我能得到帮助,我将不胜感激。
视频代码部分:
<div class="sidebar">
<a href="">Episode 1</a>
<a href="">Episode 2</a>
</div>
<div class="main">
<h1>Click the "play button" to start watching!</h1>
<video
id="my_video"
class="video-js"
controls
preload="auto"
width="640"
height="300"
poster="bg2.jpg"
data-setup="{}">
<source src="1-1.mp4" type="video/mp4" />
<source src="1-1.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
我也会添加 javascript 文件,但我的大脑不能在那里写任何有用的东西:)
我认为 Ryan 在 post 中的回答可以帮助您解决这个问题:
How to change video source onclick?
您需要为源提供一个元素 ID,然后使用 getElementbyid 命令对其进行修改,这应该像在这个问题的答案中那样工作
How to change video source onclick?
请查找随附的小演示和代码。
https://codepen.io/hellomartin-the-scripter/pen/GRZLXJv
HTML:
<a href="#" onclick="changeSource('1-1')">Episode 1</a>
<a href="#" onclick="changeSource('1-2')">Episode 2</a>
<a href="#" onclick="changeSource('1-3')">Episode 3</a>
<!-- SOURCE TAGS -->
<source id="video-mp4" src="#" />
<source id="video-webm" src="#" />
脚本:
function changeSource(episode) {
document.getElementById("video-mp4").src=episode + '.mp4';
document.getElementById("video-webm").src=episode + '.webm';
}
你可以这样做:
Javascript:
function ChangeSrc(Src) {
document.getElementById('my_video').src = Src + '.mp4';
}
HTML:
<a onclick="changeSrc('1')">Episode 1</a>
<a onclick="changeSrc('2')">Episode 2</a>
哦抱歉,已经有人回答过类似的问题了。对不起。
我正在尝试创建一个包含少量动漫剧集的简单网站。我有一个关于 javascript 的问题。如何通过单击我的 link 之一来更改视频源?我知道,我必须使用事件侦听器并根据我单击的 link 更改 <source>
,但我不擅长编程或谷歌搜索。
我使用的视频播放器是“video js”。
如果我能得到帮助,我将不胜感激。
视频代码部分:
<div class="sidebar">
<a href="">Episode 1</a>
<a href="">Episode 2</a>
</div>
<div class="main">
<h1>Click the "play button" to start watching!</h1>
<video
id="my_video"
class="video-js"
controls
preload="auto"
width="640"
height="300"
poster="bg2.jpg"
data-setup="{}">
<source src="1-1.mp4" type="video/mp4" />
<source src="1-1.webm" type="video/webm" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
我也会添加 javascript 文件,但我的大脑不能在那里写任何有用的东西:)
我认为 Ryan 在 post 中的回答可以帮助您解决这个问题: How to change video source onclick?
您需要为源提供一个元素 ID,然后使用 getElementbyid 命令对其进行修改,这应该像在这个问题的答案中那样工作
How to change video source onclick?
请查找随附的小演示和代码。
https://codepen.io/hellomartin-the-scripter/pen/GRZLXJv
HTML:
<a href="#" onclick="changeSource('1-1')">Episode 1</a>
<a href="#" onclick="changeSource('1-2')">Episode 2</a>
<a href="#" onclick="changeSource('1-3')">Episode 3</a>
<!-- SOURCE TAGS -->
<source id="video-mp4" src="#" />
<source id="video-webm" src="#" />
脚本:
function changeSource(episode) {
document.getElementById("video-mp4").src=episode + '.mp4';
document.getElementById("video-webm").src=episode + '.webm';
}
你可以这样做:
Javascript:
function ChangeSrc(Src) {
document.getElementById('my_video').src = Src + '.mp4';
}
HTML:
<a onclick="changeSrc('1')">Episode 1</a>
<a onclick="changeSrc('2')">Episode 2</a>
哦抱歉,已经有人回答过类似的问题了。对不起。