单击图像即可开始/播放嵌入式(iframe)youtube-video

Question

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

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

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

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

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

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

先感谢您.

Answer 1

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

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>

观众

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

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

要开始播放视频

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

停止视频

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

您可能希望将"&autoplay = 1"替换为"？autoplay = 1",因为没有其他参数

适用于FF和Chrome上的vimeo和youtube

Answer 4

示例 youtube iframe

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

点击播放 HTML 元素

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

播放视频的jQuery代码

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

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

Answer 5

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

然而它并没有很好的记录。我现在正在尝试类似的事情。