YouTube iframe api в рамках модуля.

Форум /

Всем доброго времени суток. У кого есть готовый вариант модуля с YouTube iframe api https://developers.google.com/youtube/iframe_api_reference?hl=ru#Requirements ? Или может кто-то подскажет, как его разместить в рамках модуля? А то помещая код в модуль, он или не выполняется или выдаёт ошибку, хотя при инлайновой вставке на страницу, все нормально.

8 years ago

tadatuta

Должно быть что-то типа:

// youtube.deps.js
({
    mustDeps: { block: 'i-bem', elem: 'dom' },
    shouldDeps: [
        { block: 'loader', mods: { type: 'js' } },
        'objects'
    ]
})

// youtube.bemhtml.js
block('youtube')(
    js()(function() {
        var ctx = this.ctx,
            js = applyNext() || {},
            id = (ctx.attrs || {}).id;

        return this.extend(js, {
            id: id || 'youtube-' + this.generateId(),
            width: ctx.width || 640,
            height: ctx.height || 390,
            videoId: ctx.id
        });
    }),
    attrs()(function() {
        return {
            id: apply('js').id
        };
    })
);

// youtube.js
modules.define('youtube', ['i-bem__dom', 'loader_type_js', 'objects'],
    function(provide, BEMDOM, loader, objects) {

var API = 'https://www.youtube.com/iframe_api';

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                loader(API, this._onApiLoaded.bind(this));
            }
        }
    },
    getPlayer: function() {
        return this.player;
    },
    _onApiLoaded: function() {
        var _this = this;

        window.onYouTubeIframeAPIReady = function() {
            _this.player = new YT.Player(_this.params.id, objects.extend(
                _this.params, {
                    events: {
                        onReady: _this._onPlayerReady.bind(_this),
                        onStateChange: _this._onPlayerStateChange.bind(_this)
                    }
                })
            );
        }
    },
    _onPlayerReady: function(e) {
        return this.emit('ready', e);
    },
    _onPlayerStateChange: function(e) {
        return this.emit('change', e);
    }
}));

});

Дальше можно общаться с блоком через его собственные события ready и change.

8 years ago

Jekins

Спасибо огромное, сейчас попробую.

8 years ago

Jekins

А если используется на проекте CDN bem-components, то первые 2 файла как будут выглядить в html?

8 years ago

tadatuta

При использовании dist-а, депсы не нужны — там уже все в комплекте из коробки. А разметка получится какая-то такая:

<div class="youtube i-bem" data-bem='{"youtube":{"id":"youtube-uniq14653857927551","width":640,"height":390,"videoId":"M7lc1UVf-VE"}}' id="youtube-uniq14653857927551"></div>

8 years ago

Jekins

Ага, понял. Есть еще момент один. Вы написали, что теперь можно использовать его собственные события ready и change, а в деле это как выглядит, что-то типо:

this.on('ready', function(){
      this.playVideo();
});

Если да, то ошибку выдает, как вот к примеру вызвать вот это событие, как в доках гугла:

function onPlayerReady(event) {
     event.target.playVideo();
}

8 years ago

tadatuta

this.on('ready', function() {
    this.getPlayer().playVideo();
});

8 years ago

tadatuta

Либо можно забирать оригинальный объект события из второго аргумента:

this.on('ready', function(e, data) {
    data.target.playVideo();
});

8 years ago

Jekins

Спасибо! Вы просто волшебник!))

8 years ago

Jekins

Если у меня на странице несколько блоков, где должно инициализнуться проигрывание видео при наведении на этот блок и после анховера произойти player.destroy(), то как тогда здесь сделать 2 функции, одна из которых делает player.playVideo(), а другая player.destroy()? Что-то я уже несколько часов с этим борюсь, но ничего не получается, еще одна сложность в том, что блоков таких на странице много и там похоже возникают проблемы с кэшем этих блоков.

P.S. сам блок состоит из одного тега и я в БЭМ документации не нашел, как очистить кэш блока, а не элемента

8 years ago

tadatuta

Напиши, пожалуйста, DOM-структуру, я пока не до конца понимаю задачу.

