npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

kihon

v0.1.0

Published

A Bundle of Lite components which provides straightforward Interactive UI

Downloads

31

Readme

kihon

npm version

kihon is a Bundle of Lite components which provide straightforward Interactive UI.

About

  • Dependency to jQuery 3.x.x
  • Support ES2015+ (can also be used directly in the browser)
  • Support Webpack Tree Shaking

Thanks to whoever use kihon.

Install

npm install kihon --save-dev  

Components

Emitter (dependency to RxJS)
FullSizeBg
FullSizeVideo
HorizontalScrollingNavi (dependency to Dragdealer.js)
ImageLoader
Navi
NaviHasTimer
Overlay
Modal
YoutubeModal
Video

Getting Started

In Node.js environment :

will update soon.

In Browser environment :

import Kihon from 'kihon'; // Import all components
import FullSizeBg from 'kihon/FullSizeBg' // Import single component. You can use tree-shaking. (https://webpack.js.org/guides/tree-shaking/)

Examples

Emitter

import Emitter from 'kihon/Emitter';

var emitter = new Emitter();

var subscribeHello = emitter.listen('hello', function(data) {
    console.log('hello :', data);
});

var subscribeWorld_1 = emitter.listen('world', function(data) {
        console.log('world_1 :', data);
    }),
    subscribeWorld_2 = emitter.listen('world', function(data) {
        console.log('world_2 :', data);
    });

// Unsubscribe subscriptions.
// subscribeHello.unsubscribe();
// subscribeWorld_1.unsubscribe();
// subscribeWorld_2.unsubscribe();

emitter.emit('hello', { value: 1 });
emitter.emit('world', { value: 99 });

/*
 * Emitter public methods
 */
// set event, event handler
// emitter.listen(event name, event handler);

// emii event
// emitter.emit(event name, data)

// dispose of all subscriptions
// emitter.dispose();

FullSizeBg

<div class="wrap-full-size-bg"> <!-- can rename class you want -->
    <div class="full-size-bg"> <!-- can rename class you want -->
        <img src="https://images.unsplash.com/photo-1474496517593-015d8b59450d?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=49563d997d36faad03833ddab8d15c0a" alt="">
    </div>
