单击图像时开始/播放嵌入式(iframe)youtube-video [英] start/play embedded (iframe) youtube-video on click of an image

问题描述

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

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.

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

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.

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

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.

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

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:

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

那么，我将如何让视频在点击图片时播放?有没有办法在点击图片时播放视频，只使用jquery?

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?

提前谢谢你.

推荐答案

快速而肮脏的方法是简单地将 iframe 换成具有 autoplay=1 的框架使用 jQuery 设置.

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

占位符:

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

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

这篇关于单击图像时开始/播放嵌入式(iframe)youtube-video的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！