photoprism/frontend/src/component/video/player.vue

<template>
  <div class="video-wrapper" :style="style">
    <video :key="source" ref="video" class="video-player" :height="height" :width="width" :autoplay="autoplay"
           :style="style" :poster="poster" :loop="loop" preload="auto" controls playsinline @click.stop
           @keydown.esc.stop.prevent="$emit('close')">
      <source :src="source">
    </video>
  </div>
</template>

<script>
export default {
  name: "PPhotoPlayer",
  props: {
    show: {
      type: Boolean,
      required: false,
      default: false
    },
    poster: {
      type: String,
      required: true,
      default: ""
    },
    source: {
      type: String,
      required: true,
      default: ""
    },
    width: {
      type: Number,
      required: false,
      default: 640
    },
    height: {
      type: Number,
      required: false,
      default: 480
    },
    preload: {
      type: String,
      required: false,
      default: "none"
    },
    autoplay: {
      type: Boolean,
      required: false,
      default: false
    },
    loop: {
      type: Boolean,
      required: false,
      default: false
    },
    success: {
      type: Function,
      default() {
        return false;
      }
    },
    error: {
      type: Function,
      default() {
        return false;
      }
    }
  },
  data: () => ({
    refresh: false,
    style: `width: 90vw; height: 90vh`,
  }),
  watch: {
    source: function (src) {
      if (src) {
        this.setSrc(src);
      }
    },
  },
  mounted() {
    document.body.classList.add("player");
    this.render();
  },
  beforeDestroy() {
    document.body.classList.remove("player");
    this.remove();
  },
  methods: {
    videoEl() {
      return this.$refs.video.$el;
    },
    updateStyle() {
      this.style = `width: ${this.width.toString()}px; height: ${this.height.toString()}px`;
      this.$el.style.cssText = this.style;
    },
    render() {
      this.updateStyle();
    },
    remove() {
      const el = this.videoEl();
      if (!el) return;

      this.videoEl().pause();
    },
    fullscreen() {
      const el = this.videoEl();
      if (!el) return;

      el.requestFullscreen();
    },
    setSrc(src) {
      if (!src) {
        return;
      }

      this.updateStyle();

      const el = this.videoEl();
      if (!el) return;

      el.src = src;
      el.poster = this.poster;
      el.play();
    },
    pause() {
      const el = this.videoEl();
      if (!el) return;

      el.pause();
    },
  },
};
</script>