JSFiddle - React, Tailwind, and code Playground
by Tân Nguyễn
HTML
<table width=300 height=300>
<tr width=300 height=50>
</tr>
<tr width=300 height=50>
</tr>
<tr width=300 height=50>
</tr>
<tr width=300 height=50>
</tr>
<tr width=300 height=50>
</tr>
<tr width=300 height=50>
</tr>
</table>
<button onclick="q = setInterval(vanish, 1);" style="width: 100px; background-color: navy; color: white">Toggle</button>
CSS
button {
background-color: lightblue;
width: 50px;
height: 50px;
border-width: 1px;
border-color: black;
}
table, td, tr {
padding: 0px;
margin: 0px;
border-spacing: 0px;
}
JavaScript
(function (global, factory) {
// make Video object global
global['Video'] = factory(global);
}(typeof window !== 'undefined' ? window : this, function (global) {
let Video = (function () {
let __video = null;
let __data = {};
__data.getVideo = function (...args) {
if (args.length) {
throw new Error(`No overload for method 'getVIdeo' takes ${args.length} arguments`);
}
return __video;
}
class Video {
constructor(selector) {
if (typeof selector === 'string' && selector.length) {
// trying to find video via id
__video = global.document.getElementById(selector);
if (!__video) {
throw new Error(`Cannot find video with id '${selector}'`);
}
} else if (selector instanceof global.HTMLElement && selector.tagName === 'VIDEO') {
//
__video = selector;
} else {
throw new Error(`Video element or video id is required`);
}
}
set getVideo(value) {
return __data.getVideo;
}
get getVideo() {
return (...args) => __data.getVideo.call(this, ...args);
}
}
return Video;
}());
return Video;
}));
var v = new Video('foo');
console.log(v.getVideo(123));