次のコードを使用して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',
});
}
これがjsFiddle のデモです
ただし、機能していません。誰かがこれを行う方法を知っていますか?
プレーヤーの準備ができたら、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();
};
}
<div id="player"></div>
<a href="#" id="resume">Play</a>
このコードでは、[再開]ボタンと[一時停止]ボタンを1つに追加しました: 例
// 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();
}
}
HTMLに、ビデオを制御するためのいくつかのボタンがあります。
<input type="button" id="play">
<input type="button" id="pause">
JQueryを使用して、イベントリスナー(クリック)をバインドし、プレーヤーオブジェクトで関数をトリガーします。
$(function() {
$('#play').click(function() {
player.playVideo();
});
$('#pause').click(function() {
player.pauseVideo();
});
});
YouTubeのPlayerとDataapiを使用してアプリを作成しました。必要なものを取ります: https://github.com/HunterMeyer/YouTV