ljclw-ui/src/views/cardIot/components/Video.vue

<template>
  <div style="display: flex">
    <div class="item-video">
      <div class="video-box">
        <video
          ref="videoPlayer"
          :preload="preload"
          :poster="videoImg"
          :height="height"
          :width="width"
          align="center"
          :controls="controls"
          :autoplay="autoplay"
          
          class="video video-js vjs-default-skin vjs-big-play-centered"
          
        >
        </video>
        <div class="line"></div>
        <div class="text">
          <span class="items" v-for="(item, index) in typeList" :key="index" @click="Onchange(item)">{{
            item.lable
          }}</span>
        </div>
      </div>
      <div></div>
      <div></div>
    </div>
    <div></div>
  </div>
</template>

<script>
import { getCarVideo } from '@/api/iot'
import axios from 'axios'
export default {
  data() {
    return {
      videoSrc: null,
      videoImg: '',
      playStatus: '',
      muteStatus: '',
      isMute: true,
      isPlay: false,
      width: '420', // 设置视频播放器的显示宽度（以像素为单位）
      height: '500', // 设置视频播放器的显示高度（以像素为单位）
      preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      autoplay: '',
      typeList: [
        {
          id: 2,
          lable: '大巴摄像头',
        },
        {
          id: 3,
          lable: '驾驶员',
        },
        {
          id: 4,
          lable: '车内',
        },
        {
          id: 5,
          lable: '车前方',
        },
        {
          id: 6,
          lable: '车后方',
        },
        {
          id: 7,
          lable: '车左侧',
        },
        {
          id: 8,
          lable: '车右侧',
        },
      ],
      carId: 2,
    }
  },
  methods: {
    FunVdieoList() {
      const params = {
        vehicleId: '1656135934669',
        channel: this.carId,
      }
      getCarVideo(params).then((res) => {
        this.videoSrc = `blob:${res.msg.replace('http://183.66.101.92:1078/video', '/video')}`
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: res.msg
        });
        //url: xxx 为后台请求数据的视频
        flvPlayer.attachMediaElement(this.$refs.videoPlayer);
        flvPlayer.load();
        flvPlayer.play();
      })
    },
    Onchange(val) {
      this.carId = val.id
    },
  },
  created() {
    this.FunVdieoList()

  },
  mounted() {
  },
}
</script>

<style lang="less" scoped>
.item-video {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .line {
    width: 330px;
    height: 1px;
    display: inline-block;
    border-bottom: 1px dashed #000;
  }
  .text {
    display: flex;
    flex-wrap: wrap;
    .items {
      width: 80px;
      text-align: center;
      margin-top: 5px;
      border-right: 1px solid #f1f1f1;
      cursor: pointer;
    }
  }
}
.video-box {
  width: 350px;
  height: 350px;
  background: #fff;
  margin-top: 20px;
  padding: 8px 9px;
  .video {
    width: 330px;
    height: 260px;
    object-fit: fill;
  }
}
</style>