Vue verwendet das Video-Tag, um die Videowiedergabe zu implementieren

 <Vorlage>
  <!-- Videokomponente -->
  <div id="gemeinsames-video" Klasse="h-100">
    <div :class="{ isShow: Steuerung }" class="h-100">
      <Video
        ref="meinVideo"
        :poster="Poster"
        :src="Quelle"
        :Steuerung="Steuerung"
        oncontextmenu="false zurückgeben"
        @timeupdate="Zeitupdate"
        Kontrollliste="kein Download"
        Klasse="Video-Box"
      ></video>
      <Bild
        Quelle="@/assets/images/playbtn.png"
        alt=""
        @click="Video bedienen"
        Klasse = "Zeiger-Operator-BTN"
        :Klasse="{ 'Ausblenden': Videostatus }"
      />
    </div>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "CommonVideo",
  Daten() {
    zurückkehren {
      videoState: false, // Videowiedergabestatus // Lernzeit studyTime: {
        currentTime: 0, // Aktuelle Lernzeitdauer: 0 // Gesamtzeit},
      Timer: {}, // Timer pauseTimer: {} // Timer pausieren };
  },
  /**
   * @param Poster-Anzeigebild* @param src Videoressource* @param steuert, ob Steuerelemente angezeigt werden sollen* @param Steuerungssteuerung* @param videoData grundlegende Videodaten*/
  Requisiten: {
    Poster:
      Typ: Zeichenfolge,
      erforderlich: false,
      Standard: ""
    },
    Quelle: {
      Typ: Zeichenfolge,
      erforderlich: true
    },
    Kontrollen: {
      Typ: Boolean,
      erforderlich: false,
      Standard: true
    },
    Kontrolle: {
      Typ: Boolean,
      erforderlich: false,
      Standard: false
    },
    videoDaten: {
      Typ: Objekt,
      erforderlich: true
    }
  },
  montiert() {
    // Auf Videowiedergabe warten this.$refs.myVideo.addEventListener("play", () => {
      console.log("Video wird abgespielt");
      dies.openTimer();
    });
    // Auf Videopause warten this.$refs.myVideo.addEventListener("pause", () => {
      console.log("Video wurde gestoppt");
      dies.closeTimer();
    });
  },
  Methoden: {
    // Öffne den Timer openTimer() {
      dieser.timer = setzeInterval(() => {
        dies.$emit("videoStudyTime", diese.studyTime);
      }, 5000);
    },
    // Schließe den Timer closeTimer() {
      : ClearInterval(dieser.Timer);
      dies.$emit("videoStudyTime", diese.studyTime);
    },
    // Öffne den Pausentimer openPauseTimer() {
      this.pauseTimer = setInterval(() => {
        this.hintOperate();
      }, 600000);
    },
    // Schließe den Pausentimer closePauseTimer() {
      : ClearInterval(dieser.pauseTimer);
    },
    // Hinweisoperation hintOperate() {
      dies.operateVideo();
      this.$alert("Bitte klicken, um zu bestätigen und mit dem Lernen fortzufahren", "Prompt", {
        confirmButtonText: "Bestätigen",
        confirmButtonClass: "Hinweis-BTN",
        showClose: false,
        Rückruf: Aktion => {
          dies.$refs.myVideo.currentTime = dies.videoData.currentTime;
          dies.operateVideo();
          this.openPauseTimer();
        }
      });
    },
    // Aktuelle Wiedergabeposition abrufen timeupdate(e) {
      diese.Studienzeit.aktuelleZeit = e.Ziel.aktuelleZeit;
      diese.Studienzeit.Dauer = e.Ziel.Dauer? e.Ziel.Dauer: 0;
    },
    // Videowiedergabe steuern und pausieren operateVideo() {
      wenn (!this.src) {
        this.$message({ message: "Keine Videoressourcen, bitte sehen Sie sich andere Videos an!" });
        gibt false zurück;
      }
      wenn (this.$refs.myVideo.paused) {
        dies.$refs.myVideo.play();
        dieser.videoState = wahr;
      } anders {
        dies.$refs.myVideo.pause();
        dieser.videoState = falsch;
      }
    }
  },
  betrachten:
    //Überwachungsvorgang videoData(val, oldVal) {
      const { aktuelleZeit, Dauer } = val;
      wenn (aktuelleZeit && Dauer && aktuelleZeit < Dauer) {
        this.hintOperate();
      }
    }
  }
};
</Skript>

<style lang="less">
#gemeinsames-video {
  Position: relativ;
  .video-box {
    Box-Größe: Rahmenbox;
    Rand: 0;
    Anzeige: Block;
    Breite: 100 %;
    Höhe: 100%;
    Gliederung: keine !wichtig;
  }
  .isShow {
    //Fortschrittsbalken video::-webkit-media-controls-timeline {
      Anzeige: keine;
    }
  }
  video::-webkit-mediensteuerung-wiedergabetaste {
    Sichtbarkeit: versteckt;
  }
  .operate-btn {
    Anzeige: Block;
    Breite: 60px;
    Höhe: 60px;
    Position: absolut;
    oben: berechnet (50 % – 30 Pixel);
    links: calc(50% - 30px);
  }
  .operate-btn:hover {
    Deckkraft: 0,8;
  }
  .ausblenden {
    Deckkraft: 0;
  }
}
</Stil>