Question

这不是我的第一篇帖子，但丢失了登录凭据，所以重新开始。

我需要实现的是将一些原始Javascript与JQuery结合起来。我有一个YouTube视频（iframe），我的客户希望这个覆盖了带有HTML内容的div，然后点击覆盖的div中的图像播放视频并隐藏重叠的div。

这是我到目前为止所拥有的。

<iframe src="//www.youtube.com/embed/6TgyvSQlJtI?wmode=transparent&enablejsapi=1&rel=0&autohide=1" frameborder="0" allowfullscreen id="video"></iframe>

$( document ).ready(function() {
$('#education-graphic').click(function() {
    $('#video-content-overlay').fadeOut('fast');
}); 
$('#video-back').click(function() {
    $('#video-content-overlay').fadeIn('fast');
}); 
});


var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('video', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
var playButton = document.getElementById("education-graphic");
playButton.addEventListener("click", function() {
player.playVideo();
});
var pauseButton = document.getElementById("video-back");
pauseButton.addEventListener("click", function() {
player.pauseVideo();
});
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

问题出现在ipad上，两个点击事件都附加到同一个元素上，所以我需要一些方法来隐藏和显示带有原始js的div或者使用jquery播放和暂停视频。

是的，我知道JQuery是JS，但是我在使用它时遇到了问题。

提前为此提供任何帮助。

Answer 1

以下内容应该有效：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<style>
   .oVideo {
      width: 300px;
      height: 150px;
      background-color: #f00;
   }
</style>

<div class="oVideo">
</div>

<script>
   $(document).ready(function () {
      $('.oVideo').click(function () {
         var video = '<iframe src="http://www.youtube.com/embed/6TgyvSQlJtI?wmode=transparent&enablejsapi=1&rel=0&autohide=1&autoplay=1" frameborder="0" allowfullscreen id="video"></iframe>';
         $('.oVideo').html(video);
      });
   });
</script>

您只需将背景颜色替换为您的图片。

如果您将带有CSS的'.oVideo'光标设置为'指针'，则可以对此进行优化。

点击播放YOUTUBE视频并隐藏div

1 个答案: