我想通过点击图片开始播放嵌入式YouTube视频。想法是在视频顶部有一个图像,当图像被点击时,它淡出并开始播放视频。
我使用jquery褪色的图像,并希望找到一种方法来播放或点击视频使用jquery以及。
褪色工作正常,但我不知道如何触发视频播放。
我通过将视频设置为自动播放和隐藏,然后在图片被点击时淡入视频,让它在几个浏览器上工作。在大多数浏览器上,视频会在淡入时自动播放,但在chrome中,即使被隐藏,它也会自动播放。它不能很好地在iOS中。
因为我是新的在这,我不确定如果我写100%正确,但我已经尝试这样没有成功:
$('#IMAGE').click(function() { $('#VIDEO').play(); });
那么,我将如何使视频在图片点击播放?
有没有方法来播放视频时的图像被点击,只是使用jquery?
先谢谢你。
解决方法
快速和肮脏的方式是简单地换出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>
JQUERY
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>'); }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。