как да програмирам плейъра за вграждане в 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