相关疑难解决方法(0)

在网上无数的地方,我已经看到了在JavaScript之前包含CSS的建议.一般来说,推理的形式如下:

在订购CSS和JavaScript时,您希望首先使用CSS.原因是渲染线程具有渲染页面所需的所有样式信息.如果首先包含JavaScript,则JavaScript引擎必须先解析它,然后再继续使用下一组资源.这意味着渲染线程无法完全显示页面,因为它没有所需的所有样式.

我的实际测试揭示了一些截然不同

我的测试工具

我使用以下Ruby脚本为各种资源生成特定的延迟:

require 'rubygems'
require 'eventmachine'
require 'evma_httpserver'
require 'date'

class Handler  < EventMachine::Connection
  include EventMachine::HttpServer

  def process_http_request
    resp = EventMachine::DelegatedHttpResponse.new( self )

    return unless @http_query_string

    path = @http_path_info
    array = @http_query_string.split("&").map{|s| s.split("=")}.flatten
    parsed = Hash[*array]

    delay = parsed["delay"].to_i / 1000.0
    jsdelay = parsed["jsdelay"].to_i

    delay = 5 if (delay > 5)
    jsdelay = 5000 if (jsdelay > 5000)

    delay = 0 if (delay < 0) 
    jsdelay = 0 if (jsdelay < 0)

    # Block which …

我有一组 MP4 视频，当容器悬停时将播放这些视频。请参阅本页底部的 3 张图片进行演示：

https://ts133842-container.zoeysite.com/

这在 Chrome 中效果很好，但在 Safari 中视频将无法播放，并且控制台在悬停时显示错误。

未处理的承诺拒绝：[object DOMError]

我已经寻找解决方案，但未能找到修复方法。请参阅下面我的代码：

<div class="video-container">
  <video loop muted preload="auto">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>
<div class="image-container"><img src="image.png"/></div>

<div class="video-container">
  <video loop muted preload="auto">
    <source src="video.mp4" type="video/mp4">
  </video>
</div>
<div class="image-container"><img src="image.png"/></div>

有人可以分享有关 Safari 为何抛出此错误的任何见解吗？预先非常感谢您。

编辑：我现在注意到这在 iPad 或 iPhone 上不起作用，所以这不仅仅是桌面版 Safari 的问题。但是，我不确定为什么我无法在网上找到有关此错误的更多信息。