Comment puis-je lire automatiquement une vidéo Youtube (API IFrame) muté?
<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 muette! Je veux que le volume soit de 0 quand il joue pour la première fois...
6 réponses
Youtube ne fournissent pas d'inhibition par le biais d'un paramètre d'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.
cependant, s'il vous plaît noter l'avertissement sur la page liée ci-dessus: "La dévalorisation de L'API de lecteur JavaScript YouTube a été annoncée le 27 janvier 2015. Les embeds flash de YouTube ont également été dépréciés. Pour en savoir plus, consultez la Politique sur la dépréciation. Veuillez migrer vos applications vers L'API IFrame, qui peut intelligemment utiliser n'importe quel lecteur intégré – HTML () ou Flash () – que le client supporte."
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 noter enablejsapi=1 dans l'url.
Javascript
var player = iframe.getElementById('player');
player.mute();
mise à Jour
le code précédent avait quelques problèmes et ne fonctionnait pas avec L'API actuelle (la syntaxe de playerVars était fausse). Voici le code mis à jour. Vous pourriez avoir besoin de bricoler 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>le player_api sera déprécié le 25 juin 2015. Pour lire les vidéos youtube il y a une nouvelle api IFRAME_API
on dirait le 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>
<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>vous pouvez sélectionner le lecteur vidéo et ensuite définir son volume:
var mp = iframe.getElementById('movie_player');
mp.setVolume(0);
la réponse acceptée fonctionne assez bien. Je voulais plus de contrôle donc j'ai ajouté quelques fonctions supplémentaires 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 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 du son... Pour en savoir plus, consultez L'URL de référence:
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 coupé en IE et Safari.