<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>