jQuery和HTML5视频 - 更改源onClick [英] jQuery and HTML5 video - change source onClick

问题描述

我必须使用HTML5和jQuery创建一个交互式视频。我的目标是：

I have to create an interactive video using HTML5 and jQuery. My goal is to:

1. 播放 video1


2. 当 video1 结束时显示 button1 ， onClick 更改到 video2 并隐藏 button1


3. 播放 video2


4. 在结束显示按钮2 ， OnClick 更改为视频3


5. 依此类推......

1. Play video1
2. When video1 ends show button1, onClick change to video2 and hide button1
3. Play video2
4. On Ended show button 2, OnClick change to video 3
5. and so on...

我的问题是，我做错了什么？
这是我的代码。

My question to you is, what am I doing wrong? This is my code.

<section> 
<video autoplay="autoplay" controls="controls" onended="testEnded()">
    <source id="srcWebm" src="media/Madagascar.webm"/>
</video>
</section>

<section id="buttons" class="btnShow">
    <ul id="buttons2" hidden>
        <li><a href="#" id="choice1" onclick="changeSrc1()">VW</a></li>

    </ul>
</section>

函数 testEnded（）位于外部工作表中（与html正确链接）。
脚本如下：

The function testEnded() is in an external sheet (which is linked properly to the html). The script is as follows:

function changeSrc1() {
    $('#srcWebm').attr('src','media/VW.webm');

}

function testEnded() {
        $('#buttons2').removeAttr('hidden');
    }

当我执行 changeSrc1（）没有任何反应。我尝试过拉代码 - 没有错误...

When I execute changeSrc1() nothing happens. I have tried linting the code - no errors...

我该怎么办？
谢谢！

What should I do? Thanks!

推荐答案

我设法做了类似的工作：

I have managed to make something similar work:

<video id="video" autoplay="autoplay" controls="controls">
 <source id="srcWebm" src="media/Madagascar.webm"/>
</video>

var video = document.getElementById("video"); 
video.src = "your link here";

但是，目前这给我提供IE9中的问题。

However, this is currently giving me issues in IE9.

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