<template>
  <div class="app-videoMonitor">
    <div class="theme-card">
      <div class="title">果园监控</div>
      <div class="content">
        <!--<el-carousel :interval="3000" trigger="click" height="150px" indicator-position="none" :autoplay="false">-->
          <!--<el-carousel-item v-for="item in 4" :key="item">-->
            <!--<h3>{{ item }}</h3>-->
          <!--</el-carousel-item>-->
        <!--</el-carousel>-->
        <video-player  class="video-player vjs-custom-skin videoContainer"
                       ref="videoPlayer"
                       :playsinline="true"
                       :options="playerOptions"
        ></video-player>
      </div>
    </div>
  </div>
</template>

<script>

    export default {
      name: "videoMonitor",
      data() {
        return {
          // color: this.$store.state.color,
          // myChart: {},
          //weather_news: this.$store.state.weatherModule.weather_news
          playerOptions: {
            autoplay: true,
            loop:false,
            preload: 'auto',
            fluid: true,
            language: 'zh-CN',
            aspectRatio: '16:9',
            sources: [{
              type: "video/mp4",
              src: '../static/video/videoMonitor/bind.mp4'
            }],
            notSupportedMessage: '网络不佳，请稍后再试',
            //height: document.documentElement.clientHeight,
            controls:false,
            // controlBar: {
            //   timeDivider: false,
            //   durationDisplay: false,
            //   remainingTimeDisplay: false,
            //   fullscreenToggle: false  //全屏按钮
            // }
          }
        }
      }
    }
</script>

<style scoped lang="scss">
  .app-videoMonitor {
    width: 100%;
    .theme-card{
      height: 100%;
      .content > span{
        color: red;font-size: 12px;text-align: left;
      }
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 150px;
      margin: 0;
    }
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
    .videoContainer{
      height: 100%;
      width: 100%;
      position: relative;
    }
    .video-js .vjs-big-play-button{
      display:none;
    }

  }
</style>
