Как автоматически отключить воспроизведение видео на YouTube (IFrame API)?
<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>
Видео не отключено! Я хочу, чтобы громкость была 0, когда он впервые играет...
7 ответов
Youtube не обеспечивает отключение звука через параметр url (см. http://code.google.com/apis/youtube/player_parameters.html).
Вы должны использовать JavaScript для этого. Подробнее см. http://code.google.com/apis/youtube/js_api_reference.html.
Тем не менее, обратите внимание на предупреждение на странице, связанной выше: "Устаревший API YouTube Player Player был объявлен 27 января 2015 года. Встраивание YouTube Flash также устарело. Для получения дополнительной информации см. Политику устаревания. Переведите ваши приложения на API IFrame, который может разумно использовать любой встроенный проигрыватель - 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"><br /></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>Попробуйте это работает нормально
<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>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>
Вы можете выбрать видеоплеер и затем установить его громкость:
var mp = iframe.getElementById('movie_player');
mp.setVolume(0);
Обновление 2021 для зацикливания и автоматического воспроизведения видео на настольных и мобильных устройствах (проверено на iPhone X — Safari).
я использую
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.
Принятый ответ работает довольно хорошо. Я хотел больше контроля, поэтому добавил в скрипт несколько функций:
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 ссылки для получения дополнительной информации: