API YouTube не работает с iPad/iPhone/устройством без Flash

Этот фрагмент кода отлично работает в браузерах для DESKTOP (код предоставлен @Rob-W), щелкните миниатюру, и соседнее видео начнет воспроизводиться с использованием API YouTube.

HTML

<div id="tabs2">
    <div>
    <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
    <iframe id="frame1" width="640" height="390" frameborder="0" title="YouTube video player"type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
    </div>

    <div>
        <img class='thumb' src='http://i2.cdnds.net/11/34/odd_alan_partridge_bio_cover.jpg'>
   <iframe id="frame2" width="640" height="390" frameborder="0" title="YouTube video player"type="text/html"src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
    </div>
</div>

CSS

#tabs2 div {
    position: relative;
}
/* For security reasons, an element cannor be placed over a frame */
/*.thumb {
    position: absolute;
}*/    
.play {
    border: 3px solid red;
}

JS

function getFrameID(id) {
    var elem = document.getElementById(id);
    if (elem) {
        if (/^iframe$/i.test(elem.tagName)) return id; //Frame, OK
        // else: Look for frame
        var elems = elem.getElementsByTagName("iframe");
        if (!elems.length) return null; //No iframe found, FAILURE
        for (var i = 0; i < elems.length; i++) {
            if (/^https?:\/\/(?:www\.)?youtube(?:-nocookie)?\.com(\/|$)/i.test(elems[i].src)) break;
        }
        elem = elems[i]; //The only, or the best iFrame
        if (elem.id) return elem.id; //Existing ID, return it
        // else: Create a new ID
        do { //Keep postfixing `-frame` until the ID is unique
            id += "-frame";
        } while (document.getElementById(id));
        elem.id = id;
        return id;
    }
    // If no element, return null.
    return null;
}

// Define YT_ready function.
var YT_ready = (function() {
    var onReady_funcs = [],
        api_isReady = false;
/* @param func function     Function to execute on ready
         * @param func Boolean      If true, all qeued functions are executed
         * @param b_before Boolean  If true, the func will added to the first
                                     position in the queue*/
    return function(func, b_before) {
        if (func === true) {
            api_isReady = true;
            for (var i = 0; i < onReady_funcs.length; i++) {
                // Removes the first func from the array, and execute func
                onReady_funcs.shift()();
            }
        }
        else if (typeof func == "function") {
            if (api_isReady) func();
            else onReady_funcs[b_before ? "unshift" : "push"](func);
        }
    }
})();
// This function will be called when the API is fully loaded

function onYouTubePlayerAPIReady() {
    YT_ready(true)
}

var players = {};
//Define a player storage object, to enable later function calls,
//  without having to create a new class instance again.
YT_ready(function() {
    $(".thumb + iframe[id]").each(function() {
        var identifier = this.id;
        var frameID = getFrameID(identifier);
        if (frameID) { //If the frame exists
            players[frameID] = new YT.Player(frameID, {
                events: {
                    "onReady": createYTEvent(frameID, identifier)
                }
            });
        }
    });
});

// Returns a function to enable multiple events
function createYTEvent(frameID, identifier) {
    return function (event) {
        var player = players[frameID]; // player object
        var the_div = $('#'+identifier).parent();
        the_div.children('.thumb').click(function() {
            var $this = $(this);
            $this.fadeOut().next().addClass('play');
            if ($this.next().hasClass('play')) {
                player.playVideo();
            }
        });
    }
}
// Load YouTube Frame API
(function(){ //Closure, to not leak to the scope
  var s = document.createElement("script");
  s.src = "http://www.youtube.com/player_api"; /* Load Player API*/
  var before = document.getElementsByTagName("script")[0];
  before.parentNode.insertBefore(s, before);
})();

JSFiddle

Проблема в том, что на iOS-устройствах не воспроизводится (из-за отсутствия Flash player, думаю, просто зависает).

Я могу заставить его воспроизводиться, нажав на видео еще раз, что предложит воспроизвести его с помощью QuickTime.

Но как заставить его автоматически воспроизводиться с QuickTime?


person SparrwHawk    schedule 23.01.2012    source источник
comment
Примечание: кажется, что stopPlayer() работает, однако я не могу возобновить воспроизведение после того, как остановил его!!! он играет 1/2 секунды и останавливается сам по себе   -  person Simon_Weaver    schedule 22.03.2013


Ответы (3)


К сожалению, это невозможно в iOS. Согласно документации Apple,

«... встроенные медиафайлы не могут автоматически воспроизводиться в Safari на iOS — пользователь всегда инициирует воспроизведение».

Ограничение действует независимо от сетевого подключения, так как это решение зависит как от пропускной способности, так и от взаимодействия с пользователем.

Обновление, октябрь 2016 г.. Стоит отметить, что теперь, когда iOS 10 вышла и завоевала значительную долю рынка, люди могут использовать изменения в способе воспроизведения видео на iOS 10, чтобы получить поведение автозапуска. Если в видео нет звуковых дорожек или тег отключен, возможно автовоспроизведение. Дополнительную информацию можно найти в этом блоге webkit. API YouTube может справиться с этим в ближайшее время.

person Aaron    schedule 27.01.2012
comment
Спасибо, Тегерил, я подозреваю, что ты прав. Я награжу тебя наградой, если никто не ответит в течение нескольких дней. У меня есть еще один вопрос, похожий на этот, как вы думаете, вы тоже можете ответить на него? Большое спасибо stackoverflow.com/questions/9033080/ - person SparrwHawk; 27.01.2012
comment
Несколько минут назад я нашел еще одну ссылку, но затем у меня произошел сбой в браузере. Где-то есть обсуждение на YouTube, в конечном итоге подтверждающее, что это так :( - person Aaron; 27.01.2012
comment
любой html5 video API будет работать только после инициализации пользователем. вот такие дела пока. - person amit; 31.01.2012
comment
Это устаревшая информация, вы можете либо накатить собственное решение, либо использовать официальный фреймворк: github. com/youtube/youtube-ios-player-helper - person ABeanSits; 17.08.2016
comment
@ABeanSits — весь этот пост посвящен автовоспроизведению видео в веб-браузере, а не с помощью собственного SDK. - person Aaron; 23.08.2016
comment
@Tegeril конечно, но даже официальное решение использует веб-представление с iFrame для воспроизведения видео. Вот почему одни и те же правила применяются к обоим. - person ABeanSits; 08.09.2016
comment
@ABeanSits работает с тем же API, но некоторые его части не работают в iOS. Автоигра — одна из таких частей. Чтобы было ясно. Собственный SDK может воспроизводиться автоматически, потому что он управляет собственным веб-просмотром. Вопрос выше касается простой загрузки любой случайной веб-страницы в мобильное сафари и ожидания автозапуска, который не работает. - person Aaron; 08.09.2016

Начиная с iOS 4, UIWebView имеет свойство mediaPlaybackRequiresUserAction. Я не могу сказать, реализуете ли вы это в Интернете или в нативном приложении, но установка этого параметра на NO в нативном приложении должна позволить работать автовоспроизведению.

person Jeff Kelley    schedule 29.01.2012
comment
Привет, Джефф, это чисто в Интернете, как показано в опубликованном мной JSFiddle. Не могли бы вы показать мне, как я могу реализовать это с помощью скрипки? Спасибо - person SparrwHawk; 29.01.2012
comment
Вы не можете, если это в Интернете; это относится только к родным приложениям. - person Jeff Kelley; 29.01.2012
comment
так что это в основном говорит о том, что если вы встраиваете сафари в свое собственное приложение, у вас может быть автоматическое воспроизведение мультимедиа. поэтому Chrome для iPad мог бы установить для этого параметра значение false, если бы захотел, но похоже, что они этого не сделали. - person Simon_Weaver; 21.03.2013

Вы можете использовать API YouTube iFrame на iOS.

person Jeff Kelley    schedule 28.01.2012
comment
Он использует API YouTube iFrame. Он успешно переходит от Chrome YouTube к собственному значку воспроизведения iOS, но этот API фактически не запускает воспроизведение. - person Aaron; 29.01.2012