Safari 没有在 Rails 应用程序中加载 HTML5 视频

Question

我有一个 Rails 应用程序，我正在尝试使用以下标记播放 HTML5 视频：

不起作用：

<video controls poster="http://lvh.me:3000/assets/videos/myvideo.png">
  <source src="http://lvh.me:3000/assets/images/videos/myvideo.mp4" type="video/mp4">
  <source src="http://lvh.me:3000/assets/images/videos/myvideo.webm" type="video/webm">
  <source src="http://lvh.me:3000/assets/images/videos/myvideo.ogv" type="video/ogg">
</video>

在 Safari 上，视频显示“正在加载...”，但从未播放，尽管它​​在 Chrome 和 Firefox 中按预期工作。起初我以为它可能是路径，但我尝试了绝对路径、相对路径和 Rails image_path 助手，但没有结果。

为了调试，我复制了这个 HTML5 视频标签示例，它在 Safari 中按预期播放（这里唯一的区别是源视频）：

作品：外部托管的示例视频

<video controls poster="http://easyhtml5video.com/assets/video/Penguins_of_Madagascar.jpg">
  <source src="http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.mp4" type="video/mp4">
  <source src="http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.webm" type="video/webm">
  <source src="http://easyhtml5video.com/assets/video/new/Penguins_of_Madagascar.ogv" type="video/ogg">
</video>

但是，当我采用完全相同的标记并在本地托管这些相同的文件时，视频在 Safari 中停止工作：

不起作用：本地托管的示例视频

<video controls poster="http://lvh.me:3000/assets/videos/Penguins_of_Madagascar.jpg">
  <source src="http://lvh.me:3000/assets/videos/new/Penguins_of_Madagascar.mp4" type="video/mp4">
  <source src="http://lvh.me:3000/assets/videos/new/Penguins_of_Madagascar.webm" type="video/webm">
  <source src="http://lvh.me:3000/assets/videos/new/Penguins_of_Madagascar.ogv" type="video/ogg">
</video>

注意事项：

• Safari 控制台或 Rails 日志中没有出现错误；文件或任何内容上没有 404。
• 本地托管的视频可以在 Chrome 和 FF 中运行，所以我知道路径是正确的。
• 外部托管的视频在 Safari 中运行良好。
• 本地托管的视频可以在 Rails 应用程序之外的 Safari 中工作 - 我创建了一个静态页面并使用了上面的所有示例，效果很好。

基于所有这些，似乎 Safari 和 Rails 的某种组合阻止了视频加载。

Answer 1

我知道这个问题已经超过 5 年了，但我遇到了同样的问题并解决了它，所以我会在这里发布我的解决方案。

当您将视频文件放入资产文件夹时，它们会以一种特殊的方式提供。然后，不提供字节范围请求。这意味着 Safari 不会播放视频，因为它需要字节范围请求才能在视频中跳转并以不同的速度播放。

如果您将视频放入公用文件夹并从那里提供服务，则服务它们的是中间件，在这种情况下，范围请求会得到服务。 （轨道 5）

因此，只需将您的视频移至public。至少这对我来说是固定的......

Answer 2

参考链接：https://superuser.com/questions/870133/html5-video-tag-not-supported-in-safari-5-1-on-windows-7

由于 rails 中的 video_tag 在内部使用 HTML5 'video' 标签属性，而 safari 不支持 HTML5 video 标签属性。

为了让 HTML5 视频在 Windows 上通过 Safari 播放，您 需要安装 Quicktime。

我这样做了，但视频仍然无法播放。

但是，一旦我重新启动我的机器，一切都按预期进行 到！

Answer 3

我遇到了同样的问题，发现这是您在视频中前后移动所需的字节范围。

Here's some middleware that adds support for the byte-range HTTP header:

# (c) Thomas Fritzsche
# This is prove-of-concept coding only
# iOS devices insist on support for byte-rage http header, that is not native
# supported by rack apps like dragonfly
# this rack middleware will evaluate the http header and provide byte range support.

# For a dragonfly Rails (3.2.3) app I have tested this will call like this.
# I reload Rack::Cache that case trouble when initialized by Rails.
# This small trick makes it working :-)
#-----------------------
#require 'dragonfly/rails/images'
#require "range"
#
#
#Rails.application.middleware.delete(Rack::Cache)
#Rails.application.middleware.insert 0, Rack::Cache, {
#  :verbose     => true,
#  :metastore   => URI.encode("file:#{Rails.root}/tmp/dragonfly/cache/meta"), 
#  :entitystore => URI.encode("file:#{Rails.root}/tmp/dragonfly/cache/body")
#}
#
#Rails.application.middleware.insert_before Rack::Cache, RangeFilter
#
# [...]
#-------------------


class RangeFilter
  def initialize(app)
    @app = app
  end

  def call(env)
    dup._call(env)
  end   

  def _call(env)
    @status, @headers, @response = @app.call(env)    
    range = env["HTTP_RANGE"]
    if @status == 200 and range and /\Abytes=(\d*)-(\d*)\z/ =~ range
      @first_byte, @last_byte = $1, $2


      @data = "".encode("BINARY")
      @response.each do |s|
        @data << s
      end             
      @length = @data.bytesize if @length.nil? 
      if @last_byte.empty?
        @last_byte = @length - 1
      else
        @last_byte = @last_byte.to_i
      end
      if @first_byte.empty?
        @first_byte = @length - @last_byte
        @last_byte = @length - 1
      else
        @first_byte = @first_byte.to_i
      end    
      @range_length = @last_byte - @first_byte + 1
      @headers["Content-Range"] = "bytes #{@first_byte}-#{@last_byte}/#{@length}"
      @headers["Content-Length"] = @range_length.to_s
      [@status, @headers, self]
    else     
      [@status, @headers, @response]
    end  
  end

  def each(&block)
    block.call(@data[@first_byte..@last_byte])
    @response.close if @response.respond_to?(:close)
  end   

end

如需进一步参考，请查看rails media file stream accept byte range request through send_data or send_file method 或this Ruby Forum post。