gpt4 book ai didi

javascript - 自动播放有声视频

转载 作者:行者123 更新时间:2023-12-04 08:23:00 24 4
gpt4 key购买 nike

我是 HTML 的初学者,只想写一个带有小视频和文本的页面。
我想自动播放视频但有声音。由于只能在没有声音的情况下自动播放,我假设我需要 javascript。
到目前为止,这是我的代码
索引.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%);
}
有可能还是我被迫使用按钮自动播放?

最佳答案

您的代码是正确的,但这是谷歌的策略
Chrome 的自动播放策略很简单:
始终允许静音自动播放。

  • 在以下情况下允许自动播放声音:
  • 用户与域进行了交互(单击、点击等)。
  • 在桌面上,用户的媒体参与指数阈值已
    交叉,表示用户之前播放过有声视频。这
    用户已将网站添加到移动设备的主屏幕或已安装
    桌面上的 PWA。

  • 在加载视频之前尝试使用片段进行 INTREACT

    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>

    关于javascript - 自动播放有声视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65405988/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com