vue+elementui实现列表播放音频，弹框播放视频，轮播图片，外界地址，富文本内容

最新推荐文章于 2023-12-28 00:14:24 发布
最新推荐文章于 2023-12-28 00:14:24 发布
阅读量1.1w 收藏 40
点赞数 6
文章标签： vue.js elementui 音视频
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fairyasd/article/details/122002071
版权

vue+elementui实现列表播放音频，弹框播放视频，轮播图片，外界地址，富文本内容
实现效果：
1、音频播放：
在这里插入图片描述
2、视频播放
在这里插入图片描述
3、图片轮播
在这里插入图片描述
4、跳转外界链接
在这里插入图片描述
5、富文本
在这里插入图片描述
上代码

<template>
  <el-card class="threed_onlycss">
    <!-- 查询区域 -->
    <div :class="{ active: isActive }">
      <el-row :gutter="20">
        <el-col :span="4" class="elscol">
          <el-input
            v-model="forma.name"
            placeholder="请输入名称"
            clearable
          ></el-input>
        </el-col>

        <el-col :span="5">
          <el-button type="success" @click="searchCon" icon="el-icon-search"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </div>
    <!-- 分页列表区域 -->
    <div class="paginationListArea">
      <el-table
        :data="list"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="name" label="名称" align="center">
        </el-table-column>
        <!-- <el-table-column prop="explainUrl" label="音频" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.explainUrl">
              <div>
                <audioplay :recordFile="scope.row.explainUrl"></audioplay>
              </div>
            </div>
            <div v-else>暂无音频</div>
          </template>
        </el-table-column> -->
        <el-table-column prop="explainUrl" label="音频" align="center">
          <template slot-scope="scope">
            <i
              style="
                cursor: pointer;
                margin-right: 10px;
                margin-top: 3px;
                font-size: 25px;
              "
              v-if="scope.row.explainUrl"
              @click="play(scope.$index, scope.row)"
              :class="
                icon == scope.row.explainUrl
                  ? 'el-icon-video-pause'
                  : 'el-icon-video-play'
              "
              :style="icon == scope.row.explainUrl ? 'color: red;' : ''"
            >
              <audio :id="scope.row.explainUrl">
                <source :src="scope.row.explainUrl" type="audio/mpeg" /></audio
            ></i>

            <div v-else>暂无音频</div>
          </template>
        </el-table-column>
        <el-table-column prop="videoURL" label="视频" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.videoURL">
              <el-button
                type="success"
                plain
                @click="playVideo(scope.row.videoURL)"
                ref="btn"
                size="mini"
              >
                播 放
              </el-button>
            </div>
            <div v-else>暂无视频</div>
          </template>
        </el-table-column>
        <el-table-column prop="imgall" label="图片" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.imgall.length != 0">
              <el-button
                type="success"
                plain
                @click="previewimg(scope.row.imgall)"
                ref="btn"
                size="mini"
              >
                预 览
              </el-button>
            </div>
            <div v-else>暂无资源</div>
          </template>
        </el-table-column>
        <el-table-column prop="urlT3D" label="3D" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.urlT3D">
              <el-button
                type="success"
                plain
                @click="preview3D(scope.row.urlT3D)"
                ref="btn"
                size="mini"
              >
                预 览
              </el-button>
            </div>
            <div v-else>暂无资源</div>
          </template>
        </el-table-column>

        <el-table-column prop="content" label="中文简介" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.content">
              <el-button
                type="success"
                plain
                @click="introduction_chinese(scope.row.content)"
                ref="btn"
                size="mini"
              >
                预 览
              </el-button>
            </div>
            <div v-else>暂无资源</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              icon="el-icon-delete"
              @click="deletUserById(scope.$index, scope.row)"
              circle
              >清 空</el-button
            >
            <el-button
              type="primary"
              size="small"
              icon="el-icon-paperclip"
              @click="removeUserById(scope.$index, scope.row)"
              circle
              >编 辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        center
        background
        layout="prev, pager, next,  total, jumper"
        :page-size="limit"
        :total="this.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <!-- 视频 -->
    <el-dialog
      title="视频预览"
      :visible.sync="dialogPlay"
      width="30%"
      @close="closeDialog"
    >
      <video
        :src="videoUrl"
        controls
        autoplay
        class="video"
        ref="dialogVideo"
        width="100%"
      ></video>
    </el-dialog>
    <!-- 3d资源 -->
    <el-dialog
      title="3D展示"
      :visible.sync="dialog3d"
      width="30%"
      @close="closeDialog3d"
    >
      <iframe
        :src="src3d"
        id="mobsf"
        scrolling="no"
        frameborder="0"
        style="
          position: absolute;
          top: 50px;
          left: 0px;
          right: 0px;
          bottom: 0px;
          height: 500px;
          width: 100%;
        "
      ></iframe>
    </el-dialog>
    <!-- 图片轮播 -->
    <el-dialog
      title="图片轮播"
      :visible.sync="dialogimgs"
      width="30%"
      @close="closeDialogimgs"
    >
      <el-carousel indicator-position="outside" :interval="2000">
        <el-carousel-item v-for="(item, index) in imgUrls" :key="index">
          <img ref="img" :src="item.resourceRoute" />
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
    <!--中文简介-->
    <el-dialog
      title="中文简介"
      :visible.sync="dialogChinese"
      width="30%"
      @close="closeDialogChinese"
    >
      <quill-editor
        v-model="content_Chinese"
        ref="myQuillEditor"
        :options="editorOption"
        @change="onEditorChange($event)"
        class="editor"
      ></quill-editor>
    </el-dialog>
  </el-card>
</template>

<script>
import audioplay from "./audioplay.vue";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ header: 1 }, { header: 2 }], // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
  [{ size: ["small", false, "large", "huge"] }], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], // 字体种类-----[{ font: [] }]
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  //   ["image", "video"] // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  data() {
    return {
      editorOption: {
        //  富文本编辑器配置
        modules: {
          toolbar: toolbarOptions,
        },
        theme: "snow",
        placeholder: "请输入正文",
      },
      isActive: false,
      //搜索的条件数据
      forma: {
        name: "",
      },
      list: [], //存放列表
      page: 1,
      pages: 1, //
      limit: 8,
      total: 0,
      multipleSelection: [],
      museumId: "",
      // 视频播放
      dialogPlay: false,
      videoUrl: "",
      // 3d资源
      dialog3d: false,
      src3d: "",
      // 图片轮播
      dialogimgs: false,
      imgUrls: [],
      // 中文简介
      dialogChinese: false,
      content_Chinese: "",
      // 视频播放
      audio: "",
      icon: "el-icon-video-play",
    };
  },
  methods: {
    play(index, row) {
      if (
        this.audio !== "" &&
        this.audio !== document.getElementById(row.explainUrl)
      ) {
        this.audio.pause();
      }
      this.audio = document.getElementById(row.explainUrl);
      this.icon = row.explainUrl;
      if (this.audio.paused) {
        this.audio.play();
        this.icon= row.explainUrl
      } else {
         this.icon = ""
        this.audio.pause();
      }
    },
    // 富文本编辑器 内容改变事件
    onEditorChange() {},
    // 中文简介
    introduction_chinese(cont) {
      console.log(cont);
      this.dialogChinese = true;
      this.content_Chinese = cont;
    },
    closeDialogChinese() {},
    // 图片
    previewimg(imgs) {
      console.log(imgs);
      this.imgUrls = imgs;
      this.dialogimgs = true;
    },
    closeDialogimgs() {
      this.imgUrls = [];
    },
    // 3d
    closeDialog3d() {
      this.src3d = "";
    },
    preview3D(url) {
      this.dialog3d = true;
      this.src3d = url;
    },
    // 视频
    playVideo(url) {
      this.dialogPlay = true;
      this.videoUrl = url;
    },
    closeDialog() {
      this.videoUrl = ""; //清空数据 关闭视频播放
    },

    //获取场馆列表
    getUserList(page, limit) {
      this.axios
        .get(
          "/museum/relic_resources/list?page=" +
            page +
            "&limit=" +
            limit +
            "&museumId=" +
            this.museumId +
            "&name=" +
            this.forma.name
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.total = res.data.data.total;
            this.list = res.data.data.records;
            this.list.forEach((item) => {
              var imgall = [];
              // if (item.table_id == "relic") {
              //   item.table_id = "文物";
              // } else {
              //   item.table_id = "场馆";
              // }
              item.resources.forEach((self) => {
                if (self.typeId == "video") {
                  item.videoURL = self.resourceRoute;
                } else if (self.typeId == "3D") {
                  item.urlT3D = self.resourceRoute;
                } else if (self.typeId == "image") {
                  imgall.push(self);
                }
              });
              item.imgall = imgall;
            });
          }
        });
    },
    // ---------------

    handleCurrentChange(cpage) {
      this.page = cpage;
      this.getUserList(this.page, this.limit);
    },
    handleSizeChange(psize) {
      this.limit = psize;
    },

    //查询
    searchCon() {
      this.page = 1;
      this.getUserList(this.page, this.limit);
    },

    //编辑
    removeUserById(index, rows) {
      console.log(rows);
      this.$router.push({ path: "/museum/3Dadd", query: { id: rows.id } });
    },
    //添加
    removeUserByIdadd() {
      this.$router.push({ path: "/museum/3Dadd" });
    },
    //删除
    deletUserById(index, rows) {
      console.log(rows.id);
      this.$confirm("此操作将该数据清空, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/museum/relic_resources/remove/" + rows.id)
            .then((res) => {
              this.getUserList(this.page, this.limit);
              this.$message({
                type: "success",
                message: "清空成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消清空",
          });
        });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
  created() {
    this.museumId == window.sessionStorage.getItem("museumId");
    this.museumId == null ? "" : window.sessionStorage.getItem("museumId");
    //调用方法获取数据
    this.getUserList(this.page, this.limit);
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  },
  components: {
    quillEditor,
    audioplay,
  },
};
</script>

