时间戳

首页 > 解决方案 > html 视频无法在 google chrome 上播放，但会在 Firefox 上播放，但不同

css - html 视频无法在 google chrome 上播放，但会在 Firefox 上播放，但不同

问题描述

试图在谷歌浏览器的文本中播放视频，它只显示视频的截图，但不播放整个剪辑。它能够在文本中显示视频的显示。但是，在 Firefox 上，它会播放整个视频，但不会在文本中显示。似乎在我的脚本中找不到我的文本信息，或者只是忽略它。很奇怪。

document.getElementById('bg').play(); 
body {
    margin: 0px;
    padding: 0px;
    background-color: #fff;
}
         
#bg {
    height: 700px;
    width: 1250px;
    margin: 0px;
    padding: 0px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
         
}
    
#info {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30em;
    letter-spacing: 15px;
    margin: 15px 0px;
    padding: 0;
    fill: #000;
}
    
#masked {
    mask:url("#maskLayer");
}
<svg width="100%" height="100vh">
    <mask id="maskLayer">
        <rect width="100%" height="100%" fill="#fff"></rect>
        <text x="8%" y="55%" id="info">
            JSC
        </text>
    </mask>

    <rect id="masked" width"100%" height="100%" fill="#f5f5f5"></rect>
</svg>
<video src="Untitled.mov" id="bg" autoplay="autoplay"></video>

标签： csshtmlvideo

解决方案

我不确定“静音”是否是问题所在。

在您的第一篇文章中，您使用了“Untitled. mov ”。

在您的第二篇文章中，您使用了“Untitled. mp4 ”。

如果问题出在格式上 - 您可以使用未静音的视频。

亲切的问候

推荐阅读