109video播放视频流

# html部分

          <video
            class="train-video-play"
            :src="item.buffer"
            controls="controls"
          ></video>

1
2
3
4
5

# js部分

 fetchTrainVideoData() {
      this.trainVideoList = [];
      const url = "/statistics/queryVideoList";
      const url1 = "/statistics/queryVideoInfo";
      request.get(url).then((res) => {
        res.data?.forEach((item) => {
          this.trainVideoList.push({
            labelName: item.name,
            videoUrl: item.url,
          });
        });
        this.trainVideoList.forEach((item) => {
          axios
            .post(
              url1,
              { path: item.videoUrl },
              {
                headers: {
                  "Content-type": "application/json;charset=UTF-8",
                },
                responseType: "blob", //返回是个文件
              }
            )
            .then((res) => {
              let bolb = "";
              bolb = new Blob([res.data]);
              let str = window.URL.createObjectURL(bolb);
              item.buffer = str;
            });
        });
      });
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

上次更新: 2024/10/26, 21:11:16

← tsx在vue3中的应用 echart默认展示某个点的tooltip→