我有一个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的某种组合阻止了视频的加载。
mime_types.rb
文件中:Rack::Mime::MIME_TYPES.merge!( ".ogg" => "application/ogg", ".ogx" => "application/ogg", ".ogv" => "video/ogg", ".wemb" => "video/webm", ".mp4" => "video/mp4", ".m4v" => "video/mp4")
- Chris<source src="http://127.0.0.1/assets/videos/
等等...并查看是否有所帮助(assets文件夹必须存在于本地主机服务器的根目录中)。 - VC.One