</div>
html, body {margin: 0; padding: 0;}
.wrap-full-size-bg {position: relative; overflow: hidden; background: #333;}
.full-size-bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
import FullSizeBg from 'kihon/FullSizeBg';

var fullSizeBg = new FullSizeBg({
    wrap: $('.wrap-full-size-bg'), // wrap
    imgWrap: $('.full-size-bg'), // image wrap
    imgWidth: 4592, // natural image width
    imgHeight: 3064, // natural image height
    alignX: 'center', // 'left' or 'center' or 'right'
    alignY: 'center' // 'top' or 'center' or 'bottom'
}).init();

/*
 * FullSizeBg public methods
 */
// set resize event handler
// fullSizeBg.setResizeEventHandler(true / false);

// resize
// fullSizeBg.resize();

// get image size based on aspect fill calculation
// console.log( fullSizeBg.getImageSizeAspectFill(srcWidth, srcHeight) );

// destroy
// fullSizeBg.destroy();

FullSizeVideo

<div class="wrap-full-size-video"> <!-- can rename class you want -->
    <div class="wrap-video"></div> <!-- can rename class you want -->
</div>
html, body {margin: 0; padding: 0;}
.wrap-full-size-video {position: relative; overflow: hidden; background: #333;}
.wrap-video {position: absolute;}
.wrap-video video {position: absolute; top: 0; left: 0;}
import FullSizeVideo from 'kihon/FullSizeVideo';

var fullSizeVideo = new FullSizeVideo({
    outerWrap: $('.wrap-full-size-video'), // outer wrap
    wrap: $('.wrap-video'), // video wrap
    videoUrls: ['https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4', 'https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv'], // video sources
    videoWidth: 640, // video width
    videoHeight: 360, // video height
    alignX: 'center', // left, center, right
    alignY: 'center', // top, center, bottom
    isAutoPlay: false, // auto play flag
    isLoop: false, // loop flag
    isMuted: false, // mute flag
    canplayCallback: function (obj) { // {event}
        console.log('Kihon.FullSizeVideo canplayCallback obj :', obj);
    },
    timeupdateCallback: function (obj) { // {event, currentTime, duration}
        console.log('Kihon.FullSizeVideo timeupdateCallback obj :', obj);
    },
    endedCallback: function (obj) { // {event, currentTime, duration}
        console.log('Kihon.FullSizeVideo endedCallback obj :', obj);
    }
}).init();

setTimeout(function () {
    fullSizeVideo.play();
}, 2000);

setTimeout(function () {
    fullSizeVideo.pause();
}, 5000);

setTimeout(function () {
    fullSizeVideo.seek(5).play();
}, 8000);

/*
 * FullSizeVideo public methods
 */
// get video node
// console.log( fullSizeVideo.getVideoNode() );

// get video size based on aspect fill calculation
// console.log( fullSizeVideo.getVideoSizeAspectFill(srcWidth, srcHeight) );

// get volume (0 ~ 1)
// console.log( fullSizeVideo.getVolume() );

// set volume
// console.log( fullSizeVideo.setVolume(0 ~ 1) );

// play video
// fullSizeVideo.play();

// pause video
// fullSizeVideo.pause();

// stop video
// fullSizeVideo.stop();

// seek video
// fullSizeVideo.seek(second);

// set resize event handler
// fullSizeVideo.setResizeEventHandler(true / false);

// resize
// fullSizeVideo.resize();

// destroy
// fullSizeVideo.destroy();

HorizontalScrollingNavi

<div class="scrolling-navi"> <!-- can rename class you want -->
    <div class="handle"> <!-- can rename class you want -->
        <ul class="btns"> <!-- can rename class you want -->
            <li><a href="#">kihon:</a></li>
            <li><a href="#">Thanks</a></li>
            <li><a href="#">to</a></li>
            <li><a href="#">whoever</a></li>
            <li><a href="#">use</a></li>
            <li><a href="#">kihon.</a></li>
            <li><a href="#">This</a></li>
            <li><a href="#">is</a></li>
            <li><a href="#">HorizontalScrollingNavi</a></li>
        </ul>
    </div>
</div>
html, body {margin: 0; padding: 0; width: 100%;}
.scrolling-navi {position: relative; width: 100%; height: 50px; overflow: hidden; background-color: #CFD8DC;}
.scrolling-navi .handle {position: absolute; top: 0; left: 0;}
.scrolling-navi .btns {display: block; position: relative; margin: 0; padding: 0; font-size: 0; white-space: nowrap;}
.scrolling-navi .btns:after {content: ""; display: block; clear: both;}
.scrolling-navi .btns li {display: inline-block; height: 50px; line-height: 50px;}
.scrolling-navi .btns li a {display: block; margin-left: 0; margin-right: 0; padding-left: 8px; padding-right: 8px; font-size: 15px; font-weight: bold;text-align: center; text-decoration: none; }
.scrolling-navi .btns li a.on {color: #FF5252;}
import HorizontalScrollingNavi from 'kihon/HorizontalScrollingNavi';

// set HorizontalScrollingNavi extends Navi
var wrap = $('.scrolling-navi');

var navi = new HorizontalScrollingNavi({
    /*
     * Kihon.Navi options
     */
    btns: $('.btns li a', wrap), // navi buttons
    mouseoverCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.HorizontalScrollingNavi mouseoverCallback :', obj);
    },
    mouseoutCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.HorizontalScrollingNavi mouseoutCallback :', obj);
    },
    mousedownCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.HorizontalScrollingNavi mousedownCallback :', obj);
    },
    mouseupCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.HorizontalScrollingNavi mouseupCallback:', obj);
    },
    clickCallback: function (obj) { // {event, btn, prevActivatedIndex, index}
        console.log('Kihon.HorizontalScrollingNavi clickCallback :', obj);
    },
    activateCallback: function (obj) { // {prevActivatedIndex, index}
        console.log('Kihon.HorizontalScrollingNavi activateCallback :', obj);

        var btns = $(navi.getBtns()),
            btn = $(navi.getBtn(obj.index));

        btns.removeClass('on');
        btn.addClass('on');
    },

    /*
     * Kihon.HorizontalScrollingNavi options
     */
    wrap: wrap, // wrap
    handleClass: 'handle', // handle class
    speed: 0.25, // how fast the handle will slide to position after you mouse up (0 ~ 1)
    positionedCallback: function(x, y) {
        // called when releasing handle or calling setX / setRatioX method, with the projected x, y position of the handle. projected value means the value the slider will have after finishing a sliding animation
        console.log('Kihon.HorizontalScrollingNavi positionedCallback :', x, navi.getOffsetRatioByPosition(x));
    },
    dragStartCallback: function (x, y) {
        // called at the beginning of a drag with handle initial x, y values.
        console.log('Kihon.HorizontalScrollingNavi dragStartCallback :', x, y);
    },
    dragStopCallback: function (x, y) {
        // same as callback(x, y) but only called after a drag, not after call setX / setRatioX method.
        console.log('Kihon.HorizontalScrollingNavi dragStopCallback :', x, y);
    },
    animationCallback: function(x, y) {
        // called every animation loop, as long as the handle is being dragged or in the process of a sliding animation.
        console.log('Kihon.HorizontalScrollingNavi animationCallback :', x, y);
    }
}).init();

/*
 * HorizontalScrollingNavi public methods
 */
// get all buttons
// console.log( navi.getBtns() );

// get one button. (1st button's index is 1.)
// console.log( navi.getBtn(button index) );

// get activated button index
// console.log( navi.getActivatedIndex() );

// activate one button, and deactivate other buttons. (1st button's index is 1.)
// navi.activate(button index);

// set buttons event handler
// navi.setBtnsEventHandler(true / false);

// get navi handle position ratio x (0 ~ 1)
// console.log( navi.getRatioX() );

// get offset ratio by position
// console.log( navi.getOffsetRatioByPosition(-99) );

// get handle node
// console.log( navi.getHandle() );

// set navi handle position by x
// navi.setX(-99);

// set navi handle position by ratio x (0 ~ 1)
// navi.setRatioX(0.75);

// get flag navi is draggbale
// console.log( navi.isDraggable() );

// enable dragging
// navi.enable();

// disable dragging
// navi.disable();

// set resize event handler
// navi.setResizeEventHandler(true / false);

// resize
// navi.resize();

// destroy
// navi.destroy();

ImageLoader

import ImageLoader from 'kihon/ImageLoader';

var imgLoader = new ImageLoader({
    loadCompleteCallback: function (obj) { // data about all images. {imgs, percentage}
        console.log('Kihon.ImageLoader loadComplete :', obj);
        console.log('Kihon.ImageLoader loadComplete - imgLoader.isFinished() :', imgLoader.isFinished());
        console.log('Kihon.ImageLoader loadComplete - imgLoader.getLoadedImgs() :', imgLoader.getLoadedImgs());
    },
    loadPerCompleteCallback: function (obj) { // data about per image. {event, img, percentage}
        console.log('Kihon.ImageLoader loadPerComplete :', obj);
        console.log('Kihon.ImageLoader loadPerComplete - imgLoader.isFinished() :', imgLoader.isFinished());
        console.log('Kihon.ImageLoader loadPerComplete - imgLoader.getLoadedImgs() :', imgLoader.getLoadedImgs());
    },
    loadErrorCallback: function (obj) { // data about per error. {event, img, percentage}
        console.log('Kihon.ImageLoader loadError :', obj);
        console.log('Kihon.ImageLoader loadError - imgLoader.isFinished() :', imgLoader.isFinished());
        console.log('Kihon.ImageLoader loadError - imgLoader.getLoadedImgs() :', imgLoader.getLoadedImgs());
    }
});

imgLoader.start([
    'https://images.unsplash.com/photo-1431794062232-2a99a5431c6c?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=767&h=511&q=80&cs=tinysrgb',
    'https://images.unsplash.com/error-dummy-url.png',
    'https://images.unsplash.com/photo-1459666644539-a9755287d6b0?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=767&h=463&q=80&cs=tinysrgb'
]);

/*
 * ImageLoader public methods
 */
// get flag finish load all images
// console.log( imgLoader.isFinished() );

// get array has loaded images
// console.log( imgLoader.getLoadedImgs() );

// get percentage number(0 ~ 1)
// console.log( imgLoader.getPercentageLoaded() );

// destroy
// imgLoader.destroy();

Modal

.modal-wrap {position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.modal {position: relative; display: block; margin: 0 auto; top: 50%; width: 250px; height: 250px; background-color: #CFD8DC; color: #FFFFFF; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.btn-close {position: absolute; top: 0; right: 0; background-color: #FF5252;}
import Modal from 'kihon/Modal';
// import Overlay from 'kihon/Overlay';

var modal = new Modal({
    wrapClass: 'modal-wrap', // modal wrap class
    contents: '<div class="modal"><p>Kihon.Modal<br>Thanks to whoever use <a href="https://github.com/dragmove/kihon">kihon</a>.</p><a href="#" class="btn-close">close</a></div>', // modal contents html
    // appendTo: $('body'), // element to append modal wrap
    // closeBtnSelector: '.btn-close', // jQuery selector of close button
    // isCloseByClickOutside: true, // hide modal when click outside of modal contents
    // isCloseByEscKey: true, // hide modal when keydown escape key
    showCallback: function () { // call just before show modal
        console.log('Kihon.Modal showCallback :', this);
    },
    hideCallback: function () { // call just before hide modal
        console.log('Kihon.Modal hideCallback :', this);
    },
    // overlay: new Overlay().init()
}).init();

modal.show();

/*
 * Modal public methods
 */
// set close button event handler
// modal.setCloseBtnEventHandler(true / false);

// set modal wrap event handler
// modal.setWrapEventHandler(true / false);

// set escape key event handler
// modal.setEscKeyEventHandler(true / false);

// get modal node
// console.log( modal.getNode() );

// append to other element
// modal.appendTo(parent element);

// show modal
// modal.show();

// hide modal
// modal.hide();

// get flag modal is hide
// console.log( modal.isShow() );

// destroy
// modal.destroy();
// modal.destroy({isRemoveNode: true, isRemoveOverlay: true});

Navi

<ul class="navi">
    <li><a href="#">kihon:</a></li>
    <li><a href="#">Thanks</a></li>
    <li><a href="#">to</a></li>
    <li><a href="#">whoever</a></li>
    <li><a href="#">use</a></li>
    <li><a href="#">kihon.</a></li>
</ul>
.navi {width: 75px; background-color: #CFD8DC;}
.navi li a.on {color: #FF5252;}
import Navi from 'kihon/Navi';

var navi = new Navi({
    btns: $('.navi li a'), // navi buttons
    mouseoverCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.Navi mouseoverCallback :', obj);
    },
    mouseoutCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.Navi mouseoutCallback :', obj);
    },
    mousedownCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.Navi mousedownCallback :', obj);
    },
    mouseupCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.Navi mouseupCallback:', obj);
    },
    clickCallback: function (obj) { // {event, btn, prevActivatedIndex, index}
        console.log('Kihon.Navi clickCallback :', obj);
    },
    activateCallback: function (obj) { // {prevActivatedIndex, index}
        console.log('Kihon.Navi activateCallback :', obj);

        var btns = $(navi.getBtns()),
            btn = $(navi.getBtn(obj.index));

        btns.removeClass('on');
        btn.addClass('on');
    }
}).init();

/*
 * Navi public methods
 */
// get all buttons
// console.log( navi.getBtns() );

// get one button. (1st button's index is 1.)
// console.log( navi.getBtn(button index) );

