Сначала вставляем iframe в Joomlа, а потом готовим js код для вставки YouTube embedded iframe player

В Джумле фреймы запрещены в двух местах админки. Потому сначала разрешаем фреймы в глобальных настройках, а потом в настройках редактора. Подробности в видео.
Однако, я вынужден использовать js API embedded iframe player. Здесь пример кода для вставки белого плеера с белым пребелым контентом. Однако, при отладке яваскрипт оказалось, что 'YT is undefined, потом в Джумеле он вообще перестал было грузится, но в итоге все работает, но время загруки - почти 4 секунды (на localhost Kali) настораживает. В конце поста работающий код для Джумлы.

Демонстрация YouTube Player API - YouTube Player Demo This page demonstrates the YouTube Player API's functions

Embed a YouTube player -embedded iframe player - вот этот плеер я и собираюсь здесь настроить
IFrame API - а это я уже освоил, но не нашел опций настройки качества видео
IFrame Player API instructions - здесь есть описания всех javascript функций
YouTube iFrame API “setPlaybackQuality” or “suggestedQuality” not working
Youtube iFrame API 'YT is undefined'
YT is not defined - Uncaught ReferenceError: [youtube api]

Недавние изменения в документации¶

Note: The YouTube Flash Player API and JavaScript Player API were deprecated on January 27, 2015. Please migrate your applications to use the IFrame API or embedded iframe players

Follow the IFrame Player API instructions to insert a video player in your web page or application after the Player API's JavaScript code has loaded. The second parameter in the constructor for the video player is an object that specifies player options. Within that object, the playerVars property identifies player parameters.

The HTML and JavaScriptIFrame Player API instructions code below shows a simple example that inserts a YouTube player into the page element that has an id value of ytplayer. The onYouTubePlayerAPIReady() function specified here is called automatically when the IFrame Player API code has loaded. This code does not define any player parameters and also does not define other event handlers.

In [3]:

%%html
<div id="ytplayer"></div>

<script>
  // Load the IFrame Player API code asynchronously.
 
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  
var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
</script>

YouTube iFrame API “setPlaybackQuality” or “suggestedQuality” not working¶

I have the exact same problem and workaround. I think what's happening is that YouTube is only allowing quality levels based on the actual size of the display, so unless you have your video 720px tall you can't default to 720p before it's actually playing. Then the user controls kick in and YouTube stops being a dick.

EDIT

Just hit a breakthrough: If you use event 3 (buffering) instead of event 5 (playing) there's no stutter for the user. Quality is changed as soon as it starts loading. Only weird thing is you need to set it in onPlayerReady as well or it doesn't work.

In [ ]:

var player;

player = new YT.Player('player', {
    height: '490',
    width: '725',
    videoId: yturl,
    /* setPlaybackQuality: 'hd720', <-- DOES NOT WORK */
    /* suggestedQuality: 'hd720',   <-- DOES NOT WORK */
    events: {
        'onReady': onPlayerReady
    }
});

function onPlayerReady(event) {
    player.setPlaybackQuality('hd720');       // <-- DOES NOT WORK
    event.target.setPlaybackQuality('hd720'); // <-- DOES NOT WORK
    player.setVolume(100);                    // <-- DOES WORK
    console.log(player.getPlaybackQuality()); // <-- Prints 'small' to console
    event.target.playVideo();
}

In [ ]:

function onPlayerReady(event) {
    event.target.setPlaybackQuality('hd720');
}
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.BUFFERING) {
        event.target.setPlaybackQuality('hd720');
    }
}

Пробуем из этого сделать что-нибудь

In [2]:

%%html
<div id="ytplayer2"></div>

<script>
  // Load the IFrame Player API code asynchronously.
 
  var tag2 = document.createElement('script');
  tag2.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag2, firstScriptTag);

  // Replace the 'ytplayer2' element with an <iframe> and
  // YouTube player after the API code downloads.
  
var player2;
  
    player2 = new YT.Player('ytplayer2', {
      height: '450',
      width: '800',
      videoId: 'ee7G-q7nLF0',
      
      playerVars: {
      theme: 'light',
      color: 'white',
      loop: '1',
      showinfo: '0',
      controls: '0'          
            },      
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
    }          
    });

    function onPlayerReady(event) {
    event.target.setPlaybackQuality('hd720');
}
    function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.BUFFERING) {
        event.target.setPlaybackQuality('hd720');
    }
}
</script>

Помимо двух "загадочных" недолиний сверху и снизу, есть еще один баг. Размытая картинка... Ее будем побеждать позже.

Далее два хак в index.php и файл se_test.js с работающим кодом.

1.Редактирование файла "/index.php" в шаблоне "protostar_se_1.0".¶

Сначала надо загрузить api плеера из репозитория Гугла, так что теперь в index.php мои хаки скриптов будут иметь вот такую последовательность:

In [ ]:

// Custom js of SE for tests (yuo have to comment this line in production )
$doc->addScript('https://www.youtube.com/player_api');
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/se_test.js');

2.Редактирование файла "/js/se_test.js" в шаблоне "protostar_se_1.0".¶

Чтобы не выскакивала ошибка Youtube iFrame API 'YT is undefined' добавить функцию function onYouTubePlayerAPIReady() {

In [ ]:

​  // Replace the 'ytplayer2' element with an <iframe> and
  // YouTube player after the API code downloads.
  
function onYouTubePlayerAPIReady() {
  
 var  player2 = new YT.Player('ytplayer2', {
      height: '450',
      width: '800',
      videoId: 'ee7G-q7nLF0',
      playerVars: {
      theme: 'light',
      color: 'white',
      loop: '1',
      showinfo: '0',
      controls: '1'          
            },      
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
    }          
    })};

    function onPlayerReady(event) {
    event.target.setPlaybackQuality('hd720');
}
    function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.BUFFERING) {
        event.target.setPlaybackQuality('hd720');
    }
}

Посты чуть ниже также могут вас заинтересовать