如何让Chromium浏览器自动播放带声音的视频

我正在制作一个可自动循环播放多视频的页面，目前已实现视频自动切换播放，但无论如何都无法让Chromium浏览器播放视频声音。试过几种iframe方案都无效，急需解决带声音播放的问题。

现有代码 #

代码1 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display - Poster Boxes </title>
    <link rel="stylesheet" href="css/main.css">
    
</head>
<body>

<audio autoplay loop  id="playAudio">
    <source src="audio/source.mp3">
</audio>

 <video muted autoplay onended="run()"  class="fullscreen-video" id="homevideo">
            <source src="video1.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
          </video> 

<script>

video_count =1;
videoPlayer = document.getElementById("homevideo");

function run(){
        video_count++;
        if (video_count == 3) video_count = 1;
        var nextVideo = "video"+video_count+".mp4";
        videoPlayer.src = nextVideo;
        videoPlayer.play();
   };
   </script>
</body>
</html>

代码2 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Omniplex Display - Poster Boxes </title>
    <link rel="stylesheet" href="css/main.css">
    
</head>
<body>

<audio autoplay loop  id="playAudio">
    <source src="audio/source.mp3">
</audio>

 <video muted autoplay onended="run()"  class="fullscreen-video" id="homevideo">
            <source src="video1.mp4" type="video/mp4">
            Your browser does not support HTML5 video.
          </video> 

<script>

video_count =1;
videoPlayer = document.getElementById("homevideo");

function run(){
        video_count++;
        if (video_count == 3) video_count = 1;
        var nextVideo = "video"+video_count+".mp4";
        videoPlayer.src = nextVideo;
        videoPlayer.play();
   };
   </script>
</body>
</html>

解决方案 #

1. 移除视频静音属性 #

视频标签里的muted属性是导致无声音的直接原因，先删除该属性：

<video autoplay onended="run()" class="fullscreen-video" id="homevideo">

2. 适配Chromium自动播放策略 #

Chromium禁止无用户交互时自动播放带声音的媒体，必须通过用户触发事件（如点击）启动播放。可以添加页面点击监听来初始化：

修改后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display - Poster Boxes </title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<video autoplay onended="run()" class="fullscreen-video" id="homevideo">
    <source src="video1.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video> 

<script>
let video_count = 1;
const videoPlayer = document.getElementById("homevideo");

// 首次点击页面触发播放，绕过浏览器限制
document.addEventListener('click', () => {
    if (videoPlayer.paused) videoPlayer.play();
}, { once: true });

function run(){
    video_count++;
    if (video_count == 3) video_count = 1;
    const nextVideo = `video${video_count}.mp4`;
    videoPlayer.src = nextVideo;
    // 捕获播放失败错误，提示用户操作
    videoPlayer.play().catch(err => console.log("请点击页面启动播放:", err));
};
</script>
</body>
</html>

3. 无人值守场景特殊处理 #

如果是数字标牌这类无人值守场景，可以通过Chromium启动参数绕过自动播放限制：

chromium-browser --autoplay-policy=no-user-gesture-required

同时确保视频文件本身包含有效音频轨道，优先使用MP4（H.264视频+AAC音频）格式。

内容的提问来源于stack exchange，提问作者Martin Mc Quaid