// get activated button index
// console.log( navi.getActivatedIndex() );

// activate one button, and deactivate other buttons. (1st button's index is 1.)
// navi.activate(button index);

// set buttons event handler
// navi.setBtnsEventHandler(true / false);

// destroy
// navi.destroy();

NaviHasTimer

<ul class="navi">
    <li><a href="#">kihon:</a></li>
    <li><a href="#">Thanks</a></li>
    <li><a href="#">to</a></li>
    <li><a href="#">whoever</a></li>
    <li><a href="#">use</a></li>
    <li><a href="#">kihon.</a></li>
</ul>
.navi {width: 75px; background-color: #CFD8DC;}
.navi li a.on {color: #FF5252;}
import NaviHasTimer from 'kihon/NaviHasTimer';

var navi = new NaviHasTimer({
    btns: $('.navi li a'), // navi buttons
    mouseoverCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.NaviHasTimer mouseoverCallback :', obj);

        activateBtn(obj.index);
    },
    mouseoutCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.NaviHasTimer mouseoutCallback :', obj);
    },
    mousedownCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.NaviHasTimer mousedownCallback :', obj);
    },
    mouseupCallback: function (obj) { // {event, btn, index}
        console.log('Kihon.NaviHasTimer mouseupCallback:', obj);
    },
    clickCallback: function (obj) { // {event, btn, prevActivatedIndex, index}
        console.log('Kihon.NaviHasTimer clickCallback :', obj);
    },
    activateCallback: function (obj) { // {prevActivatedIndex, index}
        console.log('Kihon.NaviHasTimer activateCallback :', obj);

        activateBtn(obj.index);
    },
    timerInterval: 1000 // after mouseout navi, interval to set activated button index
}).init();

function activateBtn(index) {
    var btns = $(navi.getBtns()),
        btn = $(navi.getBtn(index));

    btns.removeClass('on');
    btn.addClass('on');
}

/*
 * NaviHasTimer public methods
 */
// get all buttons
// console.log( navi.getBtns() );

// get one button. (1st button's index is 1.)
// console.log( navi.getBtn(button index) );

// get activated button index
// console.log( navi.getActivatedIndex() );

// activate one button, and deactivate other buttons. (1st button's index is 1.)
// navi.activate(button index);

// set buttons event handler
// navi.setBtnsEventHandler(true / false);

// destroy
// navi.destroy();

Overlay

import Overlay from 'kihon/Overlay';

var overlay = new Overlay({
    // class: 'overlay', // overlay class
    // color: '#000', // background color
    // opacity: 0.5, // opacity (0 ~ 1)
    // appendTo: $('body'), // element to append overlay
    clickCallback: function (evt) { // call when click overlay
        console.log('Kihon.Overlay clickCallback :', evt);
    }
}).init();

overlay.show();

/*
 * Overlay public methods
 */
// set node event handler
// overlay.setNodeEventHandler(true / false);

// get node
// console.log(overlay.getNode());

// set css
// overlay.setCss({'background-color': '#f00', ...});

// append to other element
// overlay.appendTo(parent element);

// show overlay
// overlay.show();

// hide overlay
// overlay.hide();

// destroy
// overlay.destroy();
// overlay.destroy({isRemoveNode: true});

YoutubeModal

