开始/播放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?

先谢谢你。

快速和肮脏的方法是简单地换出一个使用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>'); } 

你可以这样做

 $('#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。

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

你应该能够指定一个安全的脚本的域名。 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。 我正在尝试类似的东西。

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

而已!

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

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