HTML-видео не будет воспроизводиться на Google Chrome, но будет воспроизводиться на Firefox, но отличается

Question

Попытка воспроизвести видео в тексте на Google Chrome. Он показывает только скриншот видео, но не воспроизводит весь клип.это может показать отображение видео в тексте.однако в 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>

Answer 1

Я не уверен, была ли проблема " muted ".

В своем первом посте вы использовали "Untitled. mov ".

Во втором посте вы использовали «Без названия. mp4 ».

Если проблема была в формате - вы можете использовать видео без звука.

С уважением

Answer 2

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>