Question

我正在尝试通过点击图片开始播放嵌入式YouTube视频。我们的想法是在视频上方放置一个图像，当点击图像时，它会淡出并开始播放视频。

我正在使用jquery来淡化图像，并希望找到一种方法来播放或使用jquery点击视频。

褪色工作正常，但我无法弄清楚如何触发视频播放。我通过将视频设置为自动播放并隐藏它，然后在单击图像时淡入视频，让它在几个浏览器上工作。在大多数浏览器中，视频在淡入时会自动播放，但在Chrome中，即使隐藏它也会开始自动播放。它在iOS中也不能很好地工作。

由于我对此很陌生，我甚至不确定我是否100％正确地写它，但我尝试过这样的事情没有成功：

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

那么，我如何才能在点击图像上播放视频？有没有办法在单击图像时播放视频，只需使用jquery？

提前谢谢。

Answer 1

快速而肮脏的方法是简单地将iframe替换为使用jQuery设置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>

THE JQUERY

调用函数的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>');
}

Answer 2

你可以像这样做

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

其中 image_id 是您点击的图片ID， some_id 是div的ID，其中iframe也可以直接使用iframe ID。

Answer 3

开始播放视频

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);

您可能想要替换＆＃34;＆amp; autoplay = 1＆＃34;用＆＃34;？autoplay = 1＆＃34;如果没有其他参数

适用于FF＆amp;的vimeo和youtube铬

Answer 4

您应该能够指定一个可以安全编写脚本的域。 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。

然而，它没有很好的记录。我正在尝试类似的东西。

Answer 5

示例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

Answer 6

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);
     }

});

多数民众赞成！

Answer 7

这应该是完美的，只需复制此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>

单击图像即可开始/播放嵌入式（iframe）youtube-video

7 个答案:

HTML

THE JQUERY