it-swarm.com.de

Wie kann ich ein stummgeschaltetes Youtube-Video (IFrame-API) automatisch abspielen?

<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>

Das Video ist nicht stummgeschaltet! Ich möchte, dass die Lautstärke 0 ist, wenn sie zum ersten Mal abgespielt wird ...

35
TIMEX

Youtube bietet keine Stummschaltung über URL-Parameter (siehe http://code.google.com/apis/youtube/player_parameters.html ).

Sie müssen Javascript dafür verwenden. Weitere Informationen finden Sie unter http://code.google.com/apis/youtube/js_api_reference.html .

Beachten Sie jedoch die Warnung auf der oben verlinkten Seite: "Die Abwertung der YouTube JavaScript Player-API wurde am 27. Januar 2015 angekündigt. YouTube Flash-Einbettungen wurden ebenfalls nicht mehr empfohlen. Weitere Informationen finden Sie in der Abwertungsrichtlinie. Bitte migrieren Sie Ihre Anwendungen für die IFrame-API, die den eingebetteten Player - HTML () oder Flash () -, den der Client unterstützt, intelligent verwenden kann. "

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>

bitte beachten Sie enablejsapi = 1 in der URL.

Javascript

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

Update

Vorheriger Code hatte einige Probleme und funktionierte nicht mit der aktuellen API (die Syntax von playerVars war falsch). Hier ist der aktualisierte Code. Möglicherweise müssen Sie an den Parametern arbeiten, die Sie benötigen.

         
    <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>

66
Gagandeep Singh

Probieren Sie es aus, es funktioniert gut

<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>

5
Deepak Gupta

Die player_api wird am 25. Juni 2015 nicht mehr empfohlen. Zum Abspielen von Youtube-Videos gibt es eine neue API IFRAME_API

Es sieht wie folgt aus:

<!-- 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>
4
JD - DC TECH

Sie können den Videoplayer auswählen und dann die Lautstärke einstellen:

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

Quelle: http://userscripts.org/scripts/review/49366

3
Loïs Di Qual

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
}

Denken Sie daran, dass der Sound in IE und Safari nicht stummgeschaltet wird. 

0

Die akzeptierte Antwort funktioniert ziemlich gut ... Ich wollte mehr Kontrolle und fügte dem Skript ein paar weitere Funktionen hinzu:

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

Und hier ist das 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>

Jetzt haben Sie mehr Kontrolle über den Sound ....__ Überprüfen Sie die Referenz-URL auf weitere Informationen:

YouTube IFrame Player API

0
Tarik