base_ui/components/other/MyVuePlyr.vue

<template>
  <div class="mt-2" id="myVid">
    <!-- video element -->
    <!-- <vue-plyr :options="options">
      <video controls crossorigin playsinline data-poster="poster.jpg">
        <source size="720" src="/path/to/video-720p.mp4" type="video/mp4" />
        <source size="1080" src="/path/to/video-1080p.mp4" type="video/mp4" />
        <track
          default
          kind="captions"
          label="English captions"
          src="/path/to/english.vtt"
          srclang="en"
        />
      </video>
    </vue-plyr> -->

    <!-- audio element -->
    <vue-plyr ref="plyr" :options="options">
      <video v-if="type == 'video'" controls crossorigin playsinline>
        <source
          size="720"
          :src="file.attachment.url"
          :type="'video/' + file.attachment.ext"
        />
      </video>

      <audio v-else controls crossorigin playsinline data-poster="poster.jpg">
        <source
          :src="file.attachment.url"
          :type="'audio/' + file.attachment.ext"
        />
      </audio>
    </vue-plyr>
    <p class="my-2">
      {{ file.attachment.name }}
    </p>
    <p class="my-2">
      {{ formatBytes(file.attachment.length) }}
    </p>
  </div>
</template>

<script>
/**
 * @vue-prop {String} [type] - نوع فایل
 * @vue-prop {Object} [file] - فایل
 *
 * @vue-data {undefined} [canvas=undefined] - یک محیط توسعه وب برای رسم شکل‌ها، تصاویر، ویدیوها و سایر عناصر گرافیکی است.
 * @vue-data {Object} [options] - گزینه‌های ویدیو پلیر
 * @vue-data {Array} [options.controls] - کنترل‌های ویدیو پلیر
 * @vue-data {Array} [options.controls=["play", "progress", "current-time", "mute", "volume", "settings", "download"]] - کنترل‌های ویدیو پلیر (پخش، پیشرفت، زمان فعلی، بی‌صدا، میزان صدا، تنظیمات، دانلود)
 * @vue-data {Object} [options.speed] - سرعت پخش ویدیو
 * @vue-data {Number} [options.speed.selected=1] - سرعت پخش انتخاب شده
 * @vue-data {Array} [options.speed.options=[0.75, 1, 1.5, 2]] - گزینه‌های سرعت پخش ویدیو
 */

export default {
  props: ["type", "file"],
  data() {
    return {
      canvas: undefined,
      options: {
        controls: [
          // "play-large", // The large play button in the center
          //'restart', // Restart playback
          // "rewind", // Rewind by the seek time (default 10 seconds)
          "play", // Play/pause playback
          // "fast-forward", // Fast forward by the seek time (default 10 seconds)
          "progress", // The progress bar and scrubber for playback and buffering
          "current-time", // The current time of playback
          // "duration", // The full duration of the media
          "mute", // Toggle mute
          "volume", // Volume control
          // "captions", // Toggle captions
          "settings", // Settings menu
          // "pip", // Picture-in-picture (currently Safari only)
          // "airplay", // Airplay (currently Safari only)
          "download", // Show a download button with a link to either the current source or a custom URL you specify in your options
          // "fullscreen", // Toggle fullscreen
        ],
        speed: { selected: 1, options: [0.75, 1, 1.5, 2] },
      },
    };
  },
  
  methods: {
    /**
     * گرفتن عکس از ویدیو.
     * این متد یک عکس از ویدیویی که در آن زمان مشخص شده است، گرفته و آن را به عنوان پوستر ویدیو تنظیم می‌کند.
     */
    captureSnapshot() {
      // var video = this.$refs.mediaPlayer;
      // this.canvas = document.getElementById("snapshotCanvas");
      // var context = canvas.getContext("2d");

      // canvas.width = video.videoWidth;
      // canvas.height = video.videoHeight;

      // video.currentTime = 10;

      // context.drawImage(video, 0, 0, canvas.width, canvas.height);

      var container = document.getElementById("myVid"),
        video = document.createElement("video"),
        canCapture = true;
      if (!video.canPlayType("video/wmv")) {
        /* If you don't have multiple sources, you can load up a Flash fallback here
       (like jPlayer), but you won't be able to capture frames */
        canCapture = false;
        return;
      }

      video.src = this.file.attachment.url;
      video.currentTime = "10.0";

      container.appendChild(video);
      video.play(); //or put this in a button click handler if you want your own controls

      var canvas = document.createElement("canvas");
      canvas.width = 640;
      canvas.height = 480;
      var ctx = canvas.getContext("2d");
      // if you want to preview the captured image,
      // attach the canvas to the DOM somewhere you can see it.

      //draw image to canvas. scale to target dimensions
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

      //convert to desired file format
      this.$refs.plyr.player.poster = canvas.toDataURL("image/jpeg"); // can also use 'image/png'
    },
    /**
     * فرمت کردن حجم فایل.
     * این متد حجم فایل را به صورت خوانا و فرمت‌داده شده با واحدهای مناسب برمی‌گرداند.
     *
     * @param {number} bytes - حجم فایل به بایت
     * @param {number} [decimals=2] - تعداد اعشار برای نمایش
     * @returns {string} - حجم فایل به صورت فرمت‌داده شده
     */
    formatBytes(bytes, decimals = 2) {
      if (!+bytes) return "0 Bytes";

      const k = 1024;
      const dm = decimals < 0 ? 0 : decimals;
      const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];

      const i = Math.floor(Math.log(bytes) / Math.log(k));

      return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
    },
  },
  mounted() {
    // this.captureSnapshot()
  },
};
</script>

<style scoped></style>