Question

首先，抱歉，我是法国人，所以我不会说/写英语很好......

基本上，我想在点击按钮时更改视频源。现在，为了简单起见，它就是播放视频的按钮。

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

你能帮我吗？

这是身体：

    <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”视频......

非常感谢！

Answer 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>

如何在点击按钮时更改视频源？

1 个答案: