web-dev-qa-db-ja.com

画像のクリック時に埋め込み（iframe）youtube-videoを開始/再生します

画像をクリックして、埋め込まれたyoutubeビデオの再生を開始しようとしています。ビデオの上に画像を配置し、画像をクリックするとフェードアウトし、ビデオの再生を開始するという考え方です。

Jqueryを使用して画像をフェードし、jqueryを使用してビデオを再生またはクリックする方法を見つけたいと思っていました。

フェードは正常に機能していますが、ビデオを再生する方法を見つけることができません。ビデオを自動再生および非表示に設定し、画像がクリックされたときにビデオをフェードインすることにより、いくつかのブラウザで動作するようにしました。ほとんどのブラウザでは、ビデオはフェードインすると自動再生されますが、chromeでは、非表示の場合でも自動再生を開始しました。iOSでもうまく機能しませんでした。

私はこれにかなり慣れていないので、100％正確に書いているかどうかさえわかりませんが、成功せずにこのようなことを試みました：

     $('#IMAGE').click(function() { $('#VIDEO').play(); });

それでは、画像クリックでビデオを再生するにはどうすればよいですか？ jqueryを使用して、画像がクリックされたときにビデオを再生する方法はありますか？

前もって感謝します。

jqueryiframeyoutubeonclickembed
48
Corn

手っ取り早い方法は、jQueryを使用してiframeをautoplay=1が設定されているものと単純に交換することです。

HTML

プレースホルダー：

<div id="videoContainer">
  <iframe width="450" height="283" src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>
</div>

自動再生リンク：

<a class="introVid" href="#video">Watch the video</a></p>


ザクエリ

関数を呼び出すonClickキャッチャー

jQuery('a.introVid').click(function(){
  autoPlayVideo('VIDEO_ID_HERE','450','283');
});

関数

/*--------------------------------
  Swap video with autoplay video
---------------------------------*/

function autoPlayVideo(vcode, width, height){
  "use strict";
  $("#videoContainer").html('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
}
49
gearsandcode

このように簡単にできます

$('#image_id').click(function() {
  $("#some_id iframe").attr('src', $("#some_id iframe", parent).attr('src') + '?autoplay=1'); 
});

ここで、image_idはクリックする画像IDであり、some_idはiframeであるdivのIDであり、iframe idを直接使用できます。

21
drupal_mohitsharma

ビデオを開始するには

var videoURL = $('#playerID').prop('src');
videoURL += "&autoplay=1";
$('#playerID').prop('src',videoURL);

ビデオを停止するには

var videoURL = $('#playerID').prop('src');
videoURL = videoURL.replace("&autoplay=1", "");
$('#playerID').prop('src','');
$('#playerID').prop('src',videoURL);

追加パラメーターがない場合は、「＆autoplay = 1」を「？autoplay = 1」に置き換えることができます。

fFとChromeでvimeoとyoutubeの両方で動作します

11
Faiz Mohamed Haneef

スクリプトを実行しても安全なドメインを指定できるはずです。 APIドキュメントには、「追加のセキュリティ対策として、OriginパラメーターもURLに含める必要があります」 http://code.google.com/apis/youtube/iframe_api_reference.html src = "http ：//www.youtube.com/embed/J---aiyznGQ？enablejsapi = 1＆Origin = mydomain.com "がiframeのsrcになります。

ただし、十分に文書化されていません。私は今、似たようなことを試みています。

4
matt

Youtube iframeの例

<iframe id="video" src="https://www.youtube.com/embed/xNM7jEHgzg4" frameborder="0"></iframe>

クリックして再生するHTML要素

<div class="videoplay">Play</div>

ビデオを再生するjQueryコード

$('.videoplay').on('click', function() {
    $("#video")[0].src += "?autoplay=1";
});

https://codepen.io/martinwolf/pen/dyLAC に感謝

3
alex

HTMLコード：-

<a href="#" id="playerID">Play</a>
<iframe src="https://www.youtube.com/embed/videoID" class="embed-responsive-item" data-play="0" id="VdoID" ></iframe>

Jqueryコード：-

$('#playerID').click(function(){
    var videoURL = $('#VdoID').attr('src'),
    dataplay = $('#VdoID').attr('data-play');

    //for check autoplay
    //if not set autoplay=1
    if(dataplay == 0 ){
        $('#VdoID').attr('src',videoURL+'?autoplay=1');
        $('#VdoID').attr('data-play',1);
     }
     else{
        var videoURL = $('#VdoID').attr('src');
        videoURL = videoURL.replace("?autoplay=1", "");
        $('#VdoID').prop('src','');
        $('#VdoID').prop('src',videoURL);

        $('#VdoID').attr('data-play',0);
     }

});

Thats It！

1
Anuj Khandelwal

このdivコードをコピーするだけで完璧に動作するはずです

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img style="cursor: pointer;" alt="" src="http://oi59.tinypic.com/33trpyo.jpg" />
</div>
<div id="thevideo" style="display: none;">
<embed width="631" height="466" type="application/x-shockwave-flash" src="https://www.youtube.com/v/26EpwxkU5js?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" />
</div>
0
Jamil Ahmed