2

我弹出了一个 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 的音频也在其顶部播放。如果我现在关闭视频 2 的灯箱，视频 1 的音频会继续播放。如果我第三次打开灯箱，视频 2 的音频也会开始播放。这一直持续下去，所以我可以有很多层的音频。

任何人都可以提出解决方案吗？

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

4

1 回答 1

0

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

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

我想这就是问题所在，因为它在页面上全局作用于页面上的所有音频和视频标签，而不仅仅是特定元素中的音频/视频标签：

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

我将更改此行，使其仅针对特定的音频/视频标签-您可以通过提供音频/视频标签和 id 属性或使用 jQuery 进行搜索来执行此操作-我无权访问您的代码，因此这可能不会t 工作，但它应该接近你需要的：

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

希望这可以帮助！

于 2012-09-04T10:52:29.710 回答