<style scoped>
@import url("../../assets/css/index");
.el-cascader {
  width: 100%;
}
.btn {
  margin-top: 1%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.paginationListArea {
  margin-top: 1%;
}
.pagination {
  margin-top: 2%;
}

.active {
  display: none;
}
.elscol .el-input__inner {
  width: 100% !important;
}
.el-carousel__item.is-animating img {
  width: 100%;
  height: 100%;
}
</style>
<style>
.threed_onlycss .ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 400px !important;
  overflow-y: scroll;
}
</style>
Fairyasd
关注
  • 6
    点赞
  • 踩
  • 40
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
短视频源码下载、vue+html+elementui短视频播放实现，web、pc静态页短视频、手机网页版短视频
05-27
可以访问这篇文章有完整的介绍： https://blog.csdn.net/lucky_fang/article/details/125001953 兼容pc网页观看、手机浏览器观看，横、竖屏视频等 短视频的应用很广泛，无论是app、pc或者手机网页、浏览器等都会涉及到，特别是app短视频分享或者平台推广等业务，其他人打开分享链接观看一般都会设计到浏览器网页观看的，所以网页版短视频就来了。甚至混合app的实现也是交叉静态网页模拟实现原生app的效果，这也是为了快速开发app，同时也为了降低成本；
Vue+ElementUI实现文件照片音频视频预览
最新发布
qq_42753983的博客
04-29 812
1. 需求是点击预览按钮 根据文件名的后缀去实现预览。2. 具体实现代码及逻辑。
vue + el-carousel + video-player图片和视频轮播（等视频播放完在继续进行轮播）
梁小茹的博客
06-27 4411
关于这个问题，查了很多，很多都是图片轮播 要求：图片和视频一起轮播，等视频播放完在进行轮播 逻辑： 绑定轮播改变事件@change事件，如果是视频的话，让轮播停止，获取他的总时长进行设置，在重置进度条 下次播放重新开始 监听结束事件，让轮播继续，时间重置（注意这里一定要将loop设置为false） 直接上代码把： <el-carousel :autoplay="autoplay" :interval="interval" :initial-i
【vue】el-carousel实现视频自动播放与自动切换到下一个视频功能：
SunPeng的博客
10-19 2201
【vue】el-carousel实现视频自动播放与自动切换到下一个视频功能：
使用videojs+vue2+elementui自定义播放器控件
weixin_52060703的博客
11-21 1万+
用elementui的滑块实现视频自定义的进度条，包括一点videojs的初使用
使用element走马灯 + video-player实现图片和视频混合轮播
webpanda的博客
12-21 4748
准备工作： 安装element-ui npm i element-ui -s 安装video-player npm i vue-video-player -s HTML部分： 首先判断数据是否为视频格式，如果是视频格式就使用播放器，如果是图片使用img标签 <el-carousel height="425px" :autoplay="autoplay" :interval="interval" :i.
vue+elementUI 实现内容区域高度自适应的示例
10-14
总结起来，Vue+Element UI实现内容区域高度自适应的方法主要有两种：一是通过Vue的动态绑定和JavaScript事件监听；二是利用CSS3的`calc()`函数。两者各有优缺点，可以根据项目的具体需求和浏览器支持情况选择合适的...
vue+elementui实现点击table中的单元格触发事件--弹框
10-15
总结来说，实现Vue+Element UI点击表格单元格触发事件并弹出对话框的关键在于使用`template`和`scope`插槽来定制表格列，以及Element UI提供的组件如`el-popover`来创建弹框。通过这种方式，我们可以灵活地控制表格...
vue+elementUI实现图片上传功能
01-19
本文实例为大家分享了vue+elementUI图片上传的具体代码，供大家参考，具体内容如下 1、html 图片 prop=logo> <el-upload name=file v-if=optype==0 :action='/upload' accept=.jpg, .png list-type=picture-...
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)
03-01
【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在Leaflet弹框Popup中使用elementui组件(三)cv可用 【vue+leaflet+elementUI】vue项目中在...
vue+elementui实现点击table中的单元格触发事件–弹框
12-28
查看位置： elementui的table事件 elementui的table中怎样点击某个单元格触发事件？ 可以先看一下官网中table的自定义列模板代码 xss=removed> 日期 width=180> <el name=time></el> <span st
vue elementui封装视频图片轮播图
ncyangyang的博客
08-02 2735
产品想了一个视频和图片混合轮播的方案，结合elementUI的走马灯封成了一个组件，小白一枚，欢迎大佬指导， 下面贴出代码，供大家参考，因为涉及了一下自定义控件，可能不是很符合大家的要求 <template> <div class="block"> <el-carousel :height="bannerHeight + 'px'" :width="bannerWidth + 'px'" :autoplay="false"
Vue系列：Vue Element UI中，使用按钮实现视频的播放、停止、停止后继续播放、播放完成后重新播放功能
浪潮行舟_chenjin2136
11-30 3541
/ 播放完成后重新播放。// 音频是否正在播放。
Element-UI实现对话框内播放视频
热门推荐
鸣鼓ming的博客
08-06 1万+
1.问题 效果: 实现一个点击播放列表中的一个视频标题, 然后弹出一个对话框进行视频播放, 可点击全屏进入全屏播放. 环境: Nuxt.js 、Vue.js、Element-UI、阿里云播放器Aliplayer. 2. 解决步骤 第1步: 在你要进行播放视频的页面引入资源文件. 这个引入最好放在较外层的标签里, 要在创建播放器之前就引入, 毕竟这是一个网络资源, 加载需要时间, 否则偶尔会因为创建播放器时找不到资源而报错. <div> <link rel="s
vue+elementUI轮播视频
IT菜鸟
08-03 760
vue+elementUI轮播视频
(四）vue实现轮播图
a5421901的专栏
01-26 808
1.需求 2.代码分析 数据准备 前端页面 样式编写  
Vue 组件封装之 Carousel 轮播图
杏子
11-18 3863
实现无缝轮播。
前端-多个视频自动轮播自动播放
Ashes of time
12-28 676
【代码】前端-多个视频自动轮播自动播放。
vue + elementUI实现左右列表联动
05-25
实现左右列表联动，可以使用 ElementUI 的 Transfer 组件。该组件提供了两个列表，左边为未选中的数据列表，右边为已选中的数据列表，可以通过拖拽或者点击按钮来进行数据的移动。 具体实现步骤如下： 1. 引入 ElementUI 的 Transfer 组件和相关样式文件。 ``` import { Transfer } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' ``` 2. 在模板中使用 Transfer 组件，并传入需要展示的数据列表和相关配置项。 ``` <template> <el-transfer :data="dataList" :left-default-checked="[1, 3]" :right-default-checked="[2, 4]" :titles="['未选中', '已选中']" :button-texts="['>', '<']" :filterable="true" filter-placeholder="请输入关键字" :format="format" @change="handleChange" /> </template> ``` 其中，dataList 表示数据列表，left-default-checked 和 right-default-checked 表示默认选中的数据项，titles 表示左右两个列表的标题，button-texts 表示操作按钮的文字，filterable 表示是否支持搜索过滤，filter-placeholder 表示搜索框的提示文本，format 是一个函数，用来格式化每个选项的展示文本，handleChange 是组件的 change 事件回调函数。 3. 在脚本中定义 dataList 数据列表，并实现 format 和 handleChange 函数。 ``` <script> export default { data() { return { dataList: [ { key: 1, label: '选项1' }, { key: 2, label: '选项2' }, { key: 3, label: '选项3' }, { key: 4, label: '选项4' } ] } }, methods: { format({ label, key }) { return `${label} (${key})` }, handleChange(targetKeys, direction, moveKeys) { console.log(targetKeys, direction, moveKeys) } } } </script> ``` 其中，format 函数接收一个参数，该参数包含当前选项的 label 和 key，需要返回一个字符串，用来展示在列表中。handleChange 函数接收三个参数，分别为目标列表的 key 数组，操作类型和移动的 key 数组。 这样，就可以实现左右列表联动的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值