如何自动播放Youtubevideo(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>
video没有静音! 我想音量为0时,它第一次播放…
YouTube不提供通过url参数静音(请参阅http://code.google.com/apis/youtube/player_parameters.html )。
你必须使用JavaScript的。 有关详细信息,请参阅http://code.google.com/apis/youtube/js_api_reference.html 。
但是,请注意上面链接的页面上的警告:“YouTube JavaScript播放器API的弃用已于2015年1月27日公布.YouTube Flashembedded也已弃用。有关详细信息,请参阅弃用政策。请将您的应用程序迁移到IFrame API可以智能地使用客户端支持的任何embedded式播放器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>
请注意url中的enablejsapi = 1。
使用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>
player_api将于2015年6月25日弃用。对于播放youtubevideo有一个新的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>
您可以selectvideo播放器,然后设置其音量:
var mp = iframe.getElementById('movie_player'); mp.setVolume(0);
资料来源: http : //userscripts.org/scripts/review/49366
试试这个工作正常
<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>
被接受的答案是相当不错的。 我想要更多的控制,所以我给脚本添加了更多的function:
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:
YouTube IFrame Player API
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 }