i18n-demo/src/components/IphVideo.vue

<!--
 * @Descripttion: 视频播放组件
 * @version: 1.0.0
 * @Author: dream
 * @Date: 2021-04-09 16:34:52
 * @LastEditors: dream
 * @LastEditTime: 2021-04-09 18:28:42
-->
<template>
  <div class="iph-video">
    <video
      ref="video"
      src="https://kvideo01.youju.sohu.com/57809bc9-b8d7-4cbd-931b-4f626c72c78f1_0_0.mp4"
      poster="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/2_首页/u50.jpg?token=d3f9e89d19d358dc1cbfc2df7219ec71639c0285e84c953bc2d8b82702bc832c"
      :controls="playing"
      width="567px"
      height="345px"
      @ended="videoEnd"
      style="object-fit: cover;"
    />
    <div class="cover" v-show="!playing">
      <img
        class="play-icon"
        src="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/2_首页/u164.svg?token=33044f8a6dacb3edd16b81de16d921232be2f56b81a00d178bf963930bf72c06"
        width="142px"
        height="148px"
        @click="play"
      />
      <img
        class="full-icon"
        src="https://d1icd6shlvmxi6.cloudfront.net/gsc/E14NP2/e3/bd/34/e3bd34282769491dae12c86cafb22cd5/images/2_首页/u165.svg?token=3366463f5e2de7278269fe9eb6f59be69977a95c6606ecb45726975c5c5b864f"
        width="30px"
        height="30px"
        @click="openFloating"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'IphVideo',
  data () {
    return {
      playing: false,
      dialogVisible: false
    }
  },
  methods: {
    play () {
      this.playing = true
      this.$refs.video.play()
    },
    videoEnd () {
      this.playing = false
      this.$refs.video.load()
    },
    openFloating () {
      this.playing = true
      this.$refs.video.requestPictureInPicture()
    }
  }
}
</script>

<style lang="scss" scoped>
.iph-video {
  position: relative;
  .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 567px;
    height: 345px;
    background-color: rgba(255, 255, 255, .5);
    .play-icon {
      position: absolute;
      top: 98px;
      left: 224px;
    }
    .full-icon {
      position: absolute;
      right: 12px;
      bottom: 12px;
    }
  }
}
</style>