0

标题解释了大部分内容。我有一个链接列表，这些链接指向我通过 javascript 在页面中加载的视频和音频文件。html 看起来有点像这样：

<html>
...
<body>
...
<div id="main">
 <ul>
  <li><a class="video" href="video/file1">video 1</a></li>
  <li><a class="audio" href="audio/file1">video 1</a></li>
 </ul>
</div>
...
</body>
</html>

然后我的 javascript 如下所示。这个想法是，当您单击音频链接时，它将插入一个音频标签，当您单击一个视频链接时，它将插入一个视频标签。单击页面上的任意位置播放/暂停音频/视频。除了应该处理“结束”事件的底部代码块之外，一切正常。这个想法是当媒体完成后你回到链接列表。但是，似乎该事件根本不会绑定。

$(document).ready(function() {

    var mediablock;
    var playing = false;

    $(".video").on("click", function() {
        var link = $(this).attr("href");
        $("#main").hide();
        $("body").append('<video id="videoblock" width="'+$(window).width()+'" height="'+$(window).height()+'"><source src="'+link+'.mp4" type="video/mp4"><source src="'+link+'.ogg" type="video/ogg"></video>');
        mediablock = $("#videoblock").get(0);
        mediablock.play();
        playing = true;
        return false;
    });

    $(".audio").on("click", function() {
        var link = $(this).attr('href');
        $("#main").hide();
        $("body").append('<audio id="audioblock" width="'+$(window).width()+'"  height="'+($(window).height()-50)+'"<source src="'+link+'.mp3" type="audio/mpeg"><source src="'+link+'".ogg type="audio/ogg"></audio>');
        mediablock = $("#audioblock").get(0);
        mediablock.play();
        playing = true;
        return false;
    });

    $(document).on("click", function() {
        if (playing)
        {
            mediablock.pause();
            playing = false;
        }
        else
        {
            mediablock.play();
            playing = true;
        }
    });

    $(document).on("ended", "audio, video", function() {
        alert('test');
    });

});

我尝试了不同的绑定事件的方法。如上和如下：

$("audio, video").bind("ended", function() {
    alert('test');
});

$("audio, video").on("ended", function() {
    alert('test');
});

在所有这些尝试之后，我对如何正确捕获此事件一无所知。请帮我解决这个问题，以便我可以继续使用我的音频/视频 webapp。

提前致谢！:)

编辑：我通过不重新创建视频/音频标签而仅通过重新分配该标签的来源解决了这个问题。我给音频/视频标签内的两个源标签一个类，然后更新了这些源标签的 src 属性。然后事件绑定按预期工作。

4

0 回答 0