同一个页面只能加载一个 canvas 播放器

[MuenYu]

Before mentioning Issue, please send the operating system, browser and version, and debug information together. If there is a flv address that can be accessed from the Internet, it will be more perfect to save time and troubleshoot the problem. Thank you.

在提Issue之前，请把操作系统，浏览器和版本，和debug信息也一起发出来，假如有一个外网可以访问的flv地址那就更完美了，以节省时间并排查问题，谢谢。

操作系统：windows 10
浏览器：Google Chrome 96.0.4664.45
debug: 无报错

在 vue 中使用，将播放器作为一个 components，在视图中多次加载此 component，只会有一个播放器出现

App.vue

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
  <HelloWorld />
</template>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
</style>

HelloWorld.vue

<template>
  <div class="flvplayer-app" @click="jump"></div>
</template>

<script>
import * as FlvPlayer from "flvplayer";

export default {
  data() {
    return {
      player: null,
      count: 0,
    };
  },
  mounted() {
    this.player = new FlvPlayer({
      // Accept http url, websocket url, and file type
      url: "/video/demo.flv",

      // Accept dom element, dom selector
      container: ".flvplayer-app",

      // Video poster url
      poster: "",

      // Whether to print debug information
      debug: false,

      // Whether live mode
      live: false,

      // Whether the video loops, in non-live mode
      loop: true,

      // Whether to use hotkeys, if the control exists
      hotkey: true,

      // Whether to turn off the volume
      muted: true,

      // On the mobile side, try to activate the audio after the user touches the screen.
      touchResume: false,

      // Video chunk size, the default is 1M
      videoChunk: 1024 * 1024,

      // Audio chunk size, the default is 16kb
      audioChunk: 16 * 1024,

      // Whether to play automatically
      autoPlay: false,

      // Whether it contains an audio stream
      hasAudio: false,

      // Whether to cache the video frame to play
      cache: true,

      // Maximum time difference between audio and video, unit is ms
      // used to automatically adjust audio and video synchronization
      maxTimeDiff: 200,

      // Whether to display the control, if the control exists
      control: false,

      // Indicates whether to do http fetching with cookies
      withCredentials: true,

      // Indicates total file size of media file, in bytes
      filesize: Infinity,

      // Indicates whether to enable CORS for http fetching
      cors: true,

      // Volume from 0 to 1, the default is 0.7
      volume: 0.7,

      // Initialize the frame rate, which will be covered by the actual frame rate of the file
      frameRate: 30,

      // Initialize the width, which will be covered by the actual width of the file
      width: 1280,

      // Initialize the height, which will be covered by the actual height of the file
      height: 720,

      // Initialize http headers
      headers: {},

      // The path of the video decoder, currently optional flvplayer-decoder-baseline.js and flvplayer-decoder-multiple.js
      decoder:
        "https://cdn.jsdelivr.net/npm/flvplayer@1.1.8/dist/flvplayer-decoder-baseline.js",
    });
  },
  methods: {
    jump() {
      this.count++;
      if (this.count == 1) {
        this.player.play();
      } else {
        location.href = "https://www.baidu.com";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

#header {
  position: fixed;
  width: 100%;
  background: white;
}
</style>

[MuenYu]

找到问题了：dom 操作把视频内容填充到了同一个 dom 里面（selectquery）