开始/播放embedded式（iframe）youtube-video点击图像

我正尝试通过点击图片来播放embedded的YouTubevideo。 这个想法是在video的顶部有一个图像，当图像被点击时，它会淡出并开始播放video。

我正在使用jquery淡入淡出的图像，并希望find一种方式来播放或使用jquery点击video。

衰落工作正常，但我不知道如何触发video播放。 我通过将video设置为自动播放并将其隐藏，然后在点击图像时淡入video，从而在几个浏览器上工作。 在大多数浏览器中，video会在淡入时自动播放，但在Chrome浏览器中即使在隐藏时也会自动播放。 它在iOS中也不能很好地工作。

由于我在这方面很新颖，所以我甚至不确定是否将它写成100％正确，但是我已经尝试过这样的事情而没有成功：

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

那么，我将如何去点击图像播放video？ 有没有一种方法来播放video点击图片时，只使用jQuery？

先谢谢你。

Answer 1

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

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> 

JQUERY

调用函数的onClick捕获器

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

---

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

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

开始video

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

停止video

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

您可能希望将“＆autoplay = 1”replace为“？autoplay = 1”，因为没有其他参数

适用于FF和Chrome上的vimeo和youtube

Answer 4

你应该能够指定一个安全的脚本的域名。 api文档提到“作为一种额外的安全措施，您还应该在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。

但是它没有很好的logging。 我正在尝试类似的东西。

Answer 5

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 6

这应该工作完美只是复制这个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> 

Answer 7

示例youtube iframe

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

点击播放HTML元素

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

jQuery代码来播放video

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

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