njDaTuSha/src/pages/pg4/video.vue

<template>
  <div class="page pg-bg video-pg">
    <div class="content">
      <div class="title">
        <img src="/images/pg4/vid-title.png">
      </div>
      <video
          webkit-playsinline
          playsinline
          src="/video/和平宣言.mp4"
          preload="preload"
          autoplay="autoplay"
          :controls="controls"
          poster="/images/pg4/vid-poster.png"
          ref="mediaRef"
          @ended="show = true"
          @play="pause()"
          @pause="play()"
        ></video>
        <div class="play-action animate__animated animate__fadeIn">
          <img src="/images/pg4/重播.png" @click="onReplay" alt="" />
          <img src="/images/pg4/播撒种子.png" @click="onNext" alt="" />
        </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import { useModel } from '@zjxpcyc/vue-tiny-store';

  const { play, pause } = useModel('audio');
  const router = useRouter();
  const route = useRoute();
  const mediaRef = ref();
  const show = ref(true);
  const controls = ref();

  const onReplay = () => {
    mediaRef.value.play();
    show.value = false;
  };

  const onNext = () => {
    router.replace("/pg4/next");
  };

  onMounted(() => {
    // 自动播放
    try {

      const t = setTimeout(() => {
        clearTimeout(t);
      
        // 可能抛出异步异常
        const p = mediaRef.value.play();
        if (p) {
          p.then(() => {
            mediaRef.value.play();
          }).catch(err => {
            console.log('--play-err---', err)
            controls.value = "controls";
          })
        }

      }, 300);
    } catch (err) {
      console.log('---err---', err)
      controls.value = "controls";
    }

    // document.addEventListener('WeixinJSBridgeReady', () => {
    //   mediaRef.value.play();
    // });
  });

</script>

<style lang="less" scoped>
.video-pg {
  position: relative;
  background-image: url("/images/pg4/beijing.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    position: relative;

    .title {
      width: 60vw;
      margin: auto;
      margin-bottom: 80px;
    }

    video {
      // width: 100%;
      width: 100vw;
      z-index: 1;
    }
    .play-action {
      width: 100%;
      margin-top: 24px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100px;
        width: 30vw;
        height: 10vw;

        & + img {
          margin-left: 40px;
        }
      }
    }
  }
}
</style>