TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/Video.vue

<template>
  <div class="video-page">
    <div class="video-title">
      <h3 class="video-title-h3">12月03日直播</h3>
    </div>
    <div class="video-info">

      <div class="video-src">
        <!--<video controls="controls" width="800" style="display:block;"
         src="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190516/acalssOne%E7%BD%91%E9%A1%B5%E7%99%BB%E5%BD%95%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95.mp4">
    您的浏览器不支持 video 标签。
  </video>-->
        <video-player class="video-player-box" style="width:800px;"
                      ref="videoPlayer"
                      :options="playerOptions"
                      :playsinline="true"
                      customEventName="customstatechangedeventname"
                      @play="onPlayerPlay($event)"
                      @pause="onPlayerPause($event)"
                      @ended="onPlayerEnded($event)"
                      @waiting="onPlayerWaiting($event)"
                      @playing="onPlayerPlaying($event)"
                      @loadeddata="onPlayerLoadeddata($event)"
                      @timeupdate="onPlayerTimeupdate($event)"
                      @canplay="onPlayerCanplay($event)"
                      @canplaythrough="onPlayerCanplaythrough($event)"
                      @statechanged="playerStateChanged($event)"
                      @ready="playerReadied">
        </video-player>
      </div>

      <div class="video-detail-info">
        <Form :label-width="100">
          <FormItem label="获奖情况：">
            <span>{{routerData.activityAwardName}}</span>
          </FormItem>
          <FormItem label="主讲：">
            <span>{{routerData.employeeName}}</span>
          </FormItem>
          <FormItem label="单位：">
            <span>{{routerData.employeeSchoolName}}</span>
          </FormItem>
          <FormItem label="年级：">
            <span>{{routerData.gradeName}}</span>
          </FormItem>
          <FormItem label="学科：">
            <span>{{routerData.categoryName}}</span>
          </FormItem>
          <FormItem label="教学设计：">
            <span>暂无数据</span>
          </FormItem>
          <FormItem label="教学反思：">
            <span>暂无数据</span>
          </FormItem>
        </Form>
        <div class="download-video">

          <a download="video" style="color:#999999;font-size:14px;" href="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/%E5%B0%8F%E5%AD%A6%E8%8B%B1%E8%AF%AD301%E8%83%A1%E9%A2%96--2019.mp4">
            <Icon type="md-cloud-download" size="22" color="white" />
            下载视频
          </a>
        </div>
      </div>
    </div>
    <div class="video-other">
      <h3 class="video-title-h3">推荐作品</h3>
    </div>
    <div class="videos-wrap">
      <div class="video-item" v-for="(item , index) in videos" @click="showVideo(index)">
        <img src="../../assets/image/default-act.png" width="95%" />
        <p>{{item.title}}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import rewardList from '@/static/rewardList.json'
  export default {
    data() {
      return {
        playerOptions: {
          // videojs options
          muted: true,
          language: 'en',
          preload: 'auto',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [{
            type: "video/mp4",
            src: "https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/%E5%B0%8F%E5%AD%A6%E8%8B%B1%E8%AF%AD301%E8%83%A1%E9%A2%96--2019.mp4"
            //src: "https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/%E5%B0%8F%E5%AD%A6%E8%8B%B1%E8%AF%AD301%E8%83%A1%E9%A2%96--20180419.MP4"
          }],
          poster: "/static/images/author.jpg",
        },
        routerData: {},
        rewardDatas: [],
        videos: [
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          },
          {
            title:'12月14日直播'
          }
        ]
      }
    },
    methods: {
      showVideo(index) {
        //alert(index);
        this.$router.push(
          {
            name: 'video',
            query: {
              rewardIndex: index
            }
          }
        );
      }
    },
    mounted() {
      let index = this.$route.query.rewardIndex;
      //alert(index);

      this.rewardDatas = rewardList.data.list;
      if (index == undefined) {
        this.routerData = this.rewardDatas[0];
      } else {
        this.routerData = this.rewardDatas[index];
      }
      
    },
    
    watch: {
      $route() {
        let index = this.$route.query.rewardIndex;
        //alert(index);
        if (index == undefined) {
          this.routerData = this.rewardDatas[0];
        } else {
          this.routerData = this.rewardDatas[index];
        }
      }
    }
  }
</script>
<style>
  .video-page {
    width: 1200px;
    margin: 100px auto;
  }

  .video-title {
    margin-bottom: 20px;
    height: 20px;
  }

    .video-title-h3 {
      height: 20px;
      font-size: 20px;
      line-height: 20px;
      border-left: 6px solid #37b1fa;
      padding-left: 12px;
    }

  .video-info {
    width: 100%;
    display: table;
  }
  .video-detail-info {
    width:400px;
    background:#222222;
    display:table-cell;
    vertical-align:top;
    padding:20px 10px 20px 30px;
    position:relative;
  }
    .video-detail-info .ivu-form-item {
      margin-bottom:8px;
    }
    .video-detail-info .ivu-form .ivu-form-item-label {
      font-size:14px;
      color:#999999;
    }
    .video-detail-info .ivu-form-item-content {
      font-size: 14px;
      color: #ffffff;
    }
  .video-src {
    display:table-cell;
    width:800px;
    background:#000000;
  }
    .video-src .video-js {
      width:800px;
      height:450px;
    }
  .download-video {
    text-align:center;
    position:absolute;
    width:100%;
    bottom:20px;
    left:0;
  }
  .video-other {
    margin-top:20px;
  }
  .videos-wrap {
    margin:0px -10px 0px -10px;
  }
  .video-item {
    width: 25%;
    display: inline-block;
    padding: 0px 10px;
    margin-top:20px;
    cursor:pointer;
  }

    .video-item p {
      font-size: 16px;
      color: #000;
      margin-top: 10px;
      text-decoration: none;
      text-indent: 8px;
    }
</style>