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

<template>
  <div class="video-page">
    <div class="video-title">
      <h3 class="video-title-h3">{{routerData.applyName}}</h3>
    </div>
    <div class="video-info">

      <div class="video-src">
        <video-player class="video-player-box" style="width:800px;"
                      ref="videoPlayer"
                      :options="playerOptions"
                      :playsinline="true">
        </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 rewardDatas" @click="showVideo(index)">
        <img src="../../assets/image/default-act.png" width="95%" />
        <p>{{item.applyName}}</p>
      </div>
    </div>
  </div>
</template>
<script>
  import rewardList from '@/static/rewardList.json'
  import"videojs-contrib-hls.js/src/videojs.hlsjs"
import { setTimeout } from 'core-js';
  export default {
    data() {
      return {
        playerOptions: {
          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          controls: true, //控制条
          preload: 'auto', //视频预加载
          muted: false, //默认情况下将会消除任何音频。
          loop: false, //导致视频一结束就重新开始。
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: 'application/x-mpegURL',
            src: 'https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/demo/2019.m3u8'
          }],
          //poster: "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        },
        routerData: {},
        rewardDatas: [],
        videos: [
          {
            title:'05月11日直播'
          },
          {
            title:'05月12日直播'
          },
          {
            title:'05月13日直播'
          },
          {
            title:'05月14日直播'
          },
          {
            title:'05月15日直播'
          },
          {
            title:'05月16日直播'
          },
          {
            title:'05月17日直播'
          },
          {
            title:'05月18日直播'
          }
        ]
      }
    },
    methods: {
      showVideo(index) {
        //alert(index);
        this.$router.push(
          {
            name: 'video',
            query: {
              rewardIndex: index
            }
          }
        );
          this.$refs.videoPlayer.player.src({ type: "application/x-mpegURL", src: "https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/history/history.m3u8" });
      }
    },
    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() {
        this.$Spin.show();
        let that = this;
        let index = this.$route.query.rewardIndex;
        //alert(index);
        if (index == undefined) {
          this.routerData = this.rewardDatas[0];
        } else {
          this.routerData = this.rewardDatas[index];
        }

        setTimeout(function () {
          that.$Spin.hide()
        }, 500);
      }
    }
  }
</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;
    }
    .video-src .video-js .vjs-big-play-button {
      top: 50%;
      left: 50%;
      margin-left: -40px;
      margin-top:-20px;
    }
  .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>