Как автоматически отключить воспроизведение видео на YouTube (IFrame API)? - PullRequest
Новая
       1

Как автоматически отключить воспроизведение видео на YouTube (IFrame API)?

35 голосов
/ 15 января 2012 
<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/JW5meKfy3fY?wmode=opaque&autohide=1&autoplay=1&volume=0&vol=0&mute=1" frameborder="0">&lt;br /&gt;</iframe>

Видео не отключено! Я хочу, чтобы при первом воспроизведении громкость была равна 0 ...

Ответы [ 6 ]

66 голосов
/ 15 января 2012

Youtube не обеспечивает отключение звука через параметр url (см. http://code.google.com/apis/youtube/player_parameters.html).

. Для этого необходимо использовать javascript. Подробнее см. http://code.google.com/apis/youtube/js_api_reference.html.

Однако, пожалуйста,обратите внимание на предупреждение на странице, указанной выше: «Объявление об устаревании API-интерфейса проигрывателя YouTube JavaScript было объявлено 27 января 2015 года. Встраивание YouTube Flash также устарело. Для получения дополнительной информации см. политику устаревания. Пожалуйста, перенесите свои приложения в IFrame API., который может разумно использовать любой встроенный проигрыватель - HTML () или Flash () - клиент поддерживает. "

Html 

<iframe class="youtube-player" id="player" type="text/html" src="http://www.youtube.com/embed/JW5meKfy3fY?wmode=opaque&autohide=1&autoplay=1&enablejsapi=1" frameborder="0">&lt;br /&gt;</iframe>

обратите внимание на enablejsapi = 1 в URL.

Javascript 

var player =  iframe.getElementById('player');
player.mute();

Обновление

Предыдущий код имел некоторые проблемы и не работал с текущим API (синтаксис playerVars был неправильным). Вот обновленный код. Возможно, вам придется повозиться с нужными вам параметрами. 

         
    <div id="player"></div>
    <script>
      // 1. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

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

      // 2. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '100%',
          width: '100%',
          playerVars: {
                    autoplay: 1,
                    loop: 1,
                    controls: 0,
                    showinfo: 0,
                    autohide: 1,
                    modestbranding: 1,
                    vq: 'hd1080'},
          videoId: '1pzWROvY7gY',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

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

      var done = false;
      function onPlayerStateChange(event) {
        
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
4 голосов
/ 12 сентября 2016

Попробуйте это нормально работает 

<html><body style='margin:0px;padding:0px;'>
        <script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>
                var player;
        function onYouTubeIframeAPIReady()
        {player=new YT.Player('playerId',{events:{onReady:onPlayerReady}})}
        function onPlayerReady(event){player.mute();player.setVolume(0);player.playVideo();}
        </script>
        <iframe id='playerId' type='text/html' width='1280' height='720'
        src='https://www.youtube.com/embed/R52bof3tvZs?enablejsapi=1&rel=0&playsinline=1&autoplay=1&showinfo=0&autohide=1&controls=0&modestbranding=1' frameborder='0'>
        </body></html>
4 голосов
/ 08 июня 2015

player_api устареет 25 июня 2015 года. Для воспроизведения видео на YouTube есть новый API IFRAME_API

Похоже на следующий код: 

<!-- 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');

  tag.src = "https://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: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

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

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>
3 голосов
/ 15 января 2012

Вы можете выбрать видеоплеер и затем установить его громкость: 

var mp = iframe.getElementById('movie_player');
mp.setVolume(0);

Источник: http://userscripts.org/scripts/review/49366

0 голосов
/ 23 августа 2016 

var video1;

function onYouTubeIframeAPIReady(){
	player = new YT.Player("video1", {
		videoId: "id-number",
		width: 300,
		height: 200, 
		playerVars: {
			"autoplay": 1, // and 0 means off
			"controls": 1,
			"showinfo": 0,
			"modestbranding": 0,
			"loop": 1,
			"fs": 0,
			"cc_load_policy": 0,
			"iv_load_policy": 3,
			},
		events: {
		    'onReady': onPlayerReady
		}
	});
  }

function onPlayerReady(event) {
    event.target.mute();
    event.target.setVolume(0); //this can be set from 0 to 100
}

Помните, что звук не будет отключен в IE и Safari.

0 голосов
/ 23 августа 2016

Принятый ответ работает довольно хорошо.Я хотел больше контроля, поэтому я добавил в сценарий еще несколько функций: 

function unmuteVideo() {
    player.unMute();
    return false;
  }
  function muteVideo() {
    player.mute();
    return false;
  }
  function setVolumeVideo(volume) {
    player.setVolume(volume);
    return false;
  }

И вот HTML: 

<br>
<button type="button" onclick="unmuteVideo();">Unmute Video</button>
<button type="button" onclick="muteVideo();">Mute Video</button>
<br>
<br>
<button type="button" onclick="setVolumeVideo(100);">Volume 100%</button>
<button type="button" onclick="setVolumeVideo(75);">Volume 75%</button>
<button type="button" onclick="setVolumeVideo(50);">Volume 50%</button>
<button type="button" onclick="setVolumeVideo(25);">Volume 25%</button>

Теперь у вас больше контроля над звуком ..Проверьте справочный URL-адрес для получения дополнительной информации:

API проигрывателя YouTube IFrame

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...