vue 视频无法播放报错

问题遇到的现象和发生背景

视频无法播放

问题相关代码，请勿粘贴截图

 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

设置 video 为静音状态就可以解决,添加属性muted

好像是浏览器不允许直接开始播放的原因，还是让用户手动播放吧。过去好像还有一些小技巧可以直接运行，现在好像都不太行了。

浏览器不支持打开网页自动播放，需要定义一个按钮手动触发播放

大佬們 你們試試看 代碼給你們

<template>
  <div id="app">
    <!-- 
     controls 如果出现该属性，则向用户显示控件，比如播放按钮。  
     autoplay="true" 如果出现该属性，则视频在就绪后马上播放。
     loop 如果设置该属性，则视频将循环播放。
     preload="true"   如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
     poster="../assets/静态监控.gif"  属性指定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
    -->
    <video id="hlsVideo" ref="hlsVideo" controls preload="true" muted></video>
  </div>
</template>


<script>
import Hls from "hls.js";
export default {
  name: "dHelp",
  data() {
    return {
      hls: "",
    };
  },
  methods: {
    destroyHls: function () {
      if (this.hls) {
        this.$refs.hlsVideo.pause();
        this.hls.destroy();
        this.hls = null;
      }
    },
    loadVideoFn: function () {
      if (Hls.isSupported()) {
        this.hls = new Hls();
        this.hls.loadSource(
          "http://140.143.244.187:9040/camera?device=3301061000057&channel=0&streamtype=0&token=SL802afwKbzoSqbd34&type=std.m3u8"
        ); // CCTV1直播源
        this.hls.attachMedia(this.$refs.hlsVideo);
        this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
          console.log("加载成功");
          this.$refs.hlsVideo.play();
        });
        this.hls.on(Hls.Events.ERROR, (event, data) => {
          // console.log(event, data);
          // 监听出错事件
          console.log("加载失败");
        });

      }
    },
  },
  computed: {},

  created: function () {
    let _this = this;
    _this.$once("hook:beforeDestroy", () => {
      _this.destroyHls();
    });
  },

  mounted() {
    let _this = this;
    _this.loadVideoFn();
  },

  watch: {},

  components: {},
};
</script>

<style  scoped>
#hlsVideo {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

使用liveplayer可以

 <live-player
      ref="player2"
      v-contextmenu:contextmenu="enableContextmenu"
      :alt="alt"
      :aspect="'fullscreen'"
      :autoplay="autoplay"
      :live="live"
      :muted="muted"
      :video-title="title"
      :video-url="url"
    />

https://blog.csdn.net/m0_52539553/article/details/122088676?spm=1001.2014.3001.5502

现在已经是这个选项了。把它禁用
Use realtime priority thread for Audio Worklet

浏览器不支持打开网页自动播放

解决方案为 在chrome地址栏输入chrome://flags/。设置Autoplay policy为No user gesture is required。