Question

我有一个适用于Chrome和Firefox的视频标签，但不适用于Safari。这是我的标签

在html上：

<%= video_tag("working.mp4", class:"video", autoplay: :autoplay, loop: :loop, mute: :mute, poster: "working.jpeg") %>

关于css：

.video {
position: absolute;
top: 50%; left: 50%;
width:100%;
height: 870px;
z-index:1;
object-fit: cover;
transform: translate(-50%, -50%);
display:block !important;

}

该视频目前位于＆＃34; assets / video / working.mp4＆＃34;

Answer 1

试试这个（如果它不是mime类型问题）：

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

什么是正确的MIME类型？你已经看过了;它是元素上type属性值的一部分。但是在HTML标记中设置type属性是不够的。您还需要确保您的Web服务器在Content-Type HTTP标头中包含正确的MIME类型。

如果您使用的是Apache Web服务器或Apache的衍生产品，则可以在站点范围的httpd.conf或存储视频文件的目录中的.htaccess文件中使用AddType指令。（如果您使用其他一些Web服务器，请参阅服务器的文档，了解如何为特定文件类型设置Content-Type HTTP标头。）

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

第一行是Ogg容器中的视频。第二行是MPEG-4容器中的视频。第三个是WebM。设置一次并忘记它。如果您忘记设置它，即使您在HTML标记的type属性中包含MIME类型，您的视频也无法在某些浏览器中播放。

Source

视频标签在Safari上无法使用rails

1 个答案: