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

最新推荐文章于 2025-05-18 20:10:32 发布

原创

最新推荐文章于 2025-05-18 20:10:32 发布 · 2.2k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #音视频 #前端

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

video嵌入dialog实现视频播放

业务需求
- 1、实现的效果图
- 3、全部代码(复制粘贴即可实现)

业务需求

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

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"