Question

我是 HTML 的初学者，只想写一个带有小视频和文本的页面。我想自动播放视频但有声音。由于只能在没有声音的情况下自动播放，因此我认为我需要 javascript。

这是我目前的代码

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="generic.css">
    </head>
    <body>
        <video autoplay="autoplay" loop="" class="myVideo" id="myVideo">
            <source src="vid.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
          </video> 
    </body>
</html>

css 文件：

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

是否有可能或者我被迫使用按钮来自动播放？

Answer 1

你的代码是正确的，但这里是谷歌的政策 Chrome 的自动播放政策很简单：

始终允许静音自动播放。

在以下情况下允许自动播放声音：
用户与域进行了交互（点击、点按等）。
在桌面设备上，用户的媒体参与指数阈值已达到交叉，表示用户之前播放过有声视频。这用户已将该网站添加到他们的手机主屏幕或已安装桌面上的 PWA。

在加载视频之前尝试与片段互动

video {
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="generic.css">
    </head>
    <body>
        <video autoplay="autoplay" loop="" class="myVideo" id="myVideo">
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
          </video> 
    </body>
</html>

Answer 2

我见过人们使用的一个技巧是在元素本身之前添加一个包含自动播放材料的 iframe，从而强制后续元素具有音频。你可以检查类似的事情here。

<iframe src="SOME_EMPTY_VIDEO_WITH_SILENCE_URL" type="video/mp4" allow="autoplay" id="video" style="display:none"></iframe>
<video autoplay>
     <source src="ACTUAL_VIDEO_URL" type="video/mp4">
</video>

不过，就像我说的，这是一个令人讨厌的黑客。

自动播放带声音的视频

2 个答案: