TEAMModelOS/TEAMModelOS.SmartTeach/ClientApp/components/resource/TeacherVideos.vue

<template>
  <div class="activity_container">
    <div class="activity_details">
      <div class="activity_details_box">
        <div class="title">
          <Icon type="ios-home-outline" size="22" />
          <p><router-link to="/TeacherZone/ZonesHome">工作室首页</router-link></p><span>>名师课堂</span><span>>视频详情</span>
        </div>
        <div class=video-info>
          <h1>选修3-1第二章恒定电流，2电流的微观解析.mp4</h1>
          <div class="video">
            <video-player class="video-player-box" style="width:600px;height:600px;"
                          ref="videoPlayer"
                          :options="playerOptions"
                          :playsinline="true">
            </video-player>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

  export default {
    data() {
      return {
      }
    },
    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" });
      }
    }

  }
</script>
<style scoped>
  .activity_details {
    width: 100%;
    height: auto;
    background: #f8f8f8;
    padding-top: 20px;
    padding-bottom: 8%;
  }

  .activity_details_box {
    width: 1200px;
    height: auto;
    margin: 0 auto;
  }

  .clearfix {
    display: block;
  }
  .video-info{
    width:1000px;
    height:600px;
    border:1px solid red;
  }
  .video-info h1 {
    text-align:center;
  }
  .video{
    width:800px;
    height:600px;
  }




</style>