Событие Click не запускается через youtube iframe в мобильном сафари

Ответ 1

Итак, я немного поиграл с iframe API и нашел решение. Это вроде хакки... но не совсем. Когда пользователь нажимает на видео для воспроизведения, document.activeElement становится iframe. Когда пользователь нажимает кнопку "Готово", document.activeElement === document.body. Поэтому, когда видео начинает воспроизводиться, мы периодически проверяем, возвращается ли активный элемент в тело. В этот момент единственным решением, которое я нашел, было перерисовать iframe. В этом примере я уничтожаю() видео и воссоздаю его с помощью iframe API. Я также попытался клонировать iframe и с успехом заменил его (я оставил этот код там, чтобы вы могли его увидеть):

http://jsfiddle.net/ryanwheale/SwGH5/105/

Это не лучшее решение, но оно работает. Кроме того, чтобы дать объяснение тому, что [я думаю] происходит - iOS захватывает любой видеоконтент (Safari или Chrome) и воспроизводит его с помощью собственного видеопроигрывателя. Любой тип функциональности ОС, как это, имеет место "над" браузером, если вы будете - выше любого z-индекса... полностью вне браузера. Когда пользователь нажимает "done", тип родного проигрывателя масштабируется, как если бы он был повторно имплантирован на страницу. Мое лучшее предположение, что родной игрок все еще болтает "над" браузером... таким образом делая что-нибудь под ним недоступным. Тот факт, что кнопка кажется сверху, - это просто аномалия... из-за отсутствия лучшего описания.

Ответ 2

РЕДАКТИРОВАТЬ: Решение Ryan Wheale - лучшее решение этой проблемы и будет работать в большинстве случаев.

Из документации яблок:

На устройствах на базе iOS с небольшими экранами, таких как iPhone и iPod touch-video, всегда воспроизводится в полноэкранном режиме, поэтому холст нельзя накладывать на воспроизводящее видео. На устройствах на базе iOS с большими экранами, например iPad, вы можете накладывать холст-графику на воспроизведение видео, как можно на рабочем столе.

То же самое касается и " проигрываемого видео". В этой статье четко указано, что это невозможно.

Обход проблемы:

Вы можете отсоединить и снова присоединить элемент iframe на webkitfullscreenchange. Но это не сработает для иностранного iframe. Браузер не позволит вам манипулировать iframe DOM bec. междоменной политики. И даже если бы это было так, вы могли бы только скрыть наложение видео, чтобы дойти до вашей кнопки.

Таким образом, единственным решением является просмотр состояния YT.PlayerState.ENDED с помощью API iFrame YouTube, а затем уничтожая и воссоздавая игрока. Но не волнуйтесь, что он играет гладко.

window.onYouTubeIframeAPIReady = function () {
    var video = {
        player: null,
        create: function () {
            // first destroy if we already have the player
            if (video.player) { video.player.destroy(); }
            // create the player
            video.player = new YT.Player('ytp', {
                videoId: '9u_hp7zPir0',
                width: '620',
                height: '290',
                events: {
                    'onStateChange': video.onStateChange
                }
            });
        },
        onStateChange: function (event) {
            // YT.PlayerState.ENDED » exiting full screen
            if (event.data === 0) { video.create(); }
        }
    };
    video.create();
};

Вот рабочий скрипт.

Ответ 3

Если вы не можете заставить его работать с обычным iframe, вам может потребоваться использовать mediaelement.js - который может обернуть Youtube API в оболочку HTML5 Media API. Это отлично работает на сафари на ios - попробуйте пример Youtube на mediaelementjs.com.

Все, что вам нужно сделать, это добавить mejs js/css и поместить свое видео youtube в качестве источника в свой тег видео, вот пример разметки, сделанный с mediaelementjs.com:

<script src="jquery.js"></script>
<script src="mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="mediaelementplayer.css" />
<video width="640" height="360" id="player1" preload="none">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

Затем запустите плеер так:

jQuery(document).ready(function($) {
    $('#player1').mediaelementplayer();
});

Если вы хотите добавить свою кнопку ontop игрока mejs, она будет работать нормально, просто установите z-index достаточно высоким. Если вы хотите использовать обычную кнопку воспроизведения, вы можете также рассмотреть стиль существующего, который поставляется с mejs.

Ответ 4

В комментариях от ответа @CullenJ возможно, это может быть из-за некоторой проблемы в браузерах устройств iOS, не вызывающих событие click на элементах iframe. В этом случае вам нужно будет изменить:

document.getElementById('btn').onclick = function() {
    alert('clicked');
}

Что-то вроде этого (как ответ на @smnh):

$('#btn').on('click tap touchstart', function() {
    alert('clicked');
});