Question

我需要加载30秒mp4视频。当我在Safari中加载我的HTML时，它可以很好地处理所有负载和视频播放;但是，当我在Chrome中加载HTML文件时，视频文件无法加载。我有一个模板文件，其中包含相同的代码（不同的视频），可以在Chrome中加载视频。

视频文件有问题吗？它是.mp4但它没有H.264作为编解码器。

以下是我的视频HTML：

<section id="video">
    <!--video width = "640" height = "480" autoplay = "false" controls>-->
    <video width = "540" height = "380" controls>
    <source src="video/manchester.mp4"/>
</section>

和CSS：

section #video {
    position: relative;
    float: right;
    width: 50%;
    margin-top: 100px;
}

我正在使用Mac OS X，我通过iMovie导出了视频文件。

Answer 1

Safari将尝试使用Quicktime播放所有视频内容，因此它会非常宽容它的格式。但是，为了在Chrome中播放，该文件必须是H.264或WebM。有关支持的格式的信息，请参阅此链接：https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats

为获得最佳兼容性，您应该至少在H.264 MP4和WebM中提供视频，并确保将H.264配置文件保留为主3.1或类似设备以确保其在移动设备上播放。

Answer 2

将静音添加到视频标签可以解决我的问题以及添加webm版本

查看代码：

            <video autoplay poster="img/video/bg-video-1.jpg" id="bgvid" loop muted> 
                <source src="img/video/video.webm" type="video/webm"> 
                <source src="img/video/video.mp4" type="video/mp4">
                <source src="img/video/video.ogg" type="video/ogg">
            </video>

视频无法在Chrome中加载，但可在Safari中使用

2 个答案: