		@@ -1,91 +0,11 @@
		import templateEngine from '@pluginjs/template';
		import is from '@pluginjs/is';
		import { isArray } from '@pluginjs/is';
		import { setStyle } from '@pluginjs/styled';
		import { append, parseHTML, query } from '@pluginjs/dom';
		import { eventable, register, stateable, styleable } from '@pluginjs/pluginjs';
		import { bindEvent, trigger } from '@pluginjs/events';
		import { append, query } from '@pluginjs/dom';
		import { each } from '@pluginjs/utils';
		import Pj from '@pluginjs/factory';
		import Component from '@pluginjs/component';
		import '@pluginjs/classes';
		import { eventable, register, stateable, styleable, optionable } from '@pluginjs/decorator';
		import { addClass, removeClass } from '@pluginjs/classes';

		var _extends = Object.assign \|\| function (target) {
		for (var i = 1; i < arguments.length; i++) {
		var source = arguments[i];

		for (var key in source) {
		if (Object.prototype.hasOwnProperty.call(source, key)) {
		target[key] = source[key];
		}
		}
		}

		return target;
		};
		function nub(arr) {
		return Array.from(new Set(arr));
		}
		function isPlainObject(data) {
		if (typeof data !== 'object') {
		return false;
		}

		if (data === null) {
		return false;
		}

		if (data instanceof Set \|\| data instanceof Map) {
		return false;
		}

		if (Array.isArray(data)) {
		return false;
		}

		return true;
		}
		function deepMergeTwo(x, y) {
		if (isPlainObject(y) && isPlainObject(x) \|\| isPlainObject(x) && Array.isArray(y)) {
		return fromPairs$1(nub(Object.keys(x).concat(Object.keys(y))).map(key => [key, deepMergeTwo(x[key], y[key])]));
		}

		if (isPlainObject(y) && typeof x === 'function') {
		return Object.assign(function (...args) {
		return x.apply(this, args);
		}, y);
		}

		if (isPlainObject(y) && Array.isArray(x)) {
		return Object.assign([], x, y);
		}

		if (isPlainObject(x) && typeof y === 'function') {
		return Object.assign(function (...args) {
		return y.apply(this, args);
		}, x);
		}

		if (Array.isArray(y) && Array.isArray(x)) {
		// return x.concat(y)
		return nub(Object.keys(y).concat(Object.keys(x))).map(index => deepMergeTwo(x[index], y[index]));
		}

		if (typeof y === 'undefined') {
		return x;
		}
		return y;
		}
		function isObject(obj) {
		return Object(obj) === obj;
		}
		function deepMerge(...args) {
		return args.filter(isObject).reduce(deepMergeTwo);
		}

		function fromPairs$1(arr) {
		return arr.reduce((r, [k, v]) => _extends({}, r, {
		[k]: v
		}), {});
		}

		const namespace = 'video';

		const events = {
		@@ -99,23 +19,16 @@ READY: 'ready',
		STOP: 'stop',
		PLAYEND: 'playend',
		PLAYERR: 'playerr'
		ENDED: 'ended',
		ERROR: 'error',
		BUFFERING: 'buffering'
		};

		const classes = {
		NAMESPACE: `pj-${namespace}`,
		THEME: '{namespace}--{theme}',
		POSTER: '{namespace}-poster'
		POSTER: '{namespace}-poster',
		POSTERHIDE: '{namespace}-poster-hide'
		};

		const methods = ['enable', 'disable', 'destroy', 'pause', 'load', 'play', 'stop', 'volume', 'setSize', 'switchVideo', 'duration', 'currentTime', 'mute', 'unMute', 'setCurrentTime'];

		const methods = ['enable', 'disable', 'destroy', 'pause', 'load', 'play', 'stop', 'volume', 'setSize', 'swichVideo', 'duration', 'currentTime', 'mute', 'unMute', 'setCurrentTime'];
		const defaults = {
		template() {
		return '<div class="{classes.NAMESPACE}">' + '{poster}' + '</div>';
		},
		templates: {
		poster() {
		return '<div class="{classes.POSTER}"></div>';
		}
		},
		width: '100%',
		height: '100%',
		url: '',
		@@ -130,75 +43,79 @@ id: '',

		const info = { version: '0.0.1' };

		let Html5 = class Html5 {
		constructor(video, element, options) {
		class Html5 {
		constructor(instance, element) {
		this.element = element;
		this.options = options;
		this.instance = video;
		this.classes = video.classes;
		this.options = Object.assign({
		autoplay: false,
		controls: true,
		loop: true,
		muted: false
		}, instance.options);
		this.instance = instance;
		}

		init(done) {
		this.$player = document.createElement('video');
		this.$player.autoplay = this.options.autoplay;
		this.$player.controls = this.options.controls;
		this.$player.loop = this.options.loop;
		this.$player.muted = this.options.muted;
		append(this.$player, this.element);
		done();
		}

		load() {
		this.wrap = parseHTML(this.createHtml());
		append(this.wrap, this.element);
		if (this.options.poster) {
		this.poster = query(`.${this.instance.classes.POSTER}`, this.wrap);
		setStyle({ 'background-image': `url(${this.options.poster})` }, this.poster);
		}

		this.video = document.createElement('video');
		this.setDefaultParameters();
		append(this.video, this.wrap);

		this.instance.trigger(events.LOAD);
		this.instance.trigger(events.LOADED);
		if (this.options.poster) {
		this.poster.style.display = 'none';
		}
		this.setSources(this.options.url);
		this.bind();
		}

		setDefaultParameters() {
		if (is.array(this.options.url)) {
		for (let i = 0; i < this.options.url.length; i++) {
		const videoTypeArr = this.options.url[i].split('.');
		const videoType = videoTypeArr[videoTypeArr.length - 1];

		this.addSourceToVideo(this.options.url[i], videoType);
		bind() {
		this.listeners = {
		canplay: () => {
		this.instance.trigger(events.LOADED);
		this.instance.hidePoster();
		},
		play: () => {
		this.instance.trigger(events.PLAY);
		},
		pause: () => {
		this.instance.trigger(events.PAUSE);
		},
		ended: () => {
		this.instance.trigger(events.ENDED);
		},
		waiting: () => {
		this.instance.trigger(events.BUFFERING);
		},
		error: _error => {
		this.instance.trigger(events.ERROR, _error);
		}
		} else {
		const videoTypeArr = this.options.url.split('.');
		const videoType = videoTypeArr[videoTypeArr.length - 1];
		};
		each(this.listeners, (event, listener) => {
		this.$player.addEventListener(event, listener);
		});
		}

		this.addSourceToVideo(this.options.url, videoType);
		}

		this.video.autoplay = this.options.autoplay;
		this.video.controls = this.options.controls;
		this.video.loop = this.options.loop;
		unbind() {
		each(this.listeners, (event, listener) => {
		this.$player.removeEventListener(event, listener);
		});
		}

		createHtml() {
		let poster = '';

		if (this.options.poster !== '') {
		poster = templateEngine.render(this.options.templates.poster.call(this), {
		classes: this.classes
		setSources(sources) {
		if (isArray(sources)) {
		sources.forEach(source => {
		this.addSource(source);
		});
		} else {
		this.addSource(sources);
		}

		const html = templateEngine.render(this.options.template.call(this), {
		classes: this.classes,
		poster
		});
		return html;
		}

		addSourceToVideo(src, type) {
		addSource(url) {
		const type = url.split('.').pop();
		const source = document.createElement('source');

		source.src = src;
		source.src = url;
		source.type = `video/${type}`;

		append(source, this.video);
		append(source, this.$player);
		}
		@@ -210,84 +127,43 @@
		height
		}, this.wrap);
		}, this.$player);
		}

		switchVideo(id) {
		this.video.src = id;
		swichVideo(src) {
		this.pause();
		this.$player.innerHTML = '';
		this.setSources(src);
		this.$player.load();
		}

		bind() {
		this.eventListener('play');
		this.eventListener('pause');
		this.eventListener('error');
		// this.eventListener('stalled')
		}

		registerEvent(eventName, callback, element) {
		if (!this.listeners) {
		this.listeners = {};
		}

		if (!this.listeners[eventName]) {
		this.listeners[eventName] = [];
		}

		this.listeners[eventName].push(callback);

		element.addEventListener(eventName, callback);
		}

		removeListener(eventName, element) {
		if (!this.listeners[eventName]) {
		console.log('not bind eventName:', eventName);
		}

		this.listeners[eventName].map(callback => {
		element.removeEventListener(eventName, callback);
		});
		}

		unbind() {
		this.removeListener('error', this.video);
		this.removeListener('play', this.video);
		this.removeListener('pause', this.video);
		}

		eventListener(eventName) {
		const capitalEvent = eventName.toUpperCase();
		this.registerEvent(eventName, () => {
		this.instance.trigger(events[capitalEvent]);
		}, this.video);
		}

		currentTime() {
		return this.video.currentTime;
		return this.$player.currentTime;
		}

		duration() {
		return this.video.duration;
		return this.$player.duration;
		}

		setCurrentTime(val) {
		this.video.currentTime = val;
		this.$player.currentTime = val;
		}

		pause() {
		this.video.pause();
		this.$player.pause();
		}

		play() {
		this.video.play();
		this.$player.play();
		}

		mute() {
		this.video.muted = true;
		this.$player.muted = true;
		}

		unMute() {
		this.video.muted = false;
		this.$player.muted = false;
		}

		stop() {
		this.video.currentTime = 0;
		this.video.pause();
		this.$player.currentTime = 0;
		this.$player.pause();
		this.instance.trigger(events.STOP);
		@@ -297,3 +173,3 @@ }
		volume(value) {
		this.video.volume = value / 100;
		this.$player.volume = value / 100;
		}
		@@ -303,60 +179,67 @@
		this.unbind();
		const element = query('video', this.wrap);
		if (element) {
		element.src = '//about:blank';
		}
		this.wrap.remove();
		this.$player.remove();
		}
		};

		window.AsVimeoAPIReady = false;
		}

		let Vimeo = class Vimeo {
		constructor(instance, element, options) {
		window.PJVIMEOAPIREADY = false;

		class Vimeo {
		constructor(instance, element) {
		this.element = element;
		this.options = options;
		this.options = Object.assign({
		autopause: true,
		autoplay: false,
		background: !instance.options.controls,
		byline: false,
		color: '#00adef',
		loop: true,
		muted: false,
		playsinline: true,
		portrait: false,
		speed: false,
		title: false,
		transparent: false
		}, instance.options);
		this.instance = instance;
		this.classes = instance.classes;
		}

		load() {
		this.wrap = parseHTML(this.createHtml());
		append(this.wrap, this.element);
		if (this.options.poster) {
		this.poster = query(`.${this.instance.classes.POSTER}`, this.wrap);
		setStyle({ 'background-image': `url(${this.options.poster})` }, this.poster);
		}
		init(done) {
		this._duration = null;
		this._currentTime = null;
		this.$player = document.createElement('div');
		setStyle({
		width: this.options.width,
		height: this.options.height
		}, this.$player);
		append(this.$player, this.element);

		if (window.AsVimeoAPIReady) {
		this.init();
		this.instance.trigger(events.LOAD);
		if (!window.PJVIMEOAPIREADY) {
		Pj.emitter.on('video:vimeo:ready', () => {
		done();
		});
		this.constructor.prepare();
		} else {
		this.loadApi();
		bindEvent({
		type: 'AsVideoVimeoAPIReady',
		handler: () => {
		this.init();
		this.instance.trigger(events.LOAD);
		}
		}, this.element);
		done();
		}
		}

		init() {
		const playerSettings = {
		load() {
		this.instance.trigger(events.LOAD);
		const options = this.options;
		this.api = new window.Vimeo.Player(this.$player, {
		id: this.getId(),
		loop: this.options.loop,
		autoplay: this.options.autoplay,
		// height:400,
		// url:'https://player.vimeo.com/video/76979871',
		title: false, // defaults to true
		portrait: false, // Show the user’s portrait on the video. Defaults to true.
		// maxwidth: '',
		// maxheight '',
		xhtml: false, // Make the embed code XHTML compliant. Defaults to false.
		byline: false, // Show the byline on the video. Defaults to true.
		autopause: false // Pause this video automatically when another one plays. Defaults to true.
		};

		this.media = new window.Vimeo.Player(this.wrap, playerSettings);
		autopause: options.autopause,
		autoplay: options.autoplay,
		background: options.background,
		byline: options.byline,
		color: options.color,
		loop: options.loop,
		muted: options.muted,
		playsinline: options.playsinline,
		portrait: options.portrait,
		speed: options.speed,
		title: options.title,
		transparent: options.transparent
		});
		this.bind();
		@@ -371,56 +254,56 @@ }
		}

		return undefined;
		/* eslint-disable-line */
		}

		createHtml() {
		let poster = '';
		static prepare() {
		if (!window.PJVIMEOAPIREADY) {
		const script = document.createElement('script');

		if (this.options.poster !== '') {
		poster = templateEngine.render(this.options.templates.poster.call(this), {
		classes: this.classes
		});
		script.onload = () => {
		window.PJVIMEOAPIREADY = true;
		Pj.emitter.emit('video:vimeo:ready');
		};

		script.src = 'https://player.vimeo.com/api/player.js';
		const firstScript = document.getElementsByTagName('script')[0];
		firstScript.parentNode.insertBefore(script, firstScript);
		}

		const html = templateEngine.render(this.options.template.call(this), {
		classes: this.classes,
		poster
		});
		return html;
		}

		loadApi() {
		const tag = document.createElement('script');
		tag.src = 'https://player.vimeo.com/api/player.js';
		document.querySelector('body').appendChild(tag);

		let count = 1;
		const vimeoApiReady = setInterval(() => {
		if (count > 50) {
		clearInterval(vimeoApiReady);
		console.log('loadApi error');
		this.instance.destroy();
		}
		count++;
		if (typeof window.Vimeo === 'undefined') {
		return;
		}
		window.AsVimeoAPIReady = true;
		trigger('AsVideoVimeoAPIReady', this.element);
		clearInterval(vimeoApiReady);
		}, 350);
		}

		bind() {
		this.media.on('play', () => {
		this.api.on('play', () => {
		this.instance.trigger(events.PLAY);
		});
		this.media.on('pause', () => {
		this.api.on('pause', () => {
		this.instance.trigger(events.PAUSE);
		});
		this.media.on('loaded', () => {
		this.api.on('ended', () => {
		this.instance.trigger(events.ENDED);
		});
		this.api.on('loaded', () => {
		this.instance.trigger(events.LOADED);
		if (this.options.poster) {
		this.poster.style.display = 'none';
		this.instance.hidePoster();
		this.$iframe = query('iframe', this.$player);
		this.$iframe.setAttribute('width', '100%');
		this.$iframe.setAttribute('height', '100%');

		if (this.options.background && !this.options.muted) {
		this.volume(50);
		}

		this.api.getDuration().then(duration => {
		this._duration = duration;
		});
		});
		this.api.on('timeupdate', time => {
		this._currentTime = time.seconds;
		});
		this.api.on('error', error => {
		this.instance.trigger(events.ERROR, error);
		});
		this.api.on('bufferstart', () => {
		this.instance.trigger(events.BUFFERING);
		});
		}
		@@ -432,38 +315,24 @@
		height
		}, this.wrap);
		}, this.$player);
		}

		switchVideo(id) {
		this.media.loadVideo(id);
		swichVideo(id) {
		this.api.loadVideo(id);
		}

		_currentTime() {
		this.media.getCurrentTime().then(seconds => {
		this.options.currentTime = seconds;
		});
		}

		currentTime() {
		this._currentTime();
		return this.options.currentTime;
		return this._currentTime;
		}

		_duration() {
		return this.media.getDuration().then(duration => {
		this.options.duration = duration;
		});
		}

		duration() {
		this._duration();
		return this.options.duration;
		return this._duration;
		}

		setCurrentTime(val) {
		this.media.setCurrentTime(val);
		this.api.setCurrentTime(val);
		}

		stop() {
		this.media.setCurrentTime(0);
		this.media.pause();
		this.api.setCurrentTime(0);
		this.api.pause();
		this.instance.trigger(events.STOP);
		@@ -473,2 +342,5 @@ }
		mute() {
		this.api.getVolume().then(volume => {
		this._preVolume = volume;
		});
		this.volume(0);
		@@ -478,103 +350,117 @@ }
		unMute() {
		this.volume(50);
		if (this._preVolume) {
		this.api.setVolume(this._preVolume);
		}
		}

		pause() {
		this.media.pause();
		this.instance.trigger('pause');
		this.api.pause();
		}

		volume(value) {
		this.media.setVolume(value / 100);
		if (typeof value === 'undefined') {
		return this.api.getVolume();
		}

		return this.api.setVolume(value / 100);
		}

		play() {
		this.media.play();
		this.api.play();
		}

		destroy() {
		const element = query('iframe', this.wrap);
		if (element) {
		element.src = '//about:blank';
		if (this.api) {
		this.api.destroy();
		}
		this.wrap.remove();

		this.$player.remove();
		}
		};

		window.AsYTAPIReady = false;
		}

		let Youtube = class Youtube {
		constructor(instance, element, options) {
		/* eslint-disable camelcase */
		window.PJYTAPIREADY = false;

		class Youtube {
		constructor(instance, element) {
		this.element = element;
		this.options = options;
		this.options = Object.assign({
		autoplay: true,
		controls: false,
		muted: false,
		disablekb: false,
		fs: false,
		iv_load_policy: true,
		loop: true,
		modestbranding: false,
		playsinline: true,
		rel: false,
		showinfo: false
		}, instance.options);
		this.instance = instance;
		this.classes = instance.classes;
		}

		load() {
		this.wrap = parseHTML(this.createHtml());
		append(this.wrap, this.element);
		if (this.options.poster) {
		this.poster = query(`.${this.instance.classes.POSTER}`, this.wrap);
		setStyle({ 'background-image': `url(${this.options.poster})` }, this.poster);
		}
		init(done) {
		this.$player = document.createElement('div');
		append(this.$player, this.element);

		if (window.AsYTAPIReady) {
		this.init();
		this.instance.trigger(events.LOAD);
		if (!window.PJYTAPIREADY) {
		Pj.emitter.on('video:youtube:ready', () => {
		done();
		});
		this.constructor.prepare();
		} else {
		this.loadApi();
		done();
		}
		}

		init() {
		this.iframe = document.createElement('div');
		append(this.iframe, this.wrap);

		this.setdefault();

		const playerSettings = {
		volume: 0, // 0 - 100
		autohide: 0, // autohide controls
		autoplay: this.options.autoplay, // autoplay on load
		color: 'red', // red, white
		controls: this.options.controls, // show control UI
		disablekb: 0, // enable/disable keyboard control
		enablejsapi: 1,
		fs: 0, // display fullscreen button
		hl: null, // interface language
		// iv_load_policy: 3,
		loop: 1, // loop video flag (doesn't work properly)
		modestbranding: 1, // show/hide youtube logo
		playsinline: 0,
		rel: 0, // shows relative videos
		showinfo: 0,
		start: 0, // set beginning of the video
		end: 0, // set end of the video
		quality: 'default' // small, medium, large, hd720, hd1080, highres or default
		};

		this.media = new YT.Player(this.iframe, {
		load() {
		this.instance.trigger(events.LOAD);
		const options = this.options;
		this.api = new window.YT.Player(this.$player, {
		videoId: this.getId(),
		mute: true,
		repeat: true,
		playButtonClass: 'YTPlayer-play',
		pauseButtonClass: 'YTPlayer-pause',
		muteButtonClass: 'YTPlayer-mute',
		volumeUpClass: 'YTPlayer-volume-up',
		volumeDownClass: 'YTPlayer-volume-down',
		start: 0,
		pauseOnScroll: false,
		fitToBackground: true,
		playerVars: playerSettings,
		width: options.width,
		height: options.height,
		playerVars: {
		autoplay: options.autoplay ? 1 : 0,
		cc_load_policy: options.cc_load_policy ? 1 : 0,
		controls: options.controls ? 2 : 0,
		disablekb: options.keyboard ? 0 : 1,
		enablejsapi: 0,
		fs: options.fullscreen ? 1 : 0,
		iv_load_policy: options.iv_load_policy ? 1 : 3,
		loop: options.loop ? 0 : 1,
		modestbranding: options.modestbranding ? 1 : 0,
		origin: window.location.origin,
		playsinline: options.playsinline ? 1 : 0,
		rel: options.rel ? 1 : 0,
		showinfo: options.showinfo ? 1 : 0,
		wmode: 'opaque'
		},
		events: {
		onReady: () => {
		this.instance.trigger(events.LOADED);
		if (this.options.poster) {
		this.poster.style.display = 'none';
		this.instance.hidePoster();

		if (options.muted) {
		this.api.mute();
		}
		},
		onStateChange: event => {
		if (event.data === 1) {
		this.instance.trigger(events.PLAY);
		} else if (event.data === 2) {
		this.instance.trigger(events.PAUSE);
		} else if (event.data === 0) {
		this.instance.trigger(events.ENDED);
		} else if (event.data === 3) {
		this.instance.trigger(events.BUFFERING);
		}
		},
		onError: error => {
		this.instance.trigger(events.ERROR, error);
		}
		}
		});
		this.bind();
		}
		@@ -588,23 +474,19 @@
		}

		return undefined;
		/* eslint-disable-line */
		}

		loadApi() {
		static prepare() {
		window.onYouTubeIframeAPIReady = () => {
		this.init();
		window.AsYTAPIReady = true;
		this.instance.trigger(events.LOAD);
		window.PJYTAPIREADY = true;
		Pj.emitter.emit('video:youtube:ready');
		};

		const tag = document.createElement('script');
		tag.src = 'https://www.youtube.com/iframe_api';
		const firstScriptTag = document.getElementsByTagName('script')[0];
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
		const script = document.createElement('script');
		script.src = 'https://www.youtube.com/iframe_api';
		const firstScript = document.getElementsByTagName('script')[0];
		firstScript.parentNode.insertBefore(script, firstScript);
		}

		setdefault() {
		this.options.autoplay = this.options.autoplay ? 1 : 0;
		this.options.controls = this.options.controls ? 1 : 0;
		}

		setSize(width, height) {
		@@ -614,73 +496,41 @@ setStyle({
		height
		}, this.wrap);
		}, this.element);
		}

		switchVideo(id) {
		this.media.loadVideoById({ videoId: id });
		}

		createHtml() {
		let poster = '';

		if (this.options.poster !== '') {
		poster = templateEngine.render(this.options.templates.poster.call(this), {
		classes: this.classes
		});
		}

		const html = templateEngine.render(this.options.template.call(this), {
		classes: this.classes,
		poster
		swichVideo(id) {
		this.api.loadVideoById({
		videoId: id
		});
		return html;
		}

		bind() {
		this.media.addEventListener('onStateChange', event => {
		if (event.data === 1) {
		this.instance.trigger(events.PLAY);
		} else if (event.data === 2) {
		this.instance.trigger(events.PAUSE);
		} else if (event.data === 0) {
		this.instance.trigger(events.PLAYEND);
		if (this.options.loop === true) {
		this.play();
		}
		}
		});
		this.media.addEventListener('onError', () => {
		this.instance.trigger(events.PLAYERR);
		});
		}

		currentTime() {
		return this.media.getCurrentTime();
		return this.api.getCurrentTime();
		}

		duration() {
		return this.media.getDuration();
		return this.api.getDuration();
		}

		setCurrentTime(val) {
		this.media.seekTo(val, true);
		this.api.seekTo(val, true);
		}

		volume(value) {
		this.media.setVolume(value);
		this.api.setVolume(value);
		}

		mute() {
		this.media.mute();
		this.api.mute();
		}

		unMute() {
		this.media.unMute();
		this.api.unMute();
		}

		pause() {
		this.media.pauseVideo();
		this.api.pauseVideo();
		}

		stop() {
		this.media.stopVideo();
		this.api.stopVideo();
		this.instance.trigger(events.STOP);
		@@ -690,28 +540,25 @@ }
		play() {
		this.media.playVideo();
		this.api.playVideo();
		}

		destroy() {
		const element = query('iframe', this.wrap);
		if (element) {
		element.src = '//about:blank';
		if (this.api) {
		this.api.destroy();
		}
		this.wrap.remove();

		this.$player.remove();
		}
		};

		var _dec, _dec2, _dec3, _dec4, _class;
		}

		var _dec, _dec2, _dec3, _dec4, _dec5, _class;
		const sources = {};

		let Video = (_dec = styleable(classes), _dec2 = eventable(events), _dec3 = stateable(), _dec4 = register(namespace, {
		defaults: defaults,
		let Video = (_dec = styleable(classes), _dec2 = eventable(events), _dec3 = stateable(), _dec4 = optionable(defaults, true), _dec5 = register(namespace, {
		methods: methods
		}, info), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = class Video extends Component {
		}), _dec(_class = _dec2(_class = _dec3(_class = _dec4(_class = _dec5(_class = class Video extends Component {
		constructor(element, options = {}) {
		super(namespace, element);

		this.options = deepMerge(defaults, options, this.getDataOptions());
		this.initClasses(classes);
		this.initStates();
		super(element);
		this.setupOptions(options);
		this.setupClasses();
		this.setupStates();
		this.initialize();
		@@ -721,10 +568,40 @@ }
		initialize() {
		this.initVideo();
		this.initPoster();

		if (typeof sources[this.options.type] !== 'undefined') {
		this.player = new sources[this.options.type](this, this.element, this.options);
		this.player = new sources[this.options.type](this, this.$video);
		}

		this.enter('initialized');
		this.trigger(events.READY);
		this.player.init(() => {
		this.load();
		this.enter('initialized');
		this.trigger(events.READY);
		});
		}

		initVideo() {
		this.$video = this.element;
		addClass(this.classes.NAMESPACE, this.$video);

		if (this.options.theme) {
		addClass(this.getThemeClass(), this.$video);
		}
		}

		initPoster() {
		if (this.options.poster) {
		this.$poster = document.createElement('div');
		addClass(this.classes.POSTER, this.$poster);
		setStyle('background-image', `url(${this.options.poster})`, this.$poster);
		append(this.$poster, this.$video);
		}
		}

		hidePoster() {
		if (this.options.poster) {
		addClass(this.classes.POSTERHIDE, this.$poster);
		}
		}

		load() {
		@@ -738,44 +615,71 @@ if (!this.is('loaded')) {
		switchVideo(id) {
		this.player.switchVideo(id);
		if (this.is('loaded')) {
		this.player.swichVideo(id);
		}
		}

		duration() {
		return this.player.duration();
		if (this.is('loaded')) {
		return this.player.duration();
		}

		return undefined;
		}

		currentTime() {
		return this.player.currentTime();
		if (this.is('loaded')) {
		return this.player.currentTime();
		}

		return undefined;
		}

		setCurrentTime(val) {
		this.player.setCurrentTime(val);
		if (this.is('loaded')) {
		this.player.setCurrentTime(val);
		}
		}

		setSize(width, height) {
		this.player.setSize(width, height);
		this.options.width = width;
		if (this.is('loaded')) {
		this.player.setSize(width, height);
		this.options.width = width;
		this.options.height = height;
		}
		}

		play() {
		this.player.play();
		if (this.is('loaded')) {
		this.player.play();
		}
		}

		stop() {
		this.player.stop();
		if (this.is('loaded')) {
		this.player.stop();
		}
		}

		volume(val) {
		this.player.volume(val);
		if (this.is('loaded')) {
		this.player.volume(val);
		}
		}

		pause() {
		this.player.pause();
		if (this.is('loaded')) {
		this.player.pause();
		}
		}

		mute() {
		this.player.mute();
		if (this.is('loaded')) {
		this.player.mute();
		}
		}

		unMute() {
		this.player.unMute();
		if (this.is('loaded')) {
		this.player.unMute();
		}
		}
		@@ -786,7 +690,19 @@
		this.leave('initialized');
		removeClass(this.classes.NAMESPACE, this.$video);

		if (this.options.theme) {
		removeClass(this.getThemeClass(), this.$video);
		}

		if (this.options.poster) {
		this.$poster.remove();
		}

		this.player.destroy();
		}

		if (this.is('loaded')) {
		this.leave('loaded');
		this.player.destroy();
		}

		this.trigger(events.DESTROY);
		@@ -799,5 +715,10 @@ super.destroy();
		}
		}) \|\| _class) \|\| _class) \|\| _class) \|\| _class);

		static prepare(type) {
		if (typeof sources[type] !== 'undefined' && 'prepare' in sources[type]) {
		sources[type].prepare();
		}
		}

		}) \|\| _class) \|\| _class) \|\| _class) \|\| _class) \|\| _class);
		Video.registerSource('youtube', Youtube);
		@@ -804,0 +725,0 @@ Video.registerSource('vimeo', Vimeo);

111

package.json

		{
		"name": "@pluginjs/video",
		"main": "dist/video.js",
		"dependencies": {
		"@pluginjs/classes": "^0.0.3",
		"@pluginjs/component": "^0.2.22",
		"@pluginjs/dom": "^0.0.13",
		"@pluginjs/events": "^0.0.3",
		"@pluginjs/is": "^0.2.19",
		"@pluginjs/pluginjs": "^0.2.25",
		"@pluginjs/styled": "^0.0.3",
		"@pluginjs/template": "^0.2.19"
		},
		"version": "0.2.18",
		"description": "A flexible modern video js plugin.",
		"author": "Creation Studio Limited",
		"homepage": "https://github.com/pluginjs/plugin.js",
		"license": "GPL-v3",
		"files": [
		"dist",
		"src"
		],
		"repository": {
		"url": "git@github.com:pluginjs/plugin.js.git",
		"type": "git"
		},
		"bugs": {
		"url": "https://github.com/pluginjs/plugin.js/issues"
		},
		"engines": {
		"node": ">= 8",
		"npm": ">= 5"
		},
		"category": "media",
		"min": "dist/video.min.js",
		"standalone": "dist/video.standalone.js",
		"module": "dist/video.esm.js",
		"dev-main": "src/main.js"
		"name": "@pluginjs/video",
		"description": "A flexible modern video js plugin.",
		"license": "GPL-3.0",
		"author": "Creation Studio Limited",
		"homepage": "https://github.com/pluginjs/pluginjs",
		"repository": {
		"url": "git@github.com:pluginjs/pluginjs.git",
		"type": "git"
		},
		"bugs": {
		"url": "https://github.com/pluginjs/pluginjs/issues"
		},
		"version": "0.6.1",
		"category": "media",
		"main": "dist/video.umd.js",
		"module": "dist/video.esm.js",
		"source": "src/main.js",
		"css": {
		"source": "src/css/video.scss",
		"main": "dist/video.css",
		"min": "dist/video.min.css"
		},
		"files": [
		"dist",
		"src"
		],
		"scripts": {
		"build": "npm run build:js && npm run build:scss",
		"build:js": "plugin script build-js",
		"build:md": "plugin script build-md",
		"build:scss": "plugin script build-scss",
		"lint": "npm run lint:js && npm run lint:scss",
		"lint:js": "eslint ./src/*/.js --fix",
		"lint:scss": "stylelint ./src/*/.scss --fix",
		"test": "jest"
		},
		"dependencies": {
		"@pluginjs/classes": "^0.6.1",
		"@pluginjs/component": "^0.6.1",
		"@pluginjs/decorator": "^0.6.1",
		"@pluginjs/dom": "^0.6.1",
		"@pluginjs/factory": "^0.6.1",
		"@pluginjs/is": "^0.6.1",
		"@pluginjs/styled": "^0.6.1",
		"@pluginjs/utils": "^0.6.1"
		},
		"devDependencies": {
		"@babel/core": "^7.1.2",
		"@pluginjs/browserslist-config": "^1.1.1",
		"@pluginjs/cli": "^0.6.1",
		"babel-jest": "*",
		"jest": "*",
		"jest-extended": "*",
		"rollup": "*",
		"rollup-plugin-babel": "*",
		"rollup-plugin-commonjs": "*",
		"rollup-plugin-node-resolve": "*"
		},
		"engines": {
		"node": ">= 8",
		"npm": ">= 5"
		},
		"jest": {
		"setupTestFrameworkScriptFile": "jest-extended",
		"verbose": true,
		"testURL": "http://localhost",
		"testPathIgnorePatterns": [
		"fixtures"
		]
		},
		"browserslist": [
		"extends @pluginjs/browserslist-config"
		],
		"gitHead": "353b9f7a27eb7306aecd38b475a479616e7db55d"
		}

133

README.md

		# Video
		> A flexible modern video js plugin.

		[![npm package](https://img.shields.io/npm/v/@pluginjs/video.svg)](https://www.npmjs.com/package/@pluginjs/video)

		A flexible modern video js plugin.

		[Samples](https://codesandbox.io/s/github/pluginjs/pluginjs/tree/master/modules/video/samples)

		## Introduction

		#### [Demo]()
		---
		### Installation

		#### NPM
		```javascript
		npm i @pluginjs/video
		```
		#### Yarn

		```javascript
		@@ -18,49 +19,66 @@ yarn add @pluginjs/video

		### Dependencies
		- jQuery
		- @pluginjs/pluginjs
		#### NPM

		---

		## Getting Started
		### Include
		Webpack && Rollup:

		ECMAScript Modules
		```javascript
		import video from "@pluginjs/video"
		npm i @pluginjs/video
		```

		CommonJS
		```javascript
		require("@pluginjs/video")
		```
		## Getting Started

		CDN:

		Development:

		```html
		<script src="/path/to/video.js"></script>
		<link rel="stylesheet" href="/path/to/video.css">
		<script src="https://unpkg.com/@pluginjs/video/dist/video.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/@pluginjs/video/dist/video.css">
		```

		Production:

		```html
		<script src="/path/to/video.min.js"></script>
		<link rel="stylesheet" href="/path/to/video.min.css">
		<script src="https://unpkg.com/@pluginjs/video/dist/video.min.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/@pluginjs/video/dist/video.min.css">
		```

		### Initialize

		HTML:

		```html
		<body>
		<div class="element"></div>
		</body>
		<div class="element"></div>
		```
		JS:

		ECMAScript Module:

		```javascript
		Pj.video('.element', options);
		import Video from "@pluginjs/video"
		import "@pluginjs/video/dist/video.css"

		Video.of(document.querySelector('.element'), options)
		```
		---

		CommonJS:

		```javascript
		require("@pluginjs/video/dist/video.css")
		const Video = require("@pluginjs/video")

		Video.of(document.querySelector('.element'), options)
		```

		Browser:

		```html
		<link rel="stylesheet" href="https://unpkg.com/@pluginjs/video/dist/video.css">
		<script src="https://unpkg.com/@pluginjs/video/dist/video.js"></script>
		<script>
		Pj.video('.element', options)
		</script>
		```

		## API

		### Options:
		### Options

		Options are called on video instances through the video options itself.
		@@ -70,3 +88,3 @@ You can also save the instances to variable for further use.
		Name \| Description \| Default
		-----\|--------------\|-----
		--\|--\|--
		`"template"` \| Main structure template \| `function() {...}`
		@@ -82,3 +100,4 @@ `"templates"` \| Template blocks \| `{}`

		### Events:
		### Events

		Events are called on video instances through the video events itself.
		@@ -88,3 +107,3 @@ You can also save the instances to variable for further use.
		Name \| Description
		-----\|-----
		--\|--
		`"ready"` \| Gets fired when plugin is ready
		@@ -100,4 +119,4 @@ `"destroy"` \| Gets fired when plugin is destroy

		```
		### Methods:
		### Methods

		Methods are called on video instances through the video method itself.
		@@ -107,3 +126,3 @@ You can also save the instances to variable for further use.
		Name \| Description
		-----\|-----
		--\|--
		`"enable"` \| Enabled plugin if plugin is disabled
		@@ -118,12 +137,6 @@ `"disable"` \| Disable plugin

		example:
		```javascript
		Pj.$video('.element', value)
		Pj.$video('.element', value, "foo")
		Pj.$video('.element', value, "foo", "bar")
		```
		### Classes

		### Classes:
		Name \| Description \| Default
		-----\|------\|------
		--\|\|
		`"NAMESPACE"` \| Declare plugin namespace \| `pj-video`
		@@ -133,6 +146,2 @@ `"THEME"` \| Declare plugin theme \| `{namespace}--{theme}`



		---

		## Browser support
		@@ -142,18 +151,16 @@

		\| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_32x32.png" alt="Safari"> \| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_32x32.png" alt="Chrome"> \| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_32x32.png" alt="Firefox"> \| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_32x32.png" alt="Edge"> \| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/internet-explorer/internet-explorer_32x32.png" alt="IE"> \| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_32x32.png" alt="Opera"> \|
		\|:--:\|:--:\|:--:\|:--:\|:--:\|:--:\|
		\| Latest ✓ \| Latest ✓ \| Latest ✓ \| Latest ✓ \| >=10 ✓ \| Latest ✓ \|
		\| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge \| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox \| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome \| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari \| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera \|
		\| --------- \| --------- \| --------- \| --------- \| --------- \|
		\| IE11, Edge\| last 2 versions\| last 2 versions\| last 2 versions\| last 2 versions\|

		## Contributing
		See [Contribution.md](Contribution.md).
		## License

		## Changelog
		To see the list of recent changes, see [Releases section](https://github.com/thecreaction/plugin.js/releases).
		@pluginjs/video is Licensed under [the GPL-v3 license](LICENSE).

		## Version
		Version: 0.2.16
		If you want to use @pluginjs/video project to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary.

		## Copyright and license
		Copyright (C) 2017 Creation Studio Limited.
		For purchase an Commercial License, contact us purchase@thecreation.co.

		Licensed under [the GPL-v3 license](LICENSE).
		## Copyright

		Copyright (C) 2018 [Creation Studio Limited](creationstudio.com).

src/constant.js

		@@ -11,4 +11,5 @@ export const namespace = 'video'
		STOP: 'stop',
		PLAYEND: 'playend',
		PLAYERR: 'playerr'
		ENDED: 'ended',
		ERROR: 'error',
		BUFFERING: 'buffering'
		}
		@@ -19,3 +20,4 @@
		THEME: '{namespace}--{theme}',
		POSTER: '{namespace}-poster'
		POSTER: '{namespace}-poster',
		POSTERHIDE: '{namespace}-poster-hide'
		}
		@@ -33,3 +35,3 @@
		'setSize',
		'switchVideo',
		'swichVideo',
		'duration',
		@@ -43,10 +45,4 @@ 'currentTime',
		export const defaults = {
		template() {
		return '<div class="{classes.NAMESPACE}">' + '{poster}' + '</div>'
		},
		templates: {
		poster() {
		return '<div class="{classes.POSTER}"></div>'
		}
		},
		width: '100%',
		height: '100%',
		url: '',
		@@ -60,3 +56,1 @@ id: '',
		}

		export const info = { version: '0.0.1' }

165

src/main.js

		import Component from '@pluginjs/component'
		import { deepMerge } from '@pluginjs/utils'
		import { addClass, removeClass, hasClass } from '@pluginjs/classes'
		import { setStyle, getStyle } from '@pluginjs/styled'
		import {
		prepend,
		append,
		parseHTML,
		queryAll,
		query,
		insertAfter,
		remove
		} from '@pluginjs/dom'
		import { eventable, register, stateable, styleable } from '@pluginjs/pluginjs'
		eventable,
		register,
		stateable,
		styleable,
		optionable
		} from '@pluginjs/decorator'
		import { setStyle } from '@pluginjs/styled'
		import { addClass, removeClass } from '@pluginjs/classes'
		import { append } from '@pluginjs/dom'
		import {
		@@ -19,11 +16,9 @@ classes as CLASSES,
		events as EVENTS,
		info as INFO,
		methods as METHODS,
		namespace as NAMESPACE
		} from './constant'
		import HTML5SOURCE from './source/html5'
		import VIMEOSOURCE from './source/vimeo'
		import YOUTUBESOURCE from './source/youtube'

		import HTML5API from './source/html5'
		import VIMEOAPI from './source/vimeo'
		import YOUTUBEAPI from './source/youtube'

		const sources = {}
		@@ -34,17 +29,13 @@
		@stateable()
		@register(
		NAMESPACE,
		{
		defaults: DEFAULTS,
		methods: METHODS
		},
		INFO
		)
		@optionable(DEFAULTS, true)
		@register(NAMESPACE, {
		methods: METHODS
		})
		class Video extends Component {
		constructor(element, options = {}) {
		super(NAMESPACE, element)
		super(element)

		this.options = deepMerge(DEFAULTS, options, this.getDataOptions())
		this.initClasses(CLASSES)
		this.initStates()
		this.setupOptions(options)
		this.setupClasses()
		this.setupStates()
		this.initialize()
		@@ -54,14 +45,41 @@ }
		initialize() {
		this.initVideo()
		this.initPoster()

		if (typeof sources[this.options.type] !== 'undefined') {
		this.player = new sources[this.options.type](
		this,
		this.element,
		this.options
		)
		this.player = new sources[this.options.type](this, this.$video)
		}

		this.enter('initialized')
		this.trigger(EVENTS.READY)
		this.player.init(() => {
		this.load()

		this.enter('initialized')
		this.trigger(EVENTS.READY)
		})
		}

		initVideo() {
		this.$video = this.element

		addClass(this.classes.NAMESPACE, this.$video)
		if (this.options.theme) {
		addClass(this.getThemeClass(), this.$video)
		}
		}

		initPoster() {
		if (this.options.poster) {
		this.$poster = document.createElement('div')
		addClass(this.classes.POSTER, this.$poster)
		setStyle('background-image', `url(${this.options.poster})`, this.$poster)
		append(this.$poster, this.$video)
		}
		}

		hidePoster() {
		if (this.options.poster) {
		addClass(this.classes.POSTERHIDE, this.$poster)
		}
		}

		load() {
		@@ -75,44 +93,71 @@ if (!this.is('loaded')) {
		switchVideo(id) {
		this.player.switchVideo(id)
		if (this.is('loaded')) {
		this.player.swichVideo(id)
		}
		}

		duration() {
		return this.player.duration()
		if (this.is('loaded')) {
		return this.player.duration()
		}

		return undefined
		}

		currentTime() {
		return this.player.currentTime()
		if (this.is('loaded')) {
		return this.player.currentTime()
		}

		return undefined
		}

		setCurrentTime(val) {
		this.player.setCurrentTime(val)
		if (this.is('loaded')) {
		this.player.setCurrentTime(val)
		}
		}

		setSize(width, height) {
		this.player.setSize(width, height)
		this.options.width = width
		if (this.is('loaded')) {
		this.player.setSize(width, height)
		this.options.width = width
		this.options.height = height
		}
		}

		play() {
		this.player.play()
		if (this.is('loaded')) {
		this.player.play()
		}
		}

		stop() {
		this.player.stop()
		if (this.is('loaded')) {
		this.player.stop()
		}
		}

		volume(val) {
		this.player.volume(val)
		if (this.is('loaded')) {
		this.player.volume(val)
		}
		}

		pause() {
		this.player.pause()
		if (this.is('loaded')) {
		this.player.pause()
		}
		}

		mute() {
		this.player.mute()
		if (this.is('loaded')) {
		this.player.mute()
		}
		}

		unMute() {
		this.player.unMute()
		if (this.is('loaded')) {
		this.player.unMute()
		}
		}
		@@ -123,7 +168,17 @@
		this.leave('initialized')

		removeClass(this.classes.NAMESPACE, this.$video)
		if (this.options.theme) {
		removeClass(this.getThemeClass(), this.$video)
		}
		if (this.options.poster) {
		this.$poster.remove()
		}
		this.player.destroy()
		}

		if (this.is('loaded')) {
		this.leave('loaded')
		this.player.destroy()
		}

		this.trigger(EVENTS.DESTROY)
		@@ -136,8 +191,14 @@ super.destroy()
		}

		static prepare(type) {
		if (typeof sources[type] !== 'undefined' && 'prepare' in sources[type]) {
		sources[type].prepare()
		}
		}
		}

		Video.registerSource('youtube', YOUTUBEAPI)
		Video.registerSource('vimeo', VIMEOAPI)
		Video.registerSource('html5', HTML5API)
		Video.registerSource('youtube', YOUTUBESOURCE)
		Video.registerSource('vimeo', VIMEOSOURCE)
		Video.registerSource('html5', HTML5SOURCE)

		export default Video

203

src/source/html5.js

		@@ -1,81 +0,95 @@
		import templateEngine from '@pluginjs/template'
		import is from '@pluginjs/is'
		import { isArray } from '@pluginjs/is'
		import { events as EVENTS } from '../constant'
		import { setStyle } from '@pluginjs/styled'
		import { append, parseHTML, query } from '@pluginjs/dom'
		import { append } from '@pluginjs/dom'
		import { each } from '@pluginjs/utils'

		class Html5 {
		constructor(video, element, options) {
		constructor(instance, element) {
		this.element = element
		this.options = options
		this.instance = video
		this.classes = video.classes
		this.options = Object.assign(
		{
		autoplay: false,
		controls: true,
		loop: true,
		muted: false
		},
		instance.options
		)
		this.instance = instance
		}

		init(done) {
		this.$player = document.createElement('video')

		this.$player.autoplay = this.options.autoplay
		this.$player.controls = this.options.controls
		this.$player.loop = this.options.loop
		this.$player.muted = this.options.muted

		append(this.$player, this.element)

		done()
		}

		load() {
		this.wrap = parseHTML(this.createHtml())
		append(this.wrap, this.element)
		if (this.options.poster) {
		this.poster = query(`.${this.instance.classes.POSTER}`, this.wrap)
		setStyle(
		{ 'background-image': `url(${this.options.poster})` },
		this.poster
		)
		}
		this.instance.trigger(EVENTS.LOAD)

		this.video = document.createElement('video')
		this.setDefaultParameters()
		append(this.video, this.wrap)
		this.setSources(this.options.url)

		this.instance.trigger(EVENTS.LOAD)
		this.instance.trigger(EVENTS.LOADED)
		if (this.options.poster) {
		this.poster.style.display = 'none'
		}
		this.bind()
		}

		setDefaultParameters() {
		if (is.array(this.options.url)) {
		for (let i = 0; i < this.options.url.length; i++) {
		const videoTypeArr = this.options.url[i].split('.')
		const videoType = videoTypeArr[videoTypeArr.length - 1]

		this.addSourceToVideo(this.options.url[i], videoType)
		bind() {
		this.listeners = {
		canplay: () => {
		this.instance.trigger(EVENTS.LOADED)
		this.instance.hidePoster()
		},
		play: () => {
		this.instance.trigger(EVENTS.PLAY)
		},
		pause: () => {
		this.instance.trigger(EVENTS.PAUSE)
		},
		ended: () => {
		this.instance.trigger(EVENTS.ENDED)
		},
		waiting: () => {
		this.instance.trigger(EVENTS.BUFFERING)
		},
		error: error => {
		this.instance.trigger(EVENTS.ERROR, error)
		}
		} else {
		const videoTypeArr = this.options.url.split('.')
		const videoType = videoTypeArr[videoTypeArr.length - 1]

		this.addSourceToVideo(this.options.url, videoType)
		}

		this.video.autoplay = this.options.autoplay
		this.video.controls = this.options.controls
		this.video.loop = this.options.loop
		each(this.listeners, (event, listener) => {
		this.$player.addEventListener(event, listener)
		})
		}

		createHtml() {
		let poster = ''
		unbind() {
		each(this.listeners, (event, listener) => {
		this.$player.removeEventListener(event, listener)
		})
		}

		if (this.options.poster !== '') {
		poster = templateEngine.render(this.options.templates.poster.call(this), {
		classes: this.classes
		setSources(sources) {
		if (isArray(sources)) {
		sources.forEach(source => {
		this.addSource(source)
		})
		} else {
		this.addSource(sources)
		}

		const html = templateEngine.render(this.options.template.call(this), {
		classes: this.classes,
		poster
		})
		return html
		}

		addSourceToVideo(src, type) {
		addSource(url) {
		const type = url.split('.').pop()
		const source = document.createElement('source')

		source.src = src
		source.src = url
		source.type = `video/${type}`

		append(source, this.video)
		append(source, this.$player)
		}
		@@ -89,89 +103,44 @@
		},
		this.wrap
		this.$player
		)
		}

		switchVideo(id) {
		this.video.src = id
		swichVideo(src) {
		this.pause()
		this.$player.innerHTML = ''
		this.setSources(src)
		this.$player.load()
		}

		bind() {
		this.eventListener('play')
		this.eventListener('pause')
		this.eventListener('error')
		// this.eventListener('stalled')
		}

		registerEvent(eventName, callback, element) {
		if (!this.listeners) {
		this.listeners = {}
		}

		if (!this.listeners[eventName]) {
		this.listeners[eventName] = []
		}

		this.listeners[eventName].push(callback)

		element.addEventListener(eventName, callback)
		}

		removeListener(eventName, element) {
		if (!this.listeners[eventName]) {
		console.log('not bind eventName:', eventName)
		}

		this.listeners[eventName].map(callback => {
		element.removeEventListener(eventName, callback)
		})
		}

		unbind() {
		this.removeListener('error', this.video)
		this.removeListener('play', this.video)
		this.removeListener('pause', this.video)
		}

		eventListener(eventName) {
		const capitalEvent = eventName.toUpperCase()
		this.registerEvent(
		eventName,
		() => {
		this.instance.trigger(EVENTS[capitalEvent])
		},
		this.video
		)
		}

		currentTime() {
		return this.video.currentTime
		return this.$player.currentTime
		}

		duration() {
		return this.video.duration
		return this.$player.duration
		}

		setCurrentTime(val) {
		this.video.currentTime = val
		this.$player.currentTime = val
		}

		pause() {
		this.video.pause()
		this.$player.pause()
		}

		play() {
		this.video.play()
		this.$player.play()
		}

		mute() {
		this.video.muted = true
		this.$player.muted = true
		}

		unMute() {
		this.video.muted = false
		this.$player.muted = false
		}

		stop() {
		this.video.currentTime = 0
		this.video.pause()
		this.$player.currentTime = 0
		this.$player.pause()
		this.instance.trigger(EVENTS.STOP)
		@@ -181,3 +150,3 @@ }
		volume(value) {
		this.video.volume = value / 100
		this.$player.volume = value / 100
		}
		@@ -187,7 +156,3 @@
		this.unbind()
		const element = query('video', this.wrap)
		if (element) {
		element.src = '//about:blank'
		}
		this.wrap.remove()
		this.$player.remove()
		}
		@@ -194,0 +159,0 @@ }

242

src/source/vimeo.js

		@@ -1,65 +0,76 @@
		import templateEngine from '@pluginjs/template'

		import Pj from '@pluginjs/pluginjs'
		import { events as EVENTS } from '../constant'
		import { setStyle } from '@pluginjs/styled'
		import { bindEvent, trigger } from '@pluginjs/events'
		import { append, parseHTML, query } from '@pluginjs/dom'
		import { append, query } from '@pluginjs/dom'
		import Pj from '@pluginjs/factory'

		window.AsVimeoAPIReady = false
		window.PJVIMEOAPIREADY = false

		class Vimeo {
		constructor(instance, element, options) {
		constructor(instance, element) {
		this.element = element
		this.options = options
		this.options = Object.assign(
		{
		autopause: true,
		autoplay: false,
		background: !instance.options.controls,
		byline: false,
		color: '#00adef',
		loop: true,
		muted: false,
		playsinline: true,
		portrait: false,
		speed: false,
		title: false,
		transparent: false
		},
		instance.options
		)
		this.instance = instance
		this.classes = instance.classes
		}

		load() {
		this.wrap = parseHTML(this.createHtml())
		append(this.wrap, this.element)
		if (this.options.poster) {
		this.poster = query(`.${this.instance.classes.POSTER}`, this.wrap)
		setStyle(
		{ 'background-image': `url(${this.options.poster})` },
		this.poster
		)
		}
		init(done) {
		this._duration = null
		this._currentTime = null

		if (window.AsVimeoAPIReady) {
		this.init()
		this.instance.trigger(EVENTS.LOAD)
		this.$player = document.createElement('div')
		setStyle(
		{
		width: this.options.width,
		height: this.options.height
		},
		this.$player
		)
		append(this.$player, this.element)

		if (!window.PJVIMEOAPIREADY) {
		Pj.emitter.on('video:vimeo:ready', () => {
		done()
		})

		this.constructor.prepare()
		} else {
		this.loadApi()
		bindEvent(
		{
		type: 'AsVideoVimeoAPIReady',
		handler: () => {
		this.init()
		this.instance.trigger(EVENTS.LOAD)
		}
		},
		this.element
		)
		done()
		}
		}

		init() {
		const playerSettings = {
		load() {
		this.instance.trigger(EVENTS.LOAD)

		const options = this.options
		this.api = new window.Vimeo.Player(this.$player, {
		id: this.getId(),
		loop: this.options.loop,
		autoplay: this.options.autoplay,
		// height:400,
		// url:'https://player.vimeo.com/video/76979871',
		title: false, // defaults to true
		portrait: false, // Show the user’s portrait on the video. Defaults to true.
		// maxwidth: '',
		// maxheight '',
		xhtml: false, // Make the embed code XHTML compliant. Defaults to false.
		byline: false, // Show the byline on the video. Defaults to true.
		autopause: false // Pause this video automatically when another one plays. Defaults to true.
		}
		autopause: options.autopause,
		autoplay: options.autoplay,
		background: options.background,
		byline: options.byline,
		color: options.color,
		loop: options.loop,
		muted: options.muted,
		playsinline: options.playsinline,
		portrait: options.portrait,
		speed: options.speed,
		title: options.title,
		transparent: options.transparent
		})

		this.media = new window.Vimeo.Player(this.wrap, playerSettings)
		this.bind()
		@@ -74,56 +85,56 @@ }
		}
		return undefined
		return undefined /* eslint-disable-line */
		}

		createHtml() {
		let poster = ''
		static prepare() {
		if (!window.PJVIMEOAPIREADY) {
		const script = document.createElement('script')
		script.onload = () => {
		window.PJVIMEOAPIREADY = true

		if (this.options.poster !== '') {
		poster = templateEngine.render(this.options.templates.poster.call(this), {
		classes: this.classes
		})
		Pj.emitter.emit('video:vimeo:ready')
		}

		script.src = 'https://player.vimeo.com/api/player.js'
		const firstScript = document.getElementsByTagName('script')[0]
		firstScript.parentNode.insertBefore(script, firstScript)
		}

		const html = templateEngine.render(this.options.template.call(this), {
		classes: this.classes,
		poster
		})
		return html
		}

		loadApi() {
		const tag = document.createElement('script')
		tag.src = 'https://player.vimeo.com/api/player.js'
		document.querySelector('body').appendChild(tag)

		let count = 1
		const vimeoApiReady = setInterval(() => {
		if (count > 50) {
		clearInterval(vimeoApiReady)
		console.log('loadApi error')
		this.instance.destroy()
		}
		count++
		if (typeof window.Vimeo === 'undefined') {
		return
		}
		window.AsVimeoAPIReady = true
		trigger('AsVideoVimeoAPIReady', this.element)
		clearInterval(vimeoApiReady)
		}, 350)
		}

		bind() {
		this.media.on('play', () => {
		this.api.on('play', () => {
		this.instance.trigger(EVENTS.PLAY)
		})
		this.media.on('pause', () => {
		this.api.on('pause', () => {
		this.instance.trigger(EVENTS.PAUSE)
		})
		this.media.on('loaded', () => {
		this.api.on('ended', () => {
		this.instance.trigger(EVENTS.ENDED)
		})
		this.api.on('loaded', () => {
		this.instance.trigger(EVENTS.LOADED)
		if (this.options.poster) {
		this.poster.style.display = 'none'
		this.instance.hidePoster()

		this.$iframe = query('iframe', this.$player)
		this.$iframe.setAttribute('width', '100%')
		this.$iframe.setAttribute('height', '100%')

		if (this.options.background && !this.options.muted) {
		this.volume(50)
		}

		this.api.getDuration().then(duration => {
		this._duration = duration
		})
		})

		this.api.on('timeupdate', time => {
		this._currentTime = time.seconds
		})
		this.api.on('error', error => {
		this.instance.trigger(EVENTS.ERROR, error)
		})
		this.api.on('bufferstart', () => {
		this.instance.trigger(EVENTS.BUFFERING)
		})
		}
		@@ -137,39 +148,25 @@
		},
		this.wrap
		this.$player
		)
		}

		switchVideo(id) {
		this.media.loadVideo(id)
		swichVideo(id) {
		this.api.loadVideo(id)
		}

		_currentTime() {
		this.media.getCurrentTime().then(seconds => {
		this.options.currentTime = seconds
		})
		}

		currentTime() {
		this._currentTime()
		return this.options.currentTime
		return this._currentTime
		}

		_duration() {
		return this.media.getDuration().then(duration => {
		this.options.duration = duration
		})
		}

		duration() {
		this._duration()
		return this.options.duration
		return this._duration
		}

		setCurrentTime(val) {
		this.media.setCurrentTime(val)
		this.api.setCurrentTime(val)
		}

		stop() {
		this.media.setCurrentTime(0)
		this.media.pause()
		this.api.setCurrentTime(0)
		this.api.pause()
		this.instance.trigger(EVENTS.STOP)
		@@ -179,2 +176,5 @@ }
		mute() {
		this.api.getVolume().then(volume => {
		this._preVolume = volume
		})
		this.volume(0)
		@@ -184,24 +184,28 @@ }
		unMute() {
		this.volume(50)
		if (this._preVolume) {
		this.api.setVolume(this._preVolume)
		}
		}

		pause() {
		this.media.pause()
		this.instance.trigger('pause')
		this.api.pause()
		}

		volume(value) {
		this.media.setVolume(value / 100)
		if (typeof value === 'undefined') {
		return this.api.getVolume()
		}
		return this.api.setVolume(value / 100)
		}

		play() {
		this.media.play()
		this.api.play()
		}

		destroy() {
		const element = query('iframe', this.wrap)
		if (element) {
		element.src = '//about:blank'
		if (this.api) {
		this.api.destroy()
		}
		this.wrap.remove()

		this.$player.remove()
		}
		@@ -208,0 +212,0 @@ }

223

src/source/youtube.js

		@@ -1,86 +0,94 @@
		import templateEngine from '@pluginjs/template'

		/* eslint-disable camelcase */
		import { events as EVENTS } from '../constant'
		import { setStyle } from '@pluginjs/styled'
		import { append, parseHTML, query } from '@pluginjs/dom'
		import { append } from '@pluginjs/dom'
		import Pj from '@pluginjs/factory'

		window.AsYTAPIReady = false
		window.PJYTAPIREADY = false

		class Youtube {
		constructor(instance, element, options) {
		constructor(instance, element) {
		this.element = element
		this.options = options
		this.options = Object.assign(
		{
		autoplay: true,
		controls: false,
		muted: false,
		disablekb: false,
		fs: false,
		iv_load_policy: true,
		loop: true,
		modestbranding: false,
		playsinline: true,
		rel: false,
		showinfo: false
		},
		instance.options
		)
		this.instance = instance
		this.classes = instance.classes
		}

		load() {
		this.wrap = parseHTML(this.createHtml())
		append(this.wrap, this.element)
		if (this.options.poster) {
		this.poster = query(`.${this.instance.classes.POSTER}`, this.wrap)
		setStyle(
		{ 'background-image': `url(${this.options.poster})` },
		this.poster
		)
		}
		init(done) {
		this.$player = document.createElement('div')
		append(this.$player, this.element)

		if (window.AsYTAPIReady) {
		this.init()
		this.instance.trigger(EVENTS.LOAD)
		if (!window.PJYTAPIREADY) {
		Pj.emitter.on('video:youtube:ready', () => {
		done()
		})

		this.constructor.prepare()
		} else {
		this.loadApi()
		done()
		}
		}

		init() {
		this.iframe = document.createElement('div')
		append(this.iframe, this.wrap)

		this.setdefault()

		const playerSettings = {
		volume: 0, // 0 - 100
		autohide: 0, // autohide controls
		autoplay: this.options.autoplay, // autoplay on load
		color: 'red', // red, white
		controls: this.options.controls, // show control UI
		disablekb: 0, // enable/disable keyboard control
		enablejsapi: 1,
		fs: 0, // display fullscreen button
		hl: null, // interface language
		// iv_load_policy: 3,
		loop: 1, // loop video flag (doesn't work properly)
		modestbranding: 1, // show/hide youtube logo
		playsinline: 0,
		rel: 0, // shows relative videos
		showinfo: 0,
		start: 0, // set beginning of the video
		end: 0, // set end of the video
		quality: 'default' // small, medium, large, hd720, hd1080, highres or default
		}

		this.media = new YT.Player(this.iframe, {
		load() {
		this.instance.trigger(EVENTS.LOAD)
		const options = this.options
		this.api = new window.YT.Player(this.$player, {
		videoId: this.getId(),
		mute: true,
		repeat: true,
		playButtonClass: 'YTPlayer-play',
		pauseButtonClass: 'YTPlayer-pause',
		muteButtonClass: 'YTPlayer-mute',
		volumeUpClass: 'YTPlayer-volume-up',
		volumeDownClass: 'YTPlayer-volume-down',
		start: 0,
		pauseOnScroll: false,
		fitToBackground: true,
		playerVars: playerSettings,
		width: options.width,
		height: options.height,
		playerVars: {
		autoplay: options.autoplay ? 1 : 0,
		cc_load_policy: options.cc_load_policy ? 1 : 0,
		controls: options.controls ? 2 : 0,
		disablekb: options.keyboard ? 0 : 1,
		enablejsapi: 0,
		fs: options.fullscreen ? 1 : 0,
		iv_load_policy: options.iv_load_policy ? 1 : 3,
		loop: options.loop ? 0 : 1,
		modestbranding: options.modestbranding ? 1 : 0,
		origin: window.location.origin,
		playsinline: options.playsinline ? 1 : 0,
		rel: options.rel ? 1 : 0,
		showinfo: options.showinfo ? 1 : 0,
		wmode: 'opaque'
		},
		events: {
		onReady: () => {
		this.instance.trigger(EVENTS.LOADED)
		if (this.options.poster) {
		this.poster.style.display = 'none'
		this.instance.hidePoster()

		if (options.muted) {
		this.api.mute()
		}
		},
		onStateChange: event => {
		if (event.data === 1) {
		this.instance.trigger(EVENTS.PLAY)
		} else if (event.data === 2) {
		this.instance.trigger(EVENTS.PAUSE)
		} else if (event.data === 0) {
		this.instance.trigger(EVENTS.ENDED)
		} else if (event.data === 3) {
		this.instance.trigger(EVENTS.BUFFERING)
		}
		},
		onError: error => {
		this.instance.trigger(EVENTS.ERROR, error)
		}
		}
		})
		this.bind()
		}
		@@ -94,23 +102,18 @@
		}
		return undefined
		return undefined /* eslint-disable-line */
		}

		loadApi() {
		static prepare() {
		window.onYouTubeIframeAPIReady = () => {
		this.init()
		window.AsYTAPIReady = true
		this.instance.trigger(EVENTS.LOAD)
		window.PJYTAPIREADY = true

		Pj.emitter.emit('video:youtube:ready')
		}

		const tag = document.createElement('script')
		tag.src = 'https://www.youtube.com/iframe_api'
		const firstScriptTag = document.getElementsByTagName('script')[0]
		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
		const script = document.createElement('script')
		script.src = 'https://www.youtube.com/iframe_api'
		const firstScript = document.getElementsByTagName('script')[0]
		firstScript.parentNode.insertBefore(script, firstScript)
		}

		setdefault() {
		this.options.autoplay = this.options.autoplay ? 1 : 0
		this.options.controls = this.options.controls ? 1 : 0
		}

		setSize(width, height) {
		@@ -122,74 +125,40 @@ setStyle(
		},
		this.wrap
		this.element
		)
		}

		switchVideo(id) {
		this.media.loadVideoById({ videoId: id })
		swichVideo(id) {
		this.api.loadVideoById({ videoId: id })
		}

		createHtml() {
		let poster = ''

		if (this.options.poster !== '') {
		poster = templateEngine.render(this.options.templates.poster.call(this), {
		classes: this.classes
		})
		}

		const html = templateEngine.render(this.options.template.call(this), {
		classes: this.classes,
		poster
		})
		return html
		}

		bind() {
		this.media.addEventListener('onStateChange', event => {
		if (event.data === 1) {
		this.instance.trigger(EVENTS.PLAY)
		} else if (event.data === 2) {
		this.instance.trigger(EVENTS.PAUSE)
		} else if (event.data === 0) {
		this.instance.trigger(EVENTS.PLAYEND)
		if (this.options.loop === true) {
		this.play()
		}
		}
		})
		this.media.addEventListener('onError', () => {
		this.instance.trigger(EVENTS.PLAYERR)
		})
		}

		currentTime() {
		return this.media.getCurrentTime()
		return this.api.getCurrentTime()
		}

		duration() {
		return this.media.getDuration()
		return this.api.getDuration()
		}

		setCurrentTime(val) {
		this.media.seekTo(val, true)
		this.api.seekTo(val, true)
		}

		volume(value) {
		this.media.setVolume(value)
		this.api.setVolume(value)
		}

		mute() {
		this.media.mute()
		this.api.mute()
		}

		unMute() {
		this.media.unMute()
		this.api.unMute()
		}

		pause() {
		this.media.pauseVideo()
		this.api.pauseVideo()
		}

		stop() {
		this.media.stopVideo()
		this.api.stopVideo()
		this.instance.trigger(EVENTS.STOP)
		@@ -199,11 +168,11 @@ }
		play() {
		this.media.playVideo()
		this.api.playVideo()
		}

		destroy() {
		const element = query('iframe', this.wrap)
		if (element) {
		element.src = '//about:blank'
		if (this.api) {
		this.api.destroy()
		}
		this.wrap.remove()

		this.$player.remove()
		}
		@@ -210,0 +179,0 @@ }

dist/video.js

dist/video.min.js

dist/video.standalone.js

src/assets/bigpic.jpeg

src/assets/towers.mp4

src/html/video.hbs

dist/video.css

Sorry, the diff of this file is not supported yet

dist/video.min.css

Sorry, the diff of this file is not supported yet

src/css/video.scss

Sorry, the diff of this file is not supported yet

@pluginjs/video - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics

Dependency changes