1

私はしばらくの間グーグルをしてきましたが、私の問題に対して良い結果が得られませんでした。また、gdocs からの youtube API リファレンスも何度も用意しています。

リンクをクリックしてYouTubeビデオを停止しようとしています。

html:

<div class="box_filme rel_trailer">
    <iframe id="iframe_player" width="420" height="315" src="http://www.youtube.com/embed/8Af372EQLck?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
</div>

スクリプトソース:

<script type="text/javascript" src="http://www.youtube.com/iframe_api"></script>

jsコードを試しています:

$(function(){
   $('.info_filme .filme').click(function(){
        $('iframe_player').stopVideo();
   });
});

クリックが配置される html の一部

<ul class="info_filme">
    <li><a class="filme sinopse active" data-info="rel_sinopse">Sinopse</a></li>
    <li><a class="filme trailer" data-info="rel_trailer">Trailer</a></li>
    <li><a class="site" href="">Site</a></li>
</ul>

実際、jsからURLリンクを呼び出すことに成功しましたが、iframeを使用する必要があり、何が間違っているのかわかりません。誰かが私を助けることができれば、私はとても感謝しています.

4

2 に答える 2

1

.stopVideo()問題は、YouTube プレーヤー オブジェクトではなく、jQuery オブジェクトを呼び出していることです。YouTube API は、そのコントロール関数を iframe 要素にエクスポートしません。もちろん、jQuery にもエクスポートしません。

iframe を自分で作成するのではなく、YouTube iframe API ドキュメントの基本的な例のように、YouTube API に任せてみてください。

    var player = new YT.Player($('.rel_trailer')[0], {
      height: '315',
      width: '420',
      videoId: '8Af372EQLck',
      events: {
        'onReady': function() {
            $('.info_filme .filme').click(function(){
                player.stopVideo();
            });
        },
        'onStateChange': onPlayerStateChange
      }
    });

渡される最初のパラメーターYT.Playerは、YouTube が動画を配置する DOM 要素です。

YouTube API は、処理の多くが非同期であるため、少し複雑です。もっと簡単にしたい場合は、Popcorn.js を使用して、HTML ビデオ要素を模倣する API で YouTube プレーヤーをラップできます (この回答で説明しています)。

次のスクリプトをロードする必要があります。

<script type="text/javascript" src="popcorn.js"></script>
<script type="text/javascript" src="popcorn._MediaElementProto.js"></script>
<script type="text/javascript" src="popcorn.HTMLYouTubeVideoElement.js"></script>

ここ、ここ、ここで入手できます。(このリポジトリは、YouTube の公式の Popcorn リポジトリよりも前に、いくつかのバグ修正を行ったものです。)

次に、ビデオに空の要素を提供するだけです。

<div class="box_filme rel_trailer"></div>

次に、ラッパーを作成し、クリック ハンドラーをアタッチします。

var video = Popcorn.HTMLYouTubeVideoElement($('.rel_trailer')[0]);
video.src = 'http://www.youtube.com/watch?v=8Af372EQLck';

$('.info_filme .filme').click(function(){
    video.pause();
});

Popcorn は、YouTube の API とそれに続くすべての非同期イベントの読み込みを処理します。Popcorn の主要な注釈機能を使用しない場合は、かなりの量の不要な JavaScript をロードする必要がありますが、YouTube の API をいじるのに煩わされたくない場合は、多くの時間を節約できます。また、複数のソース (HTML5、Vimeo など) からのビデオが必要な場合は、コードを簡単に適応させることができます。

于 2012-11-29T03:22:05.070 に答える
0

以下のように動画をあなたのページに埋め込んでみませんか？

<embed id="playerid" width="100%" height="100%" allowfullscreen="true" allowscriptaccess="always" quality="high" bgcolor="#000000" name="playerid" style="" src="http://www.youtube.com/apiplayerbeta?enablejsapi=1&playerapiid=normalplayer" type="application/x-shockwave-flash">

その後、次を使用してビデオを停止できます。

var myPlayer = document.getElementById('playerid');

<a href="#" onclick="myPlayer.stopVideo();">Stop Video</a>
于 2012-11-28T15:02:55.197 に答える