jQuery 单击图像开始/播放嵌入的 (iframe) youtube-video

start/play embedded (iframe) youtube-video on click of an image

提问by Corn

I'm trying to start playing an embedded youtube video by clicking an image. The idea is to have an image on top of a video, and when the image is clicked it fades out and starts playing the video.

我正在尝试通过单击图像开始播放嵌入的 youtube 视频。这个想法是在视频顶部放置一个图像，当点击图像时，它会淡出并开始播放视频。

I'm using jquery to fade the image, and was hoping to find a way to play or click the video using jquery as well.

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

The fading is working fine, but I can't figure out how to trigger the video to play. I got it to work on a couple of browsers by setting the video to autoplay and hide it, and then fade in the video when the image was clicked. On most browsers the video would autoplay when faded in, but in chrome it started to autoplay even when it was hidden. It didn't work well in iOS either.

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

Since I'm pretty new at this, I'm not even sure if I'm writing it 100% correct, but I've tried something like this without success:

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

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

So, how would I go about to make the video play on an image click? Is there a way to play the video when the image is clicked, just using jquery?

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

Thank you in advance.

先感谢您。

回答by gearsandcode

The quick and dirty way is to simply swap out the iframewith one that has autoplay=1set using jQuery.

快速和肮脏的方法是简单地交换了iframe一个已经autoplay=1使用jQuery设置。

THE HTML

HTML

Placeholder:

占位符：

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

---

---

Autoplay link:

自动播放链接：

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

THE JQUERY

查询

The onClickcatcher that calls the function

onClick调用函数的捕获器

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

---

---

The function

功能

/*--------------------------------
  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>');
}

回答by drupal_mohitsharma

You can do this simply like this

你可以像这样简单地做到这一点

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

where image_idis your image id you are clicking and some_idis id of div in which iframe is also you can use iframe id directly.

其中image_id是您单击的图像 id，some_id是 div 的 id，其中 iframe 也是您可以直接使用 iframe id。

回答by Faiz Mohamed Haneef

To start video

开始视频

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

To stop video

停止视频

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

You may want to replace "&autoplay=1" with "?autoplay=1" incase there are no additional parameters

如果没有其他参数，您可能希望将“&autoplay=1”替换为“?autoplay=1”

works for both vimeo and youtube on FF & Chrome

适用于 FF 和 Chrome 上的 vimeo 和 youtube

回答by alex

Example youtube iframe

示例 youtube iframe

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

The click to play HTML element

点击播放 HTML 元素

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

jQuery code to play the Video

播放视频的jQuery代码

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

Thanks to https://codepen.io/martinwolf/pen/dyLAC

感谢https://codepen.io/martinwolf/pen/dyLAC

回答by matt

You are supposed to be able to specify a domain that is safe for scripting. the api document mentions "As an extra security measure, you should also include the origin parameter to the URL" http://code.google.com/apis/youtube/iframe_api_reference.htmlsrc="http://www.youtube.com/embed/J---aiyznGQ?enablejsapi=1&origin=mydomain.com" would be the src of your iframe.

您应该能够指定一个对脚本编写安全的域。api 文档提到“作为额外的安全措施，您还应该在 URL 中包含 origin 参数” http://code.google.com/apis/youtube/iframe_api_reference.htmlsrc="http://www.youtube. com/embed/J---aiyznGQ?enablejsapi=1&origin=mydomain.com" 将是您的 iframe 的 src。

however it is not very well documented. I am trying something similar right now.

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

回答by Anuj Khandelwal

Html Code:-

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 Code:-

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!

就是这样！

回答by Jamil Ahmed

This should work perfect just copy this div code

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