我有一个 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 中按预期工作。我一开始以为可能是路径,但我尝试过绝对路径、相对路径和Railsimage_path
帮助者没有结果。
为了调试,我复制了这个示例 HTML5 视频标签,它按预期在 Safari 中播放(这里唯一的区别是源视频):
Works:外部托管的示例视频
<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>
Notes:
- 我在 Safari 控制台或 Rails 日志中没有收到错误;文件或其他内容上没有 404 错误。
- 本地托管视频可在 Chrome 和 FF 中运行,因此我知道路径是正确的。
- 外部托管的视频在 Safari 中运行良好。
- 本地托管视频在 Rails 应用程序之外的 Safari 中工作 - 我创建了一个静态页面并使用了上面的所有示例,效果良好。
基于所有这些,似乎 Safari 和 Rails 的某种组合阻止了视频加载。