video1.vue

<template>
  <div style="height: 100%">
    <div class="play-l" :style="{backgroundImage:`url(${imgUrl.bgL})`}">
      <div class="content" :style="{backgroundImage:`url(${imgUrl.bgC})`}">
        <img :src="imgUrl.title" class="title"/>
        <div class="tips-block">
            <span>温馨提示：为了获得更好的学习观看体验，请您将手机横竖屏锁定打开，并将手机横放。</span>
        </div>
        <img class="audio" :src="imgUrl.audio" v-if="nowLesson.content.tabRadio.type" @click="goNext(nowLesson.content.tabRadio.index)">
        <img :src="imgUrl.b" class="b-img"/>
      </div>
      <div class="btn-block">
        <img :src="imgUrl.backL" class="btn back" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="imgUrl.nextL" class="btn next" @click="goNext(nowLesson.content.nextIndex,true)"/>
      </div>
    </div>
    <div class="video-block">
      <div class="icon-class" v-if="playVideoType">
        <img :src="imgUrl.play" @click="playVideo()"/>
      </div>
      <video
        id="test_video"
        ref="video"
        v-if="nowLesson.content.videoUrl.length > 0"
        :controls="!playVideoType"
        controlsList="nodownload"
        :poster="!!nowLesson.content.banner[0] ? nowLesson.content.banner[0].url : `${nowLesson.content.videoUrl[0].url}?vframe/jpg/offset/0` "
        :src="nowLesson.content.videoUrl[0].url"></video>
    </div>
    <div class="play1" :style="{backgroundImage:`url(${imgUrl.bg})`}">
      <div class="bg-block">
        <img :src="imgUrl.radio" class="radio-img" v-if="nowLesson.content.tabRadio.type" @click="goNext(nowLesson.content.tabRadio.index)"/>
        <span class="pageNo" v-if="nowLesson.content.mouldIndex">-{{nowLesson.content.mouldIndex}}-</span>
        <img :src="imgUrl.backBtn" class="btn back" @click="goNext(nowLesson.content.lastIndex)"/>
        <img :src="imgUrl.next" class="btn next" @click="goNext(nowLesson.content.nextIndex,true)"/>
      </div>
    </div>
  </div>
</template>

<script>
  import {play1} from "../../util/imgUrl";
  export default {
    name: "video1",
    props:[
      'nowLesson'
    ],
    data(){
      return{
        imgUrl:play1,
        playVideoType:true,
      }
    },
    methods:{
      goNext(i,next){
        this.$emit('goNext',{i:i,next:!!next})
      },
      // 播放视频
      playVideo(){
        this.playVideoType = false;
        this.$refs.video.play()
      },
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .play1{
    display: none;
  }
  div{
    margin: auto;
  }
  .video-block {
    margin: 0;
    background: black;
    border-radius: 8 * @toVw;
    height: 175 * @toVw;
    width: 313 * @toVw;
    z-index: 2;
    top: 97 * @toVw;
    left: 31 * @toVw;
    position: absolute;
    .icon-class {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0, 0, 0, 0.3);
    }
    img {
      position: absolute;
      top: 50%;
      z-index: 2;
      left: 50%;
      width: 58 * @toVw;
      margin-top: -58/ 2 * @toVw;
      margin-left: -58/ 2 * @toVw;
    }
    video {
      width: 100%;
    }
  }
  .play-l{
    height: 100%;
    background-size: 100% 100%;
    text-align: center;
    .content{
      width: 345 * @toVw;
      height: 540 * @toVw;
      background-size: 100% 100%;
      position: relative;
      top: 10 * @toVw;
      .b-img{
        width: 61 * @toVw;
        position: absolute;
        left: -10 * @toVw;
        top: 30 * @toVw;
      }
      .audio{
        width: 42 * @toVw;
        position: absolute;
        right: 16 * @toVw;
        bottom: 18 * @toVw;
      }
      .tips-block{
        position: absolute;
        width: 100%;
        text-align: left;
        left: 0;
        bottom: 126 * @toVw;
        span{
          display: block;
          padding: 0 20 * @toVw;
          font-size: 14 * @toVw;
          color:#333333;
        }
      }
      .title{
        width: 273 * @toVw;
      }
    }
    .btn-block{
      margin-top: 20 * @toVw;
      position: relative;
      z-index: 4;
      img{
        width: 127 * @toVw;
        &:first-child{
          margin-right: 20 * @toVw;
        }
      }
    }
  }
  @media screen and (orientation: landscape) {
    .play-l{display: none}
      .play1 {
        display: block;
        height: 100%;
        background-size: 100% 100%;
        padding: 5 * @toVw;
        .bg-block {
          margin-top: 5 * @toVw;
          background: white;
          text-align: left;
          border-radius: 4 * @toVw;
          width: 245 * @toVw;
          height: 120 * @toVw;
          transform: rotate(0deg);
          padding: 10* @toVw;
          .radio-img {
            position: absolute;
            right: 5 * @toVw;
            top: 5 * @toVw;
            width: 20 * @toVw;
          }
          .btn {
            position: absolute;
            width: 20 * @toVw;
            right: 5 * @toVw;
            bottom: 5 * @toVw;
            &.back {
              bottom: 30 * @toVw
            }
          }
        }

      }
    .video-block {
      margin: 0;
      background: black;
      border-radius: 8/ 2 * @toVw;
      height: 123 * @toVw;
      width: 220 * @toVw;
      z-index: 2;
      top: 18 * @toVw;
      left: 63 * @toVw;
      position: absolute;
      .icon-class {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.3);
      }
      img {
        position: absolute;
        top: 50%;
        z-index: 2;
        left: 50%;
        width: 30 * @toVw;
        margin-top: -30/ 2 * @toVw;
        margin-left: -30/ 2 * @toVw;
      }
      video {
        width: 100%;
      }
    }
  }
</style>