vue el-dialog嵌入video实现视频播放功能

最新推荐文章于 2024-09-07 16:14:41 发布

wangjiecsdn

最新推荐文章于 2024-09-07 16:14:41 发布

阅读量1.9k

点赞数 2

分类专栏： element 文章标签： vue.js 音视频前端

本文链接：https://blog.youkuaiyun.com/wangjiecsdn/article/details/131518793

版权

element 专栏收录该内容

12 篇文章

订阅专栏

该文章提供了一个使用Vue.js实现的对话框组件，该组件能够在弹窗中展示视频并支持切换不同选项卡播放不同的视频。通过el-dialog、el-tabs和video元素，结合事件处理函数handleClick和playVideo，实现了视频播放和切换功能。代码示例中还涉及到了视频源的更新和暂停操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

业务需求

弹窗实现视频播放，并且切换不同选项卡播放不同视频

1、实现的效果图

在这里插入图片描述

3、全部代码(复制粘贴即可实现)

<template>
  <el-button style="margin-left: 60px" type="primary" @click="playVideo()"
          >演示视频</el-button
        >
   <el-dialog
      title="操作视频"
      :visible.sync="dialogPlay"
      width="60%"
      @close="closeDialog"
    >
      <el-tabs
        :tab-position="tabPosition"
        v-model="editableTabsValue"
        @tab-click="handleClick"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.value"
          v-for="(item, index) in paneList"
          :key="index"
        >
          <video
            id="video"
            controls
            controlslist="nodownload"   //内部视频，取消下载功能
            :src="videoUrl"
            class="video"
            :ref="dialogVideo"
            width="100%"
            autoplay="0"
          ></video>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
</template>
<script>
export default {
 
  data() {
    return {
      tabPosition: "left",
      dialogPlay: false,
      videoUrl: "",
      dialogVideo: "",
      paneList: [
        {
          label: "规则管理",
          value: "1",
        },
        {
          label: "任务管理",
          value: "2",
        },
        {
          label: "测试管理",
          value: "3",
        },
      ],
      editableTabsValue: "1",
    };
  },
 methods: {
    playVideo() {
      this.$nextTick(() => {
        this.videoUrl = "https://xxxxxxxx/123.mp4";
      });
      this.dialogPlay = true;
    },
    closeDialog() {
      this.videoUrl = ""; //清空数据 关闭视频播放
      this.editableTabsValue = "1";
      const video = document.getElementById("video");
      video.pause();
    },
    //点击选项卡
    async handleClick(tab, event) {
      const video = document.getElementById("video");
      video.pause();
      this.videoUrl = ""; //清空数据 关闭视频播放
      //请axios请求不同选项卡的视频直接 this.videoUrl赋值地址
      //以下是前端测试视频播放写死代码
      if (this.editableTabsValue == "1") {
        this.videoUrl = "https://xxxxxxxx/123.mp4";
      } else if (this.editableTabsValue == "2") {
        this.videoUrl = "https://xxxxxxxx/44.mp4";
      } else {
        this.videoUrl = "://xxxxxxxx//test.wmv";
      }
    },
 }
  }
</script>
<style lang="scss" scoped>
</style>