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

最新推荐文章于 2025-02-18 23:50:16 发布

原创最新推荐文章于 2025-02-18 23:50:16 发布 · 5.2k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#音视频 #elementui #vue.js #前端

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

准备工作：

安装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="onPlayerEnded($event)"
            @loadeddata="onPlayerLoadeddata($event)"
          >
          </video-player>
          <img v-else :src="item.img" />         //或使用图片
        </el-carousel-item>
      </el-carousel>

在data中声明变量：

  data() {
    return {
      autoplay: true, //自动播放
      interval: NaN, //轮播时常
      initialIndex: 0, //从下标第几个开始轮播
      duration: NaN, //计算总时长
      banner: [],    //从后端获取来的轮播图数据

      //vue-video-play  播放器默认的设置
      playerOptions: {
        autoplay: true, //如果true,浏览器准备好时开始回放。实现自动播放，autoplay、muted都设置为true
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "这里是你视频的地址", //url地址
          },
        ],
        width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
    };
  },

computed中

  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },

methods中

methods: {
    // 监听轮播图改变
    onChange(index) {
      // 如果是视频,就等播放完再进行下一个
      if (this.banner[index].img.indexOf("mp4") != -1) {
        this.playerOptions["sources"][0]["src"] = this.banner[index].img; //把获取来的视频赋值给sources的src
        this.$refs.videoPlayer[0].player.src(
          this.playerOptions["sources"][0]["src"]
        ); // 重置进度条,再次轮播时让视频重新播放
        this.interval = this.duration * 1000;
        this.autoplay = false;
      }
    },
    onPlayerEnded(player) {
      //视频播放停止时候触发的事件
      this.autoplay = true;
      this.interval = 3000;
    },
    onPlayerLoadeddata(player) {
      // 获取资源总时长
      this.duration = player.cache_.duration;
    },
    onPlayerPlay(player) {
      player.play();
    },
}