У меня есть видео HTML5 в лайтбоксе. Почему воспроизводятся несколько видео и как их остановить?

У меня появляется окно 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. Это продолжается, поэтому у меня может быть много слоев звука друг над другом.

Кто-нибудь может предложить решение?

Обновление: я могу сказать вам, что это не происходит при удалении атрибута автозапуска, который предполагает, что необработанный объект <video> воспроизводится до того, как он может быть обернут в материал js медиаплеера. Мне бы очень хотелось, чтобы функция автозапуска была возможной.


html video fancybox mediaelement.js fancybox-2
person Jodi Warren    schedule 27.06.2012    source источник
comment
Не знаю, насколько это будет актуально для вас, но я только что написал руководство о том, как воспроизводить видео с помощью mediaelement.js в fancyBox picssel.com/play-mp4-videos-with-mediaelement-js-in-fancybox (хотя я использовал только файлы mp4)   -  person JFK    schedule 18.06.2014

Ответы (1)


arrow_upward
0
arrow_downward

Это всего лишь предположение, но я полагаю, что это как-то связано с вашими селекторами.

Когда вы открываете/воспроизводите видео, кажется, что оно также запускает другие видео на странице. Я думаю, что атрибут autoplay на самом деле помогает вам, показывая, что часть вашего кода нацелена на других игроков на странице, которых вы не знаете. хочу возиться.

Я полагаю, что проблема именно в этой строке, потому что она действует глобально на странице, ориентируясь на все аудио- и видеотеги на странице, а не только на аудио-/видео-теги в конкретном элементе:

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

Я бы изменил эту строку, чтобы она предназначалась только для определенных тегов аудио/видео — вы можете сделать это, указав теги аудио/видео и атрибут id или используя jQuery для поиска — у меня нет доступа к вашему коду, так что это, вероятно, победит не работает, но он должен быть близок к тому, что вам нужно:

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

Надеюсь это поможет!

person rmorse    schedule 04.09.2012