0

私はモバイルウェブページを開発していて、そこに2つのYouTubeビデオをインポートする必要があります。そのビデオをクリックすると、ビデオが展開されて再生を開始する必要があります。ビデオはjavascriptとhtmlを使用して達成されました。

ここでの私の問題は、2つの異なる埋め込みYouTubeコードスニペットを使用してJavaScriptをコーディングしたが、JavaScriptの2番目のセクションのビデオコードを取得して両方のビデオに適用することです。したがって、これらの各ビデオに、埋め込まれたコードに基づいてそれぞれのビデオを再生させるのを手伝ってください。

これがjsfiddleです：http：//jsfiddle.net/tJpBY/そしてコードは次のとおりです：

HTMLコード：

<div class="container">
    <div class="preview">
        <img class="thumb">
        <img class="play" src="https://s-static.ak.fbcdn.net/rsrc.php/v2/yG/r/Gj2ad6O09TZ.png">
    </div>
</div>
<div class="container">
    <div class="preview1">
        <img class="thumb1">
        <img class="play" src="https://s-static.ak.fbcdn.net/rsrc.php/v2/yG/r/Gj2ad6O09TZ.png">
    </div>
</div>

Javascriptコード：

var youtube_video_id = "Cgovv8jWETM";
var video_url = "http://youtube.com/watch?v=" + youtube_video_id;
var thumbnail_url = "http://img.youtube.com/vi/" + youtube_video_id + "/1.jpg";
var iframe_url = "http://www.youtube.com/embed/" + youtube_video_id + "?autoplay=1";
var api_url = "https://gdata.youtube.com/feeds/api/videos/" + youtube_video_id + "?  v=2&alt=json-in-script&callback=?";

$(function () {
    // Get video information and set the title.
    $.getJSON(api_url, function (data) {
        $(".info").html("<b><a href='" + video_url + "' target='_blank'>" + data.entry.title.$t + "</a></b>");
    });

    // Set the thumbnail image for the video.
    $(".preview img.thumb").attr("src", thumbnail_url);

    // Switch to the iframe when the image is clicked.
    $(".preview").click(function () {
        $(this).html("<iframe width='400' height='250' src='" + iframe_url + "' frameborder='0' allowfullscreen></iframe>");
        $(this).css("float", "none");
    });
});

var youtube_video_id1 = "rHtVc1asWCc";
var video_url = "http://youtube.com/watch?v=" + youtube_video_id1;
var thumbnail_url = "http://img.youtube.com/vi/" + youtube_video_id1 + "/1.jpg";
var iframe_url = "http://www.youtube.com/embed/" + youtube_video_id1 + "?autoplay=1";
var api_url = "https://gdata.youtube.com/feeds/api/videos/" + youtube_video_id1 + "? v=2&alt=json-in-script&callback=?";

$(function () {
    // Get video information and set the title.
    $.getJSON(api_url, function (data) {
        $(".info").html("<b><a href='" + video_url + "' target='_blank'>" + data.entry.title.$t + "</a></b>");
    });

    // Set the thumbnail image for the video.
    $(".preview img.thumb1").attr("src", thumbnail_url);

    // Switch to the iframe when the image is clicked.
    $(".preview").click(function () {
        $(this).html("<iframe width='400' height='250' src='" + iframe_url + "'  frameborder='0' allowfullscreen></iframe>");
        $(this).css("float", "none");
    });
});

jsfiddleでは正常に動作していますが、プロジェクトに同じコードをインポートすると、同じビデオが2回繰り返されます。だから私がこの問題を解決するのを手伝ってください。前もって感謝します。

4

1 に答える 1

1

これを修正する方法の 1 つを次に示します。

http://jsfiddle.net/tJpBY/2/

基本的に に名前を変更.previewする必要があり.preview1ます。

$('.preview')両方のビデオ (およびプレビューのクラスを持つ他のすべて) に適用されます。また、css を少し編集し (preview1 を追加)、不正な形式の html を修正しました。

必要以上に多くの名前を変更したので、最初に行っていたように見えるコピーペーストが簡単になりました。

于 2013-02-18T08:41:10.317 に答える