YouTube的iframe自定義控制菜單暫停功能

我想簡單地創建一個菜單，可以使用iFrame API控制YouTube視頻。我已經在id =「pause_button」的HTML中放置了一個按鈕，並嘗試使用jquery創建一個函數，以便在點擊時暫停視頻。這裏是我下面的HTML文檔：YouTube的iframe自定義控制菜單暫停功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Untitled 1</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

    // 2. This code loads the IFrame Player API code asynchronously. 
    var tag = document.createElement('script'); 
    tag.src = "//www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.paresntNode.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', { 
     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> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#pause_button").click(function(){ 
     $("#test").append("TEST"); 
     player.pauseVideo(); 
    }); 
}); 
</script> 

</head> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1&origin=http://example.com" frameborder="0"> 
    </iframe> 

    <button id="pause_button">STOP</button> 
    <div id="test">TEST<br /></div> 
    </body> 
</html>

來源

2012-11-20 jgille07

那麼你面臨的問題是什麼？任何錯誤消息？你檢查了JS控制檯嗎？ – Blueboye

div #test的追加只是爲了測試jquery是否正常工作，它是。 – jgille07

當我按下按鈕時，視頻不會暫停。 – jgille07

你的第一個錯誤，即有關無法調用方法「的insertBefore」的定義，是由於你的代碼一個錯字;應該是：

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

（你有paresntNode）

第二個錯誤是由於您的原點爲iframe的URL參數;您留在示例origin（http://example.com）中，但應將其設置爲運行代碼的服務器的值。這是一種安全措施，可以讓您的腳本與玩家的方法進行交互。

來源

2012-11-21 07:39:39 jlmcdonald

謝謝..修復這些錯誤使它工作。 – jgille07

YouTube的iframe自定義控制菜單暫停功能

回答

相關問題