使用video.js实现视频有声的自动播放，类似b站、抖音？

Question

求助大佬！需求是类似B站抖音这类视频软件，进入页面视频自动播放，是有声音的，目前代码如下：

<video id="video_id" class="video-js video-tech" poster="../images/video-poster.png" controls preload="auto" data-setup="{}">
    <source src="/2023.11.22%20LENOVO%20X7%20V6TJNB2.mp4" type="video/mp4">
    <p class="vjs-no-js">To view this video please enable JavaScript, and considerupgrading to a web browser that
          <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

var options = {
        autoplay: true,
        aspectRatio: "16:9",
    };
    var playerVideo = videojs("video_id", options);
    playerVideo.ready(function() {
        var promise = playerVideo.play();
        if (promise !== undefined) {
            promise.then(function() {
                console.log(111111111111);
                });
            }).catch(function(error) {
                console.log(2222222222);
            })
        }
    })

Answer 1

先了解个概念，叫做，媒体意愿度，
你说的那些网站，能自动播放，是因为媒体意愿度高，具体这个意愿度哪里查，可以在地址栏输入这个地址查看chrome://media-engagement/
怎么提高你网站的媒体意愿度，开发者干涉不了，只能通过用户使劲和你网站的视频播放功能进行交互，才能提高。

---

比如,你说的抖音,我不常打开,媒体意愿度底,
我现在打开抖音,它也是静音才能自动播放的.

Answer 2

媒体参与度（MEI）衡量个人在网站上使用多媒体的倾向
它是一个数字 可通过chrome://media-engagement/查看
数值越高，用户对该站点的媒体参与度越高，就越有机会自动播放

第一种方法 播放失败 让用户进行交互后开始播放

try{
 await video.play()
}catch(){
 //说明媒体参与度指数阈值未超过  出现弹框按钮  点击按钮开始播放
}

第二种方法 先静音播放（静音的是可以自动播放的） 看声音是否正常出现的上下文的音轨上 如果不是正常出现 弹框按钮 让用户进行交互后点击开始取消静音

funtion play(){
  video.muted = true;
  video.play();
  const ctx = new AudioContext();
  const canAutoPlay = ctx.state === 'running';
  ctx.close();
  if(canAutoPlay){
    video.muted = flase;
  }else{
     //弹框展示按钮  点击按钮取消静音
  }
}

Answer 3

说白话一点就是：

你开发的含视频的web页面，不被很多浏览器认可，所以不被允许自动播放出声音。

这个没有简单的处理方式，要么客户选用不被限制的浏览器，要么你的网站通过长期积累，被浏览器认可。

Answer 4

在浏览器中video自动播放都是默认静音的，可以做个弹窗之类得诱导用户去点击触发一下，有用户交互行为就能JS开启声音了，不然就是静音得，斗鱼虎牙之类的是人家大公司，用户意愿高，相当于有个白名单的，这个没办法的，只能这样曲线救国。