8 years ago

Jekins

Если упростить, то дом примерно такой:

<div class="article i-bem" data-bem='{"article":{}}'>
    <div class="article__bg youtube i-bem" data-bem='{"youtube":{"id":"youtube-uniq146","videoId":"M7lc1UVf-VE"}}' id="youtube-uniq146"></div>
    <div class="article__content">
        Здесь контент блока, который лежит над фоном.
    </div>
</div>

<div class="article i-bem" data-bem='{"article":{}}'>
    <div class="article__bg youtube i-bem" data-bem='{"youtube":{"id":"youtube-uniq425","videoId":"M7lc1UVf-VE"}}' id="youtube-uniq425"></div>
    <div class="article__content">
        Здесь контент блока, который лежит над фоном.
    </div>
</div>

Таких блоков много, подгружаться они потом будут аяксом. У каждого блока лежит свой id видео, которое при наведении на блок article, должно начать проигрываться и при анховере исчезать. Для этого в ютуб апи я нашел функцию destroy().

Модуль блока article выглядит примерно так:

modules.define('article', ['i-bem__dom', 'youtube'], function(provide, BEMDOM, youtube) {

provide(BEMDOM.decl(this.name,
    {
        onSetMod : {
            'js' : {
                'inited': function() {
                    var _this = this;

                    $(this.domElem).hover(function(){
                        _this.findBlockInside('youtube').setMod('play');
                    }, function() {
                        _this.findBlockInside('youtube').delMod('play');
                    });
                }
            }
        }
    }
));

});

А модуль youtube, написанный вами, сейчас выглядит примерно так:

modules.define('youtube', ['i-bem__dom', 'loader_type_js', 'objects'],
    function(provide, BEMDOM, loader, objects) {

var API = 'https://www.youtube.com/iframe_api';

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
            }
        },
        'play' : {
            'true': function() {
                loader(API, this._onApiLoaded.bind(this));

                this.on('ready', function(e, data) {
                    data.target.playVideo();
                });
            },
            '': function() {
                this.getPlayer().destroy();
            }
        }
    },
    getPlayer: function() {
        return this.player;
    },
    _onApiLoaded: function() {
        var _this = this;

        window.onYouTubeIframeAPIReady = function() {
            _this.player = new YT.Player(_this.params.id, objects.extend(
                _this.params, {
                    events: {
                        onReady: _this._onPlayerReady.bind(_this),
                        onStateChange: _this._onPlayerStateChange.bind(_this)
                    }
                })
            );
        }
    },
    _onPlayerReady: function(e) {
        return this.emit('ready', e);
    },
    _onPlayerStateChange: function(e) {
        return this.emit('change', e);
    }
}));

});

Естественно это не работает и очень нужна ваша помощь, что бы заставить это работать, а то я уже начинаю писать монстра на jQuery)))

8 years ago

tadatuta

Предположу, что проблема в том, что youtube переписывает DOM-узел в момент инициализации плеера (заменяя его на iframe и это ломает i-bem). Исправить это просто, достаточно добавить вложенный узел для плеера:

<div class="article i-bem" data-bem='{"article":{}}'>
    <div class="youtube article__bg i-bem" data-bem='{"youtube":{"id":"youtube-uniq14658310717601","width":640,"height":390,"videoId":"M7lc1UVf-VE"}}'>
        <div class="youtube__player" id="youtube-uniq14658310717601"></div>
    </div>
    <div class="article__content">Здесь контент блока, который лежит над фоном.</div>
</div>
<div class="article i-bem" data-bem='{"article":{}}'>
    <div class="youtube article__bg i-bem" data-bem='{"youtube":{"id":"youtube-uniq14658310717602","width":640,"height":390,"videoId":"M7lc1UVf-VE"}}'>
        <div class="youtube__player" id="youtube-uniq14658310717602"></div>
    </div>
    <div class="article__content">Здесь контент блока, который лежит над фоном.</div>
</div>

По коду article на мой вкус очень дорого убивать и пересоздавать плеер на ховер/анховер, если он уже был создан. Будет гораздо дешевле просто останавливать воспроизведение и дописать стилей типа

