自动播放带声音的视频



我是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%);
}

这有可能吗?还是我被迫使用按钮进行自动播放?

您的代码是正确的,但以下是谷歌的策略Chrome的自动播放策略很简单:

始终允许静音自动播放。

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

在加载视频前尝试使用SNIPET进行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>

我见过人们使用的一个技巧是在元素本身之前添加一个包含自动播放材料的iframe,从而迫使后续元素具有音频。你可以在这里检查一下类似的东西。

<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>

尽管如此,正如我所说,这是一次令人讨厌的黑客攻击。

根据新政策-https://developer.chrome.com/blog/autoplay/#new-行为。应该有用户交互来自动播放任何有声音的视频。

以下是相同的示例解决方案:-

HTML5视频自动播放与声音未静音

希望它对你有效,如果你的打击不同,请告诉我。

最新更新