Question

我创建了一个视频缩略图，点击后会触发隐藏在其后面的视频自动播放。视频/图像缩略图也具有响应性，并可根据浏览器大小的变化进行调整。

该功能在Chrome＆amp;桌面上的Firefox，但不是Safari。此外，它在Chrome和Safari应用程序中的iPhone 4s上都不起作用。

这与Safari不处理大图像没有关系，因为我的图像只有416×234。

编辑：我应该补充一点，自动播放功能保持不变。每当我点击img应该在屏幕上的位置时，就会开始自动播放。这甚至适用于移动设备（尽管没有自动播放，因为它不支持移动设备）。这也不是扩展/命名问题，因为当我检查源代码时，safari浏览器正在加载图像。

相关HTML：

<div id="video-thumbnail">
    <img src="norman.png" class="video-image" alt=""/> 
    <iframe class="video-embed" frameborder="0" allowfullscreen=""  src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&color=white&controls=1&showinfo=0" s8011508427261248624="true" replaced="true" ></iframe>
</div>

CSS：

#video-thumbnail {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 55px;
     height: 0;
     overflow: hidden;
}

.video-image {
     position: relative;
     content: "";
     cursor: pointer;
     z-index: 5;
}

.video-embed {
     display: none;
     opacity: 0;
     z-index: 10;
}

.video-image, .video-embed {
     position: absolute;
     top:0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 60px 60px 80px 60px;
}

JS：

 (function($){
      $(document).ready( function(){
           $(".video-image").click(function(){
           $(".video-embed").css({"opacity":"1","display":"block"});
           $(".video-embed")[0].src += "&autoplay=1";
           $(this).unbind("click");
          });
      } );
  })(jQuery)

Answer 1

我已经回答了我自己的问题。删除行

content: "";

来自.video-image的CSS的

做了伎俩。这被错误地复制了之前的例子。有趣的是，JS在Chrome和＆amp ;;中处理了这个标签的存在。 Firefox与Safari不同。在JS中没有经验足以完全理解为什么，如果有人有解释，我会喜欢解释。

Answer 2

所以这不是一个真正的修复，因为你已经自己回答了这个问题但是因为你似乎对这个问题很感兴趣，所以在每个现代浏览器上默认情况下都会按照不同的规因此，在这个例子中，

content : " ";

使chrome和firefox采用默认值，而safari可能不允许在他们的JS处理程序中使用空字符串。如果您对此工作的详细信息更感兴趣，这些链接将帮助您解决问题。

https://www.quora.com/Why-do-different-browsers-process-CSS3-HTML-5-and-JavaScript-differently和此stack question

我的图片显示在Chrome＆amp; Firefox，但不是safari或iPhone

2 个答案: