Предотвратить API-интерфейс YouTube iframe для управления качеством воспроизведения (разрешение) на мобильных устройствах - PullRequest
Новая
       19

Предотвратить API-интерфейс YouTube iframe для управления качеством воспроизведения (разрешение) на мобильных устройствах

0 голосов
/ 24 июня 2018

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

Я использую iframe api и создал демонстрацию для демонстрации кода: https://ancientoffbeatrotation - five-nine.repl.co/

HTML 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <script src="index.js"></script>
    <iframe id="ytplayer" type="text/html" style="position:absolute; top:0px; left:0px; bottom:0px; right:10px; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" src="https://www.youtube-nocookie.com/embed/_r3LynEZuko?playlist=_r3LynEZuko&rel=0&autoplay=1&playsinline=1&controls=0&showinfo=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  </body>
</html>

JS 

    var tag = document.createElement('script');
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;        
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer', {
             events: {
                'onReady': onPlayerReady,
                'onPlaybackQualityChange': onPlayerPlaybackQualityChange,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady() {            
        player.playVideo();
        player.mute();
    }
    function onPlayerPlaybackQualityChange(event) {
      var available_qualities = player.getAvailableQualityLevels();
      alert("Available qualities are" + available_qualities);

      var displayed_quality= player.getPlaybackQuality();
      alert("Used quality is" + displayed_quality);
    }
    function onPlayerStateChange(event) {
        if(event.data === YT.PlayerState.PLAYING){
        event.target.setSize( width=7000, height=10000 ); //huge dimensions
      }

    }

Примечание : я использовал repl.it вместо jsfiddle или codenpen, потому что два последних используют iframe, поэтому он изменяет / изменяет пиксели, доступные для iframe youtube, что может сделать наши наблюдения неверными. Вместо этого repl.it не использует iframe и развертывает настоящую HTML-страницу, поэтому мы можем больше доверять ей в этом эксперименте.

Теоретически

Youtube заявляет, что будет использовать высоту видео для установки разрешения (даже если оно может изменить его в зависимости от других факторов, само по себе оно может определять скорость соединения ...):

В списке ниже приведены уровни качества воспроизведения, которые соответствуют разные стандартные размеры плеера. Мы рекомендуем вам установить высоту вашего видео проигрывателя к одному из значений, перечисленных ниже, и что вы Увеличьте размер вашего проигрывателя, чтобы использовать соотношение сторон 16: 9.

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

маленький: рост игрока 240px, а размеры игрока не менее 320px на 240px для 4: 3 соотношение сторон. средний: высота игрока 360px, размеры игрока 640 на 360 пикселей (для формата 16: 9) или 480 на 360 пикселей (для 4: 3) соотношение сторон).

большой: высота игрока 480px, а размеры игрока 853 на 480 пикселей (для формата 16: 9) или 640 на 480 пикселей (для 4: 3) соотношение сторон).

hd720: высота игрока составляет 720 пикселей, а размеры игрока 1280 на 720 пикселей (для формата 16: 9) или 960 на 720 пикселей (для 4: 3) соотношение сторон).

hd1080: высота проигрывателя составляет 1080 пикселей, а размеры проигрывателя 1920 на 1080 пикселей (для формата 16: 9) или 1440 на 1080 пикселей (для Соотношение сторон 4: 3).

highres: высота игрока больше 1080px, это означает, что соотношение сторон плеера больше, чем 1920px на 1080px. по умолчанию: YouTube выбирает подходящее качество воспроизведения.

Этот параметр эффективно восстанавливает уровень качества по умолчанию состояние и сводит на нет все предыдущие попытки установить качество воспроизведения, используя функции cueVideoById, loadVideoById или setPlaybackQuality.

Я настаиваю на том, что я не использую в демонстрационном коде метод setPlaybackquality, который не работал вообще в течение последних нескольких месяцев, даже если он все еще недокументирован (см. здесь или здесь ), так что дело не в я думаю, что проблема метода setPlaybackQuality.

На практике: суть ошибки

Я просто устанавливаю размер с помощью setSize (), и YouTube соответственно меняет разрешение видео. И я наблюдаю, что изменение его на рабочем столе прекрасно работает в соответствии с этой таблицей, предоставленной Google . но на мобильных устройствах это похоже на работу ... до определенного момента это похоже на "потолок", разрешение, максимально допустимое для Youtube, основанное на неизвестных и очень странных (см. мои эксперименты ниже) критериях для меня , который ограничивает разрешение, которое может быть установлено. На моем iphone 7 он всегда ограничен "HD720". На моем Huawei Android P SMart он всегда ограничен "Large". Так что я не понимаю: я имею в виду сверхбыстрый Wi-Fi дома, даже если я не могу получить огромные размеры демо-видео (высота> 5000 пикселей) HD 1080, и у меня всегда максимальный уровень HD720.

Вот демонстрация, чтобы поделиться моими выводами: https://ancientoffbeatrotation - five-nine.repl.co/

Обратите внимание, что все тесты выполняются на самом последнем Chrome (> = 64); Safari на ios ведет себя так же в моих экспериментах.

  • на большом хромированном рабочем столе 1800 x 945 я получаю видео на YouTube с разрешением hd 1080 (максимально круто): идеально, как и ожидалось

  • chrome dev tools> эмулировать iphone7, поэтому он принимает размеры 375px x 667px => используется 1080hd, идеально, как и ожидалось

  • затем на реальном iphone 7 или в браузере (служба для использования реальных устройств в облаке): здесь используется разрешение hd720, несмотря на огромные размеры видео, которые должны обеспечивать загрузку в формате hd1080 . Прямо здесь проблема. Контекст: очень хорошее соединение Wi-Fi, полный заряд батареи (нет режима низкого заряда батареи, который может добавить ограничения на загрузку мультимедиа) Та же проблема с моим телефоном Android, когда он даже не доходит до hd720 и установлен на «большой».

Еще одно «захватывающее» наблюдение: я решил добавить в код предупреждение, чтобы узнать, какое именно, какое качество доступно, тайна углубляется 

function onPlayerPlaybackQualityChange(event) {
            var available_qualities = player.getAvailableQualityLevels();
          alert("Available qualities are" + available_qualities);    
        }

И тайна проясняется, но снова зависит от других :( как показано ниже:

  • на рабочем столе: я прочитал для этого предупреждения "Доступны следующие качества: hd1080 , hd720, большой, средний, крошечный, автоматический" => так что в приведенных выше наблюдениях я получил действительно максимально возможное качество, которое хорошо, учитывая размеры видео

  • на реальном iphone 7: я прочитал для этого предупреждения "Доступные качества: hd720 , средний, маленький, авто" Поэтому я подумал, хаха, поэтому я получаю HD720, может быть, так как это максимально доступно. Но почему? у меня очень высокая скорость соединения и мой телефон довольно современный (iphone 7).

  • но загадка углубляется, потому что с вышеприведенным наблюдением на iphone 7 я подумал: «Хорошо, по крайней мере, теперь я понимаю немного больше, я получил самое высокое доступное разрешение, просто hd720 был максимальным доступным для некоторых причина ", но тайна углубляется, когда я тестирую на своем Huawei P Smart: здесь я читаю по предупреждению" доступные качества: hd1080 , hd720, большой, средний, маленький, крошечный, авто ", поэтому я бы ожидайте получить самое высокое разрешение HD1080 ... но нет, я получаю ... "большой" (даже не HD720!). Так что моя теория рушится. Плюс, с какой стати iphone 7 получил бы доступное качество hd720 как самое высокое разрешение и huawei P Smart hd1080 (примечание: когда я проверял разрешение экрана телефона, он сказал: 2160 x 1080)

Я подумал, что, может быть, как и некоторые люди, упоминаемые в прессе, мой интернет-оператор (бесплатный мобильный во Франции) делает то же самое с трейлингом verizon или t-mobile в США для youtube, но я пробовал с различными прокси в мире и наблюдения всегда одинаковы. поэтому проблема скорее всего не связана с этим.

Я супер потерянный здесь, у кого-нибудь есть идея, что происходит?

...