使用element走马灯 + video-player实现图片和视频混合轮播

最新推荐文章于 2025-05-12 11:01:47 发布

webpanda

最新推荐文章于 2025-05-12 11:01:47 发布

阅读量5.1k

点赞数

CC 4.0 BY-SA版权

文章标签：音视频 elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/webpanda/article/details/122075633

本文介绍了如何使用Element UI的走马灯组件与video-player库，结合Vue.js，实现图片和视频内容的混合轮播。通过在HTML中判断数据类型，动态插入视频播放器或图片标签，达到轮播效果。在data中定义相关变量，并在computed和methods中进行逻辑处理。

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

准备工作：

安装element-ui

npm i element-ui -s

安装 video-player

npm i vue-video-player -s

引入video-player

import { videoPlayer } from "vue-video-player";

HTML部分：

首先判断数据是否为视频格式，如果是视频格式就使用播放器，如果是图片使用img标签

<el-carousel
        height="425px"
        :autoplay="autoplay"
        :interval="interval"
        :initial-index="initialIndex"
        ref="carousel"
        @change="onChange"
      >
        <el-carousel-item v-for="item in banner" :key="item.id">
          <video-player
            class="video-player vjs-custom-skin"
            style="width: 100%"
            v-if="item.img.indexOf('mp4') !== -1"   //判断使用视频播放
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
            :x5-video-player-fullscreen="true"
            @play="onPlayerPlay($event)"
            @ended="o