.youtube__player {
    display: none;
}

.youtube_play .youtube__player {
    display: block;
}

А JS код блока youtube можно чуть поправить, чтобы на руках всегда был промис с объектом плеера:

modules.define('youtube', ['i-bem__dom', 'loader_type_js', 'objects'],
    function(provide, BEMDOM, loader, objects) {

var API = 'https://www.youtube.com/iframe_api';

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                var _this = this;

                // даже если плеер еще не готов, мы уже можем обращаться к его промису через this.getPlayer()
                this._api = new Promise(function(resolve, reject) {
                    _this.on('ready', function(e, data) {
                        resolve(data.target);
                    });
                });

                loader(API, this._onApiLoaded.bind(this));
            }
        },
        // чуть сократил код
        play: function(modName, modVal) {
            this.getPlayer().then(function(player) {
                player[modVal ? 'playVideo' : 'stopVideo']();
            });
        }
    },
    getPlayer: function() {
        return this._api;
    },
    _onApiLoaded: function() {
        var _this = this;

        window.onYouTubeIframeAPIReady = function() {
            _this.player = new YT.Player(_this.params.id, objects.extend(
                _this.params, {
                    events: {
                        onReady: _this._onPlayerReady.bind(_this),
                        onStateChange: _this._onPlayerStateChange.bind(_this)
                    }
                })
            );
        }
    },
    _onPlayerReady: function(e) {
        return this.emit('ready', e);
    },
    _onPlayerStateChange: function(e) {
        return this.emit('change', e);
    }
}));

});

8 years ago

Jekins

Спасибо за помощь, сейчас попробую сделать.

8 years ago

Jekins

Все же осталась одна проблемка, таких блоков много и почему-то видео инитится только на самом последнем блоке.

8 years ago

Jekins

И еще, я хотел делать инициализацию плеера и дестракт его при ховере, так как мне кажется будет слишком напряжно для браузера инициализнуть сразу штук 30 видео, так как блоков article на странице много

8 years ago

tadatuta

Добавил комменты к ключевым изменениям в коде.

modules.define('youtube', ['i-bem__dom', 'loader_type_js', 'objects'],
    function(provide, BEMDOM, loader, objects) {

// загружаем API один раз, а не для каждого инстанса блока
loader('https://www.youtube.com/iframe_api');

// все инстансы используют единый промис, который будет разрезолвлен, когда API `youtube`-а будет готово
var iframeReady = new Promise(function(resolve) {
    window.onYouTubeIframeAPIReady = resolve;
});

provide(BEMDOM.decl(this.name, {
    onSetMod: {
        js: {
            inited: function() {
                var _this = this;

                this._api = new Promise(function(resolve, reject) {
                    _this.on('ready', function(e, data) {
                        resolve(data.target);
                    });
                });

                iframeReady.then(function() {
                    new YT.Player(_this.params.id, objects.extend(
                        _this.params, {
                            events: {
                                onReady: _this._onPlayerReady.bind(_this),
                                onStateChange: _this._onPlayerStateChange.bind(_this)
                            }
                        })
                    );
                });
            }
        },
        play: function(modName, modVal) {
            this.getPlayer().then(function(player) {
                player[modVal ? 'playVideo' : 'stopVideo']();
            });
        }
    },
    getPlayer: function() {
        return this._api;
    },
    _onPlayerReady: function(e) {
        return this.emit('ready', e);
    },
    _onPlayerStateChange: function(e) {
        return this.emit('change', e);
    }
}, {
    // включаем отложенную инициализацию (см. https://ru.bem.info/technology/i-bem/v2/i-bem-js-init/#Инициализация-по-событию-ленивая-инициализация)
    live: function() {
        // блок будет проинициализирован либо по mouseover, либо когда его явно потребует другой блок (например, через findBlockInside)
        this.liveInitOnEvent('mouseover');
    }
}));

});

8 years ago

Jekins

Заработало!)) Спасибо большое

Чтобы оставлять комментарии, необходимо авторизоваться.