一个页面展示多个视频窗口（vue）

 

<template>

  <div id="video-play">

    <Row>

      <Col v-for="(item,i) in listArray" :span="item.span">

        <div style="text-align:center;border:1px solid #ece9e9">

          <video

            :ref="item.srcTitle"

            :id="item.srcTitle"

            :style="{width:`${item.width-60}px`,height:`${item.height}px`}"

            class="video-js vjs-default-skin"

            muted

            preload="auto"

          >

            <source :src="item.src" type="application/x-mpegURL" />

          </video>

        </div>

      </Col>

    </Row>

  </div>

</template>

 

<script>

import videojs from 'video.js'

import 'videojs-contrib-hls'

export default {

  props: {

    listArray: {

      type: Array,

      default () {

        return [];

      }

    }

  },

  data () {

    return {

      data: []

    }

  },

  watch: {

    listArray () {

      setTimeout(() => {

        this.listArray.forEach(element => {

          if (element.srcTitle != '') {

            let myPlayer = videojs(element.srcTitle)

            videojs(element.srcTitle).ready(function () {

              let myPlayer = this;

              myPlayer.play();

            });

          }

        })

      }, 2500);

    }

  },

  mounted () {

  },

  methods: {

  }

}

</script> 

<style lang="less">

#video-play {

  .video-js {

    /* 设置背景颜色 */

    background-color: white !important;

  }

  /* 设置视频填充  */

  video {

    object-fit: fill !important;

  }

}

</style>

效果图如下