Question

我弹出了一个Fancybox2窗口，其中包含以下代码：

var mediaElementPlayers = [];

$("#video_list_widget a.video_link").fancybox({
    padding : 0,
    width:500,
    height: 360,
    closeBtn: false,
    content: '<video width="500" height="360" controls="controls" autoplay="autoplay" preload="auto">
    <source type="video/mp4" src="http://pathtomyvideo.mp4" />

    <source type="video/webm" src="http://pathtomyvideo.webm" />

</video>',
    afterShow: function() {
        var mediaElementPlayers = [];
        $('video,audio').each(function(){
            mediaElementPlayers.push(new MediaElementPlayer(this));
            console.log(mediaElementPlayers);
        });
    },

    beforeClose: function(){
        for (var i=0; i<mediaElementPlayers.length; i++){
            console.log(mediaElementPlayers);
            mediaElementPlayers[i].pause(); // pause
            mediaElementPlayers[i].setCurrentTime(0); // rewind
        }
        $('.fancybox-inner').empty();
    },
    afterClose: function (){
        $('video').remove();
    }


});

我第一次点击a.video_link时会弹出并播放正常。让我们称之为视频1.如果我在不停止视频的情况下关闭灯箱，它就会停止并被杀死。没问题。

如果我再次点击a.video_link，它会弹出并从头开始（让我们称之为视频2），但视频1的音频也会在其上方播放。如果我现在关闭Video 2的灯箱，则视频1的音频会继续播放。如果我第三次打开灯箱，视频2的音频也会启动。这种情况继续存在，因此我可以在彼此之间拥有大量的音频层。

有人可以建议解决方案吗？

更新：我可以告诉你，当删除autoplay属性时不会发生这种情况，这表明原始<video>对象在被包装之前正在播放媒体播放器js的东西。如果可能的话，我真的很喜欢自动播放功能。

Answer 1

这只是猜测，但我想这与你的选择器有关。

当您打开/播放视频时，它似乎也触发了页面上的其他视频 - 我认为autoplay属性实际上是通过向您显示某些代码是针对您的页面上的其他玩家来帮助您的不想搞砸。

我认为这就是问题，因为它在页面上全局采取行动，定位页面上的所有音频和视频标签，而不仅仅是特定元素中的音频/视频标签：

$('video,audio').each(function(){

我会改变这一行，因此它只针对特定的音频/视频标签 - 您可以通过提供音频/视频标签和id属性或使用jQuery进行搜索来实现这一点 - 我无法访问您的代码所以这是可能不会起作用，但它应该接近你需要的东西：

$(this).find('video,audio').each(function(){

希望这有帮助！

我在灯箱中有HTML5视频。为什么要播放多个视频，如何阻止它们？

1 个答案: