Question

尝试在Google chrome上的文本中播放视频，它仅显示视频的屏幕截图，但不播放整个剪辑。它可以在文本中显示视频的显示。但是，在Firefox上，它会播放整个视频，但不会在文本中显示。似乎找不到我在脚本中拥有的文本信息，或者只是忽略了它。很奇怪。

csv.pyc

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");
}

Answer 1

nevermind! managed to work out what was wrong with it. just needed to mute the video! 

    <svg width="100%" height="100vh">
    <mask id="maskLayer">
        <rect width="100%" height="100%" fill="#fff"></rect>
        <text x="8%" y="55%" id="info">JSC
    </mask>

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

Answer 2

我不确定是否是“ 静音”。

在您的第一篇文章中，您使用了“无标题。 mov ”。

在第二篇文章中，您使用了“无标题。 mp4 ”。

如果问题出在格式上-您可以将视频设为无静音。

亲切的问候

html视频无法在Google chrome上播放，但可以在Firefox上播放，但与众不同

2 个答案: