Vue video播放视频流

林中明月间。

已于 2025-05-21 16:07:37 修改

阅读量370

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

于 2025-05-20 17:27:03 首次发布

本文链接：https://blog.csdn.net/a772116804/article/details/148093562

Vue.js 专栏收录该内容

196 篇文章

订阅专栏

html5 video标签播放视频流_video数据源为文件流-CSDN博客

 <el-dialog
      title=" "
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <video
        width="800"
        height="500"
        controls="controls"
        id="video"
        preload="auto"
        style="display:block;margin:auto;"
      >
        <source :src="getVideos" type="video/mp4" />
      </video>
    </el-dialog>


getVideos: "",
dialogVisible: false,


handleVideo(row) {
      this.loading = true;
      const param = {};
      param.fileName = row.fileName;
      param.fileId = row.fileId;
      fileDownload(param)
        .then((res) => {
          if (res.data) {
            let blob = new Blob([res.data], { type: "video/mp4" });
            const getVideos = window.URL.createObjectURL(blob);
            this.getVideos = getVideos;
            this.dialogVisible = true;
            this.loading = false;
          } else {
            this.$confirm("当前文件不存在！", "提示", {
              type: "warning",
              center: true,
              customClass: "warn-dialog",
            })
              .then(() => {})
              .catch(() => {});
            this.loading = false;
          }
        })
        .catch((data) => {
          this.loading = false;
          this.$confirm("服务器忙", "提示", {
            type: "warning",
            center: true,
            customClass: "warn-dialog",
          })
            .then(() => {})
            .catch(() => {});
        });
    },