nuxt-multi-video-player
Version:
nuxt-multi-video-player is for playing online and offline videos in any Vue 3.2+ or Nuxt 3+ project. It supports local or most of kind of online video.
2 lines • 4.1 kB
JavaScript
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["nuxt-multi-video-player"]=t(require("vue")):e["nuxt-multi-video-player"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={448:function(e,t,r){r.r(t)},364:function(e,t){t.c=(e,t)=>{const r=e.__vccOpts||e;for(const[o,l]of t)r[o]=l;return r}},648:function(t){t.exports=e}},r={};function o(e){var l=r[e];if(void 0!==l)return l.exports;var n=r[e]={exports:{}};return t[e](n,n.exports,o),n.exports}!function(){o.d=function(e,t){for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}}(),function(){o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){o.p=""}();var l={};return function(){if(o.r(l),o.d(l,{default:function(){return S}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(o.p=t[1])}var r=o(648);const n=["id"],i=["src","allow","allowfullscreen","id"],a=["autoplay","loop","muted","poster","preload"],u=["src"],c={key:2,class:"v-player__content"},d=(0,r.createElementVNode)("strong",{class:"v-player__content-strong"},"Sorry,",-1),p=(0,r.createElementVNode)("p",{class:"v-player__content-text"},"The given video URL is not valid or unsupported.",-1),s={class:"v-player__content-link"};function y(e,t,o,l,y,f){return(0,r.openBlock)(),(0,r.createElementBlock)("div",{id:e.id,class:(0,r.normalizeClass)(["v-player",e.containerStyles])},[y.isValidUrl&&"iframe"==y.urlType?((0,r.openBlock)(),(0,r.createElementBlock)("iframe",{key:0,src:f.getVideoUrl(e.src),allow:e.allow,allowfullscreen:e.allowFullscreen,id:e.id+"-iframe",class:(0,r.normalizeClass)(["v-player__iframe",e.playerStyles])},null,10,i)):(0,r.createCommentVNode)("",!0),y.isValidUrl&&"video"==y.urlType?((0,r.openBlock)(),(0,r.createElementBlock)("video",{key:1,class:"v-player__video",controls:"",autoplay:e.autoplay,loop:e.loop,muted:e.muted,poster:e.poster,preload:e.preload,name:"media"},[(0,r.createElementVNode)("source",{src:f.getVideoUrl(e.src)},null,8,u)],8,a)):(0,r.createCommentVNode)("",!0),y.isValidUrl?(0,r.createCommentVNode)("",!0):((0,r.openBlock)(),(0,r.createElementBlock)("div",c,[d,p,(0,r.createElementVNode)("p",s,"("+(0,r.toDisplayString)(f.getVideoUrl(e.src))+")",1)]))],10,n)}const f={props:{id:{type:String,required:!1,default:"v-player"},src:{required:!0},allow:{required:!1,type:String,default:"clipboard-write; encrypted-media; gyroscope; picture-in-picture"},allowFullscreen:{required:!1,type:Boolean,default:!0},containerStyles:{required:!1,type:String},playerStyles:{required:!1,type:String},autoplay:{required:!1,type:Boolean,default:!1},loop:{required:!1,type:Boolean,default:!1},muted:{required:!1,type:Boolean,default:!1},poster:{required:!1,type:String,default:null},preload:{required:!1,type:String,default:"auto"}}};var m=f;o(448);var v={name:"video-player",mixins:[m],data(){return{isValidUrl:!0,urlType:"iframe"}},methods:{getVideoUrl(e){if(!e)return null;const t=/(?:https?:\/\/(?:www\.)?)?vimeo.com\/(?:channels\/|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/,r=/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;let o=e.match(r);if(o)return this.urlType="iframe","https://www.youtube.com/embed/"+o[1];let l=e.match(t);return l?(this.urlType="iframe","https://player.vimeo.com/video/"+l[3]):this.isValidVideoUrl(e)},isValidVideoUrl(e){let t=[".mp4",".ogg",".webm"];for(let r in t)if(e.includes(t[r]))return this.urlType="video",e;return this.isValidUrl=!1,e}}},w=o(364);const g=(0,w.c)(v,[["render",y]]);var V=g;const b=(0,r.createApp)();b.component("VideoPlayer",V);var h=b,S=h}(),l}()}));
//# sourceMappingURL=nuxt-multi-video-player.umd.min.js.map