Comment lire automatiquement une vidéo Youtube (IFrame API) en sourdine?
<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"><br /></iframe>
La vidéo n'est pas en sourdine! Je veux que le volume soit à 0 quand il commence à jouer ...
Youtube ne fournit pas de muting via le paramètre url (voir http://code.google.com/apis/youtube/player_parameters.html ).
Vous devez utiliser javascript pour cela. voir http://code.google.com/apis/youtube/js_api_reference.html pour plus de détails.
Veuillez toutefois noter l'avertissement qui se trouve sur la page liée ci-dessus: "La dépréciation de l'API du lecteur JavaScript de YouTube a été annoncée le 27 janvier 2015. Les intégrations YouTube Flash sont également obsolètes. Voir la politique de dépréciation pour plus d'informations. Veuillez migrer vos applications à l’API IFrame, qui peut utiliser intelligemment le lecteur intégré (HTML () ou Flash ()) pris en charge par le client. "
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"><br /></iframe>
s'il vous plaît notez enablejsapi = 1 dans l'URL.
Javascript
var player = iframe.getElementById('player');
player.mute();
Mettre à jour
Le code précédent posait quelques problèmes et ne fonctionnait pas avec l'API actuelle (la syntaxe de playerVars était incorrecte). Voici le code mis à jour. Vous devrez peut-être modifier les paramètres dont vous avez besoin.
<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>Essayez cela son fonctionne bien
<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>Le player_api sera obsolète le 25 juin 2015 . Pour la lecture de vidéos youtube, une nouvelle api est disponible IFRAME_API
Cela ressemble au code suivant:
<!-- 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>
Vous pouvez sélectionner le lecteur vidéo, puis régler son volume:
var mp = iframe.getElementById('movie_player');
mp.setVolume(0);
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
}Rappelez-vous que le son ne sera pas mis en sourdine dans IE et Safari.
La réponse acceptée fonctionne plutôt bien ... Je voulais plus de contrôle alors j'ai ajouté quelques fonctions au script:
function unmuteVideo() {
player.unMute();
return false;
}
function muteVideo() {
player.mute();
return false;
}
function setVolumeVideo(volume) {
player.setVolume(volume);
return false;
}
Et voici le code 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>
Maintenant, vous avez plus de contrôle sur le son ... Vérifiez l'URL de référence pour plus d'informations: