我使用Youtube API，並有幾個Div作爲縮略圖。當單擊一個縮略圖（div）時，應播放相應的Youtube視頻。我爲視頻使用了iframe元素，並且網頁僅由HTML，CSS和JavaScript構成。如果我不使用按鈕（帶有onclick的縮略圖/ div），而是使用Youtube API JavaScript代碼創建空白頁面，它將起作用。但是，當我嘗試在函數調用（從div的onclick）中包裝所有內容時，沒有任何反應，但是我得到這個錯誤。點擊播放Youtube視頻

「拒絕執行來自'https://www.youtube.com/embed/HVldRjNb4BE'的腳本，因爲它的MIME類型（'text/html'）不可執行，並且啓用嚴格的MIME類型檢查。

這裏是我的代碼：

HTML：

<div id="player"></div>

的JavaScript：

// 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(); 
    }

此代碼是剛剛從https://developers.google.com/youtube/iframe_api_reference複製。

當這是我在文檔中的所有內容時，當頁面加載時，播放器就在那裏，並且視頻已準備好播放。因此，爲了澄清我的問題，我該如何做到這一點，以便當用戶點擊其中一個按鈕（div）時，Youtube播放器顯示並播放視頻？

來源

2017-03-10 Fred

可以提供HTML設計爲 –

你好，我想這會幫助你：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>406 Error</title> 
</head> 

<button onclick="myFunction();return false;">Click me</button> 
<div id="video"></div> 
<body> 
<script> 

function myFunction() { 

    document.getElementById("video").innerHTML = "<div id='player'></div>"; 

    // 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> 
</body> 
</html>

來源

2017-03-10 07:38:35

OMG，我愛你。謝謝！ – Fred

我使用此代碼，但我想添加？rel = 0在視頻如何添加請告訴..？ –

對不起，我不明白你在問什麼。 –

這可能是值得一試： Play iFrame embedded YouTube Video on click - Codepen

好像你正在試圖做什麼更短，更簡單的版本。

$(document).ready(function() { 
 
    $('#play-video').on('click', function(ev) { 
 
    
 
    $("#video")[0].src += "&autoplay=1"; 
 
    ev.preventDefault(); 
 
    
 
    }); 
 
});

body { 
 
    padding: 30px; 
 
} 
 

 
div#play-video { 
 
    width: 200px; 
 
    height: 80px; 
 
    color: red; 
 
    border: 1px solid grey; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<div id="play-video"> 
 
    <h1>Play Video</h1> 
 
</div> 
 
    
 
<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>

來源

2017-03-10 08:26:55

這不適用於手機，因爲它們禁用「自動播放= 1」。我已經在我的Android手機上測試過您的代碼，並且它不起作用（在Windows桌面上可以正常工作）。 Amitesh提供的解決方案適用於我的Android手機 – Nat

點擊播放Youtube視頻

HTML：

的JavaScript：

回答

相關問題