.modal-wrap {position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.modal {position: relative; display: block; margin: 0 auto; top: 50%; width: 100%; max-width: 640px; background-color: #CFD8DC; color: #FFFFFF; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.btn-close {position: absolute; top: 0; right: 0; background-color: #FF5252;}
.embed-responsive-video {position: relative; padding-top: 56.25%; /* 16:9 ratio */ background-color: #CFD8DC;}
.embed-responsive-video .iframe-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}
import YoutubeModal from 'kihon/YoutubeModal';
// import Overlay from 'kihon/Overlay';

var youtubeModal = new YoutubeModal({
    wrapClass: 'modal-wrap', // modal wrap class
    contents: '<div class="modal"><div class="embed-responsive-video"><div class="iframe-wrap"></div></div><a href="#" class="btn-close">close</a></div>', // modal contents html
    // appendTo: $('body'), // element to append modal wrap
    // closeBtnSelector: '.btn-close', // jQuery selector of close button
    // isCloseByClickOutside: true, // hide modal when click outside of modal contents
    // isCloseByEscKey: true, // hide modal when keydown escape key
    showCallback: function () { // call just before show modal
        console.log('Kihon.YoutubeModal showCallback :', this);
    },
    hideCallback: function () { // call just before hide modal
        console.log('Kihon.YoutubeModal hideCallback :', this);
    },
    // overlay: new Overlay().init(),
    iFrameWrapSelector: '.iframe-wrap', // youtube iframe wrap selector
    youtube: { // youtube player info
        id: 'YzKLbB5B0tg',
        width: '',
        height: '',
        playerVars: {
            // https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters
            autoplay: 1,
            rel: 0
        }
    }
}).init();

youtubeModal.show();

/*
 * YoutubeModal public methods
 */
// set close button event handler
// youtubeModal.setCloseBtnEventHandler(true / false);

// set modal wrap event handler
// youtubeModal.setWrapEventHandler(true / false);

// set escape key event handler
// youtubeModal.setEscKeyEventHandler(true / false);

// get modal node
// console.log( youtubeModal.getNode() );

// append to other element
// youtubeModal.appendTo(parent element);

// show modal
// youtubeModal.show();

// hide overlay
// youtubeModal.hide();

// change youtube iframe
// youtubeModal.changeYoutubeIFrame('mJEZFTbxm4o');
// youtubeModal.changeYoutubeIFrame({id: 'mJEZFTbxm4o', width: '', height: '', playerVars: {autoplay: 1, rel: 0, controls: 0}});

// get youtube iframe
// console.log( youtubeModal.getYoutubeIFrame() );

// get youtube id
// console.log( youtubeModal.getYoutubeId() );

// get flag modal is hide

// destroy
// youtubeModal.destroy();
// youtubeModal.destroy({isRemoveNode: true, isRemoveOverlay: true});

Video

<div class="wrap-video"> <!-- can rename class you want -->
</div>
html, body {margin: 0; padding: 0;}
.wrap-video {position: relative; background: #333; width: 640px; height: 360px;}
import Video from 'kihon/Video';

var video = new Video({
    wrap: $('.wrap-video'), // wrap
    videoUrls: ['https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4', 'https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv'], // video sources
    videoWidth: 640, // video width
    videoHeight: 360, // video height
    isAutoPlay: false, // auto play flag
    isLoop: false, // loop flag
    isMuted: true, // mute flag
    canplayCallback: function (obj) { // {event}
        console.log('Kihon.Video canplayCallback obj :', obj);
    },
    timeupdateCallback: function (obj) { // {event, currentTime, duration}
        // console.log('Kihon.Video timeupdateCallback obj :', obj);
    },
    endedCallback: function (obj) { // {event, currentTime, duration}
        console.log('Kihon.Video endedCallback obj :', obj);
    }
}).init();

setTimeout(function () {
    video.play();
}, 2000);

setTimeout(function () {
    video.pause();
}, 5000);

setTimeout(function () {
    video.seek(5).play();
}, 8000);

/*
 * video public methods
 */
// get video node
// console.log( video.getVideoNode() );

// get volume (0 ~ 1)
// console.log( video.getVolume() );

// set volume
// console.log( video.setVolume(0 ~ 1) );

// get video muted
// console.log( video.isMuted() );

// play video
// video.play();

// pause video
// video.pause();

// stop video
// video.stop();

// seek video
// video.seek(second);

// destroy
// video.destroy();

Contact

  • @Website : http://www.dragmove.xyz
  • @Blog : http://blog.naver.com/dragmove
  • @LinkedIn : https://www.linkedin.com/in/hyun-seok-kim-99748295/
  • @E-mail : [email protected]

License

MIT license.