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.
322 lines (288 loc) • 11.6 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("vue"));
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["nuxt-multi-video-player"] = factory(require("vue"));
else
root["nuxt-multi-video-player"] = factory(root["Vue"]);
})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__648__) {
return /******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ 816:
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ 264:
/***/ (function(__unused_webpack_module, exports) {
var __webpack_unused_export__;
__webpack_unused_export__ = ({
value: true
});
// runtime helper for setting properties on components
// in a tree-shakable way
exports.c = (sfc, props) => {
const target = sfc.__vccOpts || sfc;
for (const [key, val] of props) {
target[key] = val;
}
return target;
};
/***/ }),
/***/ 648:
/***/ (function(module) {
module.exports = __WEBPACK_EXTERNAL_MODULE__648__;
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/publicPath */
/******/ !function() {
/******/ __webpack_require__.p = "";
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
!function() {
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ entry_lib; }
});
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
/* eslint-disable no-var */
// This file is imported into lib/wc client bundles.
if (typeof window !== 'undefined') {
var currentScript = window.document.currentScript
if (false) { var getCurrentScript; }
var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
if (src) {
__webpack_require__.p = src[1] // eslint-disable-line
}
}
// Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null);
// EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","root":"Vue"}
var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(648);
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Player.vue?vue&type=template&id=adc18458
const _hoisted_1 = ["id"];
const _hoisted_2 = ["src", "allow", "allowfullscreen", "id"];
const _hoisted_3 = ["autoplay", "loop", "muted", "poster", "preload"];
const _hoisted_4 = ["src"];
const _hoisted_5 = {
key: 2,
class: "v-player__content"
};
const _hoisted_6 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("strong", {
class: "v-player__content-strong"
}, "Sorry,", -1);
const _hoisted_7 = /*#__PURE__*/(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", {
class: "v-player__content-text"
}, "The given video URL is not valid or unsupported.", -1);
const _hoisted_8 = {
class: "v-player__content-link"
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", {
id: _ctx.id,
class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(["v-player", _ctx.containerStyles])
}, [$data.isValidUrl && $data.urlType == 'iframe' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("iframe", {
key: 0,
src: $options.getVideoUrl(_ctx.src),
allow: _ctx.allow,
allowfullscreen: _ctx.allowFullscreen,
id: _ctx.id + '-iframe',
class: (0,external_commonjs_vue_commonjs2_vue_root_Vue_.normalizeClass)(["v-player__iframe", _ctx.playerStyles])
}, null, 10, _hoisted_2)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), $data.isValidUrl && $data.urlType == 'video' ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("video", {
key: 1,
class: "v-player__video",
controls: "",
autoplay: _ctx.autoplay,
loop: _ctx.loop,
muted: _ctx.muted,
poster: _ctx.poster,
preload: _ctx.preload,
name: "media"
}, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("source", {
src: $options.getVideoUrl(_ctx.src)
}, null, 8, _hoisted_4)], 8, _hoisted_3)) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true), !$data.isValidUrl ? ((0,external_commonjs_vue_commonjs2_vue_root_Vue_.openBlock)(), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementBlock)("div", _hoisted_5, [_hoisted_6, _hoisted_7, (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createElementVNode)("p", _hoisted_8, "(" + (0,external_commonjs_vue_commonjs2_vue_root_Vue_.toDisplayString)($options.getVideoUrl(_ctx.src)) + ")", 1)])) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createCommentVNode)("", true)], 10, _hoisted_1);
}
;// CONCATENATED MODULE: ./src/components/Player.vue?vue&type=template&id=adc18458
;// CONCATENATED MODULE: ./src/mixins/props.js
/**
* Component props
*/
const mixin = {
props: {
id: {
type: String,
required: false,
default: 'v-player'
},
src: {
required: true
},
allow: {
required: false,
type: String,
default: 'clipboard-write; encrypted-media; gyroscope; picture-in-picture'
},
allowFullscreen: {
required: false,
type: Boolean,
default: true
},
containerStyles: {
required: false,
type: String
},
playerStyles: {
required: false,
type: String
},
autoplay: {
required: false,
type: Boolean,
default: false
},
loop: {
required: false,
type: Boolean,
default: false
},
muted: {
required: false,
type: Boolean,
default: false
},
poster: {
required: false,
type: String,
default: null
},
preload: {
required: false,
type: String,
default: 'auto'
}
}
};
/* harmony default export */ var props = (mixin);
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/Player.vue?vue&type=script&lang=js
__webpack_require__(816);
/* harmony default export */ var Playervue_type_script_lang_js = ({
name: 'video-player',
mixins: [props],
data() {
return {
isValidUrl: true,
urlType: 'iframe'
};
},
methods: {
getVideoUrl(url) {
if (!url) return null;
const vimeo = /(?:https?:\/\/(?:www\.)?)?vimeo.com\/(?:channels\/|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/;
const youtube = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
let isValidYoutubeUrl = url.match(youtube);
if (isValidYoutubeUrl) {
this.urlType = 'iframe';
return 'https://www.youtube.com/embed/' + isValidYoutubeUrl[1];
}
let isValidVimeoUrl = url.match(vimeo);
if (isValidVimeoUrl) {
this.urlType = 'iframe';
return 'https://player.vimeo.com/video/' + isValidVimeoUrl[3];
}
return this.isValidVideoUrl(url);
},
isValidVideoUrl(url) {
// let videoTypes = ['.mp4', '.avi', '.mov', 'mpg', '.wmv', '.flv', '.webm', '.mkv', '.ogv', '.3gp', '.3g2']
let videoTypes = ['.mp4', '.ogg', '.webm'];
for (let i in videoTypes) {
if (url.includes(videoTypes[i])) {
this.urlType = 'video';
return url;
}
}
this.isValidUrl = false;
return url;
}
}
});
;// CONCATENATED MODULE: ./src/components/Player.vue?vue&type=script&lang=js
// EXTERNAL MODULE: ./node_modules/vue-loader/dist/exportHelper.js
var exportHelper = __webpack_require__(264);
;// CONCATENATED MODULE: ./src/components/Player.vue
;
const __exports__ = /*#__PURE__*/(0,exportHelper/* default */.c)(Playervue_type_script_lang_js, [['render',render]])
/* harmony default export */ var Player = (__exports__);
;// CONCATENATED MODULE: ./src/index.js
const app = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.createApp)();
app.component('VideoPlayer', Player);
/* harmony default export */ var src_0 = (app);
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
/* harmony default export */ var entry_lib = (src_0);
}();
/******/ return __webpack_exports__;
/******/ })()
;
});
//# sourceMappingURL=nuxt-multi-video-player.umd.js.map