Youtube播放器控制和自動隱藏不起作用

Question

因此，我將youtube iframe api添加到我的網站並按照說明操作;所以這是我的代碼：

var player; 
function onYouTubeIframeAPIReady() { 
player = new YT.Player('player', { 
    height: '390', 
    width: '640', 
    controls: '0', 
    autohide: '1', 
    videoId: 'I'd rather not display that', 
    events: { 
// 'onReady': onPlayerReady, 
    'onStateChange': onPlayerStateChange 
    } 
}); 
} 

設置控制爲0不應該按照this article顯示播放器的控制，但它仍然顯示;

同時將自動隱藏設置爲1應該有進度條和控件按照this article幾秒鐘後滑出，但這也不起作用。

我做錯了什麼？

Answer 1

我得到了embed版本和iframe版本都autoplaying，自動隱藏（不需要）和隱藏控件。我使用了示例代碼並添加了所需的參數。

所有你需要做的就是替換你的電影ID，我認爲你將會正常運行。

這裏是jsfiddle鏈接，你可以看到它的工作和抓住代碼。

嵌入式版本：http://jsfiddle.net/franktudor/jk9SS/

<object width="640" height="390"> 
    <param name="movie" 
     value="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0"></param> 
    <param name="allowScriptAccess" value="always"></param> 
    <embed src="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1&autohide=1&controls=0" 
     type="application/x-shockwave-flash" 
     allowscriptaccess="always" 
     width="640" height="390"></embed> 
</object> 

這裏是內嵌框架版本：http://jsfiddle.net/franktudor/2wh8T/

<iframe id="ytplayer" 
     type="text/html" 
     width="640" 
     height="390" 
     src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&autohide=1&controls=0" 
     frameborder="0"/> 

兩者都是可以使用的選項。您正在使用iFrame版本...我也推薦該版本。但是如果您需要另一種解決方案，則可以使用嵌入版本。

它不是那種腳本樣式，但如果需要可以使用包裝。

Here is a link to an HTML5 youtube (and vimeo) video wrapper.

好，這裏是喜歡你的例子功能代碼，我得到了工作：http://jsfiddle.net/franktudor/DU57E/

<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', 
     playerVars: { 'autoplay': 1, 'controls': 0 }, //this is what you need... 
     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> 

Answer 2

只需設置propertie 'playerVars' 中的變量。