как запрограммировать встроенный проигрыватель YouTube на включение звука при нажатии

Как настроить встроенный проигрыватель YouTube на включение звука при нажатии на него. Вы можете увидеть встроенный проигрыватель, о котором я говорю, на главной странице http://www.harvestarmy.org. Это справа, где написано «Последние видео с YouTube». Я настроил звук по умолчанию, но я хочу, чтобы он автоматически включался, когда кто-то нажимает на него.

Вот код, который я использовал:

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  // This is a protocol-relative URL as described here:
  //     http://paulirish.com/2010/the-protocol-relative-url/
  // If you're testing a local page accessed via a file:/// URL, please set tag.src to
  //     "https://www.youtube.com/iframe_api" instead.
  tag.src = "//www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '98',
      width: '175',
      playerVars: {
        'list': 'UUFwY5Al1Doy7f0MdKnJ-gaw',
        'modestbranding': 1,
        'showinfo': 0,
        'autoplay': 1
      },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.mute();
  }

</script>

javascript embed mute youtube video
person user2419132    schedule 24.05.2013    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Спасибо за этот ответ! Я реализовал его немного иначе, добавив в функцию onYouTubeIframeAPIReady.

Я также изменил инициализированное значение переменной isUnMuted. Функционально это то же самое, но так удобнее.

var player;
var isUnMuted = false;
window.onYouTubeIframeAPIReady = function() {
    player = new YT.Player('youTube', {
        videoId: '[myVideoId]',
        playerVars: {
            'rel': 0,
        },
        events: {
            'onReady': function() {
                player.mute();
                player.playVideo();
            },
            'onStateChange': function () {
                if (player.isMuted() && player.getPlayerState() == 2 && !isUnMuted) {
                    player.unMute();
                    player.playVideo();
                    isUnMuted = true;
                }
            }
        }
    });
}

Это точно имитирует поведение встроенных видео в новостной ленте Facebook.

person ericgilchrist    schedule 05.04.2016

arrow_upward
1
arrow_downward

Я не думаю, что это возможно, потому что не существует такого понятия, как событие «щелчок» или «активация». Однако вы можете попробовать добавить обработчик событий к событию onStateChange, а также включить звук и поставить проигрыватель на паузу. Я не пробовал, но попробуйте и посмотрите, работает ли это:

var isUnMuted = true;

player.addEventListener("onStateChange", function(event) {
     if( player.isMuted() && player.getPlayerState() == 2 && isUnMuted ) {
          player.unMute();
          player.playVideo(); // resume playback
          isUnMuted = false;  // you want to run this once only! 
     }
});
person ilbesculpi    schedule 24.05.2013

arrow_upward
0
arrow_downward

Это работает. Но, к сожалению, значок паузы исчезает при нажатии на видео. Даже видео продолжает работать, это не чистое решение. Я исправил это, поместив <div> точно такого же размера над фактическим iframe видео и используя его функцию click() для включения звука видео.

HTML:

  <div class="video-container">
    <div class="video-dummy">
    </div>
    <div id="player">
    </div>
  </div>

CSS:

.video-container {
  position: relative;
  width: 640px;
  height: 390px;
}

.video-dummy {
  width: 640px; 
  height: 390px;
  position: absolute;
}

Javascript:

$('.video-dummy').click(function(){
  player.unMute();
});

Это работает хорошо для меня.

person MrLeeh    schedule 29.05.2016