如何通过单击按钮更改视频源？答案

【问题标题】：How to change video source on click of a button?如何通过单击按钮更改视频源？
【发布时间】：2014-09-12 04:10:30
【问题描述】：

首先，对不起，我是法国人，所以我不会说/写英语...

基本上，我想通过单击按钮更改视频源。现在，简单来说，就是播放视频的按钮。

为此，我查看了该网站上显示的答案并尝试应用它。但它不起作用，我根本不知道为什么......

你能帮帮我吗？

这是正文：

    <video id="myVideo" class="video-js vjs-default-skin"
    preload="auto" width="960" height="396"
    poster="http://video-js.zencoder.com/oceans-clip.png">

        <source id='mp4Source' src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
        <source id='oggSource' src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>

    </video>

    <!-- Bouton Commencer -->
    <input type="button" value="Commencer" id="StartButton">
    <p> Commencer </p>
    </input>

这是脚本：

    $(document).ready(function(){

        videojs("myVideo").ready(function(){
            var myPlayer = this;

            var mp4Vid = document.getElementById('mp4Source');
            var oggVid = document.getElementById('oggSource');

            $('#StartButton').click(function(){

                myPlayer.pause();

                $(mp4Vid).attr('src', "http://techslides.com/demos/sample-videos/small.mp4");
                $(oggVid).attr('src', "http://techslides.com/demos/sample-videos/small.ogv");

                myPlayer.load();
                myPlayer.play();
            });
        });         
    });

我希望它播放“small.mp4”视频，但它播放“ocean-clips.mp4”视频...

非常感谢！

【问题讨论】：

尝试重建整个视频标签。首先，你停止它，然后你得到它outerHTML，然后你摧毁它并重建一切。这是一个坏主意，但可能会奏效。
在 Chrome 上为我工作：JS Fiddle
确实，这很奇怪，因为我也在 Chrome 上尝试过。也许我对其余的 html 代码有问题。我的版本可以在这里看到：thomaspollet.fr/O2/test_video_V3.html你能告诉我它是否适合你吗？ TY
在 FF 32.0 上也可以使用
感谢您的回答！你是在说我发布的代码还是我在之前评论中给出的链接？

标签： javascript jquery html video src

【解决方案1】：

这里是解决方案：

$(function(){
    $('#StartButton').click(function(){
        $('#mp4Source').attr('src', "http://techslides.com/demos/sample-videos/small.mp4");
        $('#oggSource').attr('src', "http://techslides.com/demos/sample-videos/small.ogv");
        $('#myVideo').load();
        $('#myVideo').attr('autoplay','autoplay');
    });
});

或者，如果您想先播放第一个视频然后更改，请使用以下代码：

$(function(){
    $('#myVideo').attr('autoplay','autoplay');
    $('#StartButton').click(function(){
        $('#mp4Source').attr('src', "http://techslides.com/demos/sample-videos/small.mp4");
        $('#oggSource').attr('src', "http://techslides.com/demos/sample-videos/small.ogv");
        $('#myVideo').load();
        $('#myVideo').play();
    });
});

顺便说一下，输入不是一个对标签。正确的注册是

<input type="button" value="Commencer" id="StartButton" />

或

<button id="StartButton">
    Commencer
</button>

【讨论】：

感谢您的回答，其实blex给出的解决方案是有效的，所以我会使用它。