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

问题描述

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

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

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

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

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

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

提前致谢.

解决方案

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

HTML

占位符:

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

<小时>

自动播放链接:

<a class="introVid" href="#video">观看视频</a></p>

JQUERY

调用函数的onClick捕获器

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

<小时>

功能

/*--------------------------------用自动播放视频交换视频---------------------------------*/功能自动播放视频(vcode，宽度，高度){严格使用"；$("#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>');}

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.

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.

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.

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

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?

Thank you in advance.

解决方案

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

THE 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 onClick catcher that calls the function

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

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