2012-07-01 119 views
6

我想停下来用下面的代码,这是相当多的来自Youtube API page拷贝播放YouTube视频:暂停YouTube视频,YouTube API取得

// 2. This code loads the IFrame Player API code asynchronously. 
var tag = document.createElement('script'); 
tag.src = "http://www.youtube.com/player_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 onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '315', 
     width: '560', 
     videoId: 'bpOR_HuHRNs', 
    }); 
} 

Here's a demo in jsFiddle

但是,它不工作。任何人有一个想法如何做到这一点?

回答

15

使用player.playVideo();(简历)和player.pauseVideo();(暂停),一旦播放器准备就绪:http://jsfiddle.net/4WPmY/6/

function onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
        height: '315', 
        width: '560', 
        videoId: 'bpOR_HuHRNs', 
    }); 
    document.getElementById('resume').onclick = function() { 
        player.playVideo(); 
    }; 
    document.getElementById('pause').onclick = function() { 
        player.pauseVideo(); 
    }; 
} 
1

在你的HTML,有一些按钮来控制视频:

<input type="button" id="play"> 
<input type="button" id="pause"> 

使用jQuery,绑定事件监听器(点击)以触发播放器对象的功能:

$(function() { 
    $('#play').click(function() { 
    player.playVideo(); 
    }); 
    $('#pause').click(function() { 
    player.pauseVideo(); 
    }); 
}); 

我使用YouTube的播放器和数据api构建了一个应用程序。把你需要的东西: https://github.com/HunterMeyer/YouTV

0
<div id="player"></div> 
<a href="#" id="resume">Play</a> 

在这段代码中我加入了个人简历和暂停按钮,一个Example

// 2. This code loads the IFrame Player API code asynchronously. 
var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/player_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 onYouTubePlayerAPIReady() { 
    player = new YT.Player('player', { 
     height: '315', 
     width: '560', 
     videoId: '0Bmhjf0rKe8', 
     events: { 
      'onStateChange': onPlayerStateChange 
     } 
    }); 
    document.getElementById('resume').onclick = function() { 
     PlayPause(); 
     return false; 
    }; 
} 
// 4. This function change name of tag click. 
var playerState; 
function onPlayerStateChange(event) { 
    var getId = document.getElementById('resume'); 
    if(event.data === 0) { 
     getId.innerText = 'Play'; 
    } 
    else if(event.data === 1) { 
     getId.innerText = 'Pause'; 
    } 
    else if(event.data === 2) { 
     getId.innerText = 'Resume'; 
    } 
    else if(event.data === 3) { 
     getId.innerText = 'Loading...'; 
    } 
    playerState = event.data; 
} 
// 5. This function Play/Pause the video. 
function PlayPause() { 
    if(playerState == '1') { 
     player.pauseVideo(); 
    } 
    else { 
     player.playVideo(); 
    } 
}