vue使用海康H5视频播放器实现轮播功能

功能描述：点击左右按钮可以实现轮播视频的功能

需要引入的文件这个就不说了，不了解的可以去看我写的vue使用海康H5视频播放器这篇文章，后面里面所引用的VideoPlayer以及randomLenNum也可以在文章里面查找

首先在views下面创建一个vue文件：

父组件：

<template>
  <div style="width: 1230px; margin-left: 20px;"
    :style="{height: heightType == 1 ? '560px' : heightType == 2 ? '900px' : '0px'}">
    <div class="video-content" @mouseover="showPopup()" @mouseleave="hidePopup()">
      <div class="video-box">
        <el-carousel
          ref="carousel"
          :autoplay="false"
          height="150px"
          :loop="true"
          arrow="never"
          indicator-position="none">
          <el-carousel-item
            v-for="(item, index) in this.videoList"
            :key="index" v-loading="loading"
      element-loading-text="正在加载中,请稍后..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(12,35,63, 0.8)">
            <video-player  ref="player" :option="videoOption"></video-player>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="width: 100%; height: 100%" v-show="isShow">
        <el-button
          class="el-carousel__arrow el-carousel__arrow--left"
          @click="change('prev')">
          <i class="el-icon-arrow-left"></i>
        </el-button>
        <el-button
          class="el-carousel__arrow el-carousel__arrow--right"
          @click="change('next')">
          <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
import VideoPlayer from "@/components/videoPlayer";
import { randomLenNum } from "@/util/util";
export default {
  components: {
    VideoPlayer,
  },
  data() {
    return {
      videoOption: {
        width: "1230px",
        height: "548px",
        split: 1,
        id: randomLenNum(6),
      },
      videoList: [],
      isShow: false,
      currentCameraIndex: 0,
      loading: true
    };
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    showPopup() {
      this.isShow = true;
    },
    hidePopup() {
      this.isShow = false;
    },
    onLoad() {
        //获取当前的父级
        this.$axios.get("xxx/station?type=station" + "&id=" + this.id + "&ping=1")
        .then((res) => {
          const dataList = res.data.data;
          this.videoList = dataList;
          //默认播放第一个视频  
          this.$axios.get("xxx/getliu?type=camera" + "&id=" + this.videoList[this.currentCameraIndex] + "&ping=1")
          .then((res) => {
            const dataList = res.data.data;
            for(let i = 0; i < dataList.length; i++){
              setTimeout(()=>{
                this.loadVideo(dataList[i].stream,i);
              },1000)
            }
          });
        });

    },
    change(type) {
      this.loading = true
      if (type == "prev") {
        this.currentCameraIndex--;
        if (this.currentCameraIndex == -1) {
          this.currentCameraIndex = this.videoList.length - 1;
        }
      } else {
        this.currentCameraIndex++;
        if (this.currentCameraIndex == this.videoList.length) {
          this.currentCameraIndex = 0;
        }
      }
        //获取流  左右切换的时候根据获取的所有子级id的索引获取当前所播放的视频流
        this.$axios.get("xxx/getliu?type=camera" + "&id=" + this.videoList[this.currentCameraIndex] + "&ping=1")
          .then((res) => {
            const dataList = res.data.data;
            for(let i = 0; i < dataList.length; i++){
              setTimeout(()=>{
                this.loadVideo(dataList[i].stream,i);
              },1000)
            }
          });
    },
    loadVideo(liuName, index) {
      this.$refs.player[0].initPlayer(this.videoOption);
      let param = {
        url: liuName,
        index: index,
      };
      this.$refs.player[0].play(param);
      setTimeout(()=>{
        this.loading = false
      },1000)
    },
  },
};
</script>
<style lang="scss" scoped>
.video-content {
  width: 100%;
  height: 100%;
  padding: 36px 6px 0;
  position: relative;
  .video-box {
    width: 100%;
    height: 100%;
    position: absolute;
  }
}

::v-deep .el-carousel,
::v-deep .el-carousel__container {
  height: 100% !important;
}

::v-deep .el-icon-arrow-left,
::v-deep .el-icon-arrow-right {
  font-size: 40px;
  color: #fff;
}

::v-deep .el-carousel__item {
  color: #fff;
}

::v-deep .el-button {
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 55px;
  background-color: rgba(31, 45, 61, 0.7);
  border-radius: 50%;
  border: 1px solid rgba(31, 45, 61, 0.7);
}

::v-deep .el-carousel__arrow i{
  transform: translateX(-5px) translateY(-15px);
}

::v-deep .el-carousel__arrow--left{
  transform: translateX(40px);
}

::v-deep .el-carousel__arrow--right{
  transform: translateX(-40px);
}
</style>

效果图：