13

次のコードを使用してYouTube動画を一時停止して再生しようとしています。これは、YoutubeAPIページからのコピーです。

// 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のデモです

ただし、機能していません。誰かがこれを行う方法を知っていますか？

4

3 に答える 3

23

プレーヤーの準備ができたら、player.playVideo();（再開）と（一時停止）を使用します：http： //jsfiddle.net/4WPmY/6/player.pauseVideo();

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();
    };
}
于 2012-07-01T17:09:57.763 に答える
2

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

于 2014-03-04T19:53:10.700 に答える
2 
<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();
    }
}
于 2017-12-03T21:00:52.520 に答える