2

私はJqueryが初めてです。再生と停止の 2 つのボタンを持つ単一のビデオを埋め込もうとしています。videoid 変数を実際のビデオ ID (例: CkPv2jP9KeY) に置き換えたコードを html コンテンツに直接配置すると、再生ボタンと停止ボタンが機能することに気付きました。これまでのところ、私はこれを持っています：

<!DOCTYPE html>
<html lang="es">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>   
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {player = new YT.Player('player');}
if(window.opera){
    addEventListener('load', onYouTubeIframeAPIReady, false);
}
</script>
 </head>
<body>
<script>
$(document).ready(function(){
    $.getJSON("https://gdata.youtube.com/feeds/api/users/diasporaduo/uploads?v=2&alt=jsonc",function(json){
        videoid = json.data.items[0].id;
        $("#video").append('<iframe id="player" width="560" height="349" frameborder="0" src="http://www.youtube.com/embed/'+ videoid +'?rel=0&wmode=Opaque&enablejsapi=1"></iframe>');
    });
 });
</script>
<div id="video"></div>
<a href="javascript: void(0)" onclick="player.playVideo(); return false">play</a><br>
<a href="javascript: void(0)" onclick="player.stopVideo(); return false">stop</a>
</body>
</html>
4

2 に答える 2

1

次のようにコードを再配置できます。

  1. 含むhttps://www.youtube.com/player_api
  2. できれば動画と同じサイズの空の div 要素を作成します
  3. 次のことを行う実装onYouTubeIframeAPIReady:
    • 空白の YouTube iframe プレーヤーを作成する
    • onReadyイベントでビデオをロードする

ノート：

  • GData から JSON データを取得するために jQuery は必要ありません。<script>src = で 簡単に作成できますhttps://gdata...&alt=jsonc&callback=functionThatCallsCueVideo
  • コードの組み替えも可能です。たとえば、最初に JSON をロードしてから呼び出すことができますplayer = new YT.Player({videoId: 'u1zgFlCw8Aw'})

HTML:

<!-- this could could inside head -->
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>

<!-- this goes in body -->
<div id="video"></div>
<a href="javascript: void(0)" onclick="player.playVideo(); return false">play</a><br>
<a href="javascript: void(0)" onclick="player.stopVideo(); return false">stop</a>

JavaScript:

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video', {
        width: '560',
        height: '349',
        events: {
            'onReady': function () {
                $.getJSON("https://gdata.youtube.com/feeds/api/users/diasporaduo/uploads?v=2&alt=jsonc", function (json) {
                    videoid = json.data.items[0].id;
                    player.cueVideoById(videoid);
                });
            }
        }
    });
}

デモ

于 2013-01-21T21:11:03.103 に答える
0

Salman A に感謝します。これは、彼の応答の Jquery 作業バージョンです。

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
     <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link href="css5/reset.css" rel="stylesheet" />
    <link href="css5/main.css" rel="stylesheet" />

     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>   
     <script type="text/javascript" src="http://www.youtube.com/player_api"></script>

</head>
<body>
<script>
var player;

$(document).ready(function(){
    window.onYouTubeIframeAPIReady = function() {
        player = new YT.Player('video', {
          events: {
            'onReady': function () {
                $.getJSON("http://gdata.youtube.com/feeds/api/users/diasporaduo/uploads?v=2&alt=jsonc", function (json) {
                    videoid = json.data.items[0].id;
                    player.cueVideoById(videoid);
                });
            }
        }
    });
}
});

</script>

<div id="video"></div>


<a href="javascript: void(0)" onclick="player.playVideo(); return false">play</a><br>
<a href="javascript: void(0)" onclick="player.stopVideo(); return false">stop</a>


</body>
</html>
于 2013-01-22T14:18:49.867 に答える