LeoOnTheEarth/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
    <title>Video Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/LeoOnTheEarth/fd57ce7daa9ecd2d8f6482f40772e10b/raw/bb3904e33f087c807510986e332b66b22a9a7b54/video.js"></script>
</head>
<body style="margin:0;">

<video id="video" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"
       muted="muted">
    <source id='video-mp4'
            src="http://client.wegames.com.tw/test/1920x1080_1019_v2_20mb.mp4"
            type='video/mp4'>

    <p>Your user agent does not support the HTML5 Video element.</p>
</video>

<script type="text/javascript">
;(function($, global, undefined) {
    var videoWidth = 1920;
    var videoHeight = 1080;
    var player = new Html5VideoPlayer($('#video'));

    player.on('ready', function(video) {
        video.play();
    });
    player.on('ended', function(video) {
        video.play();
    });

    function updateVideoSIze() {
        var $video = $('#video');
        var viewportWidth = Math.max(document.documentElement.clientWidth, global.innerWidth || 0);
        var viewportHeight = Math.max(document.documentElement.clientHeight, global.innerHeight || 0);
        var newVideoHeight = Math.ceil(viewportHeight);
        var newVideoWidth = Math.ceil(newVideoHeight * videoWidth / videoHeight);

        if (newVideoWidth < viewportWidth) {
            newVideoHeight = Math.ceil(viewportHeight + 9 * (viewportWidth - newVideoWidth) / 16);
            newVideoWidth = Math.ceil(newVideoHeight * videoWidth / videoHeight);
        }

        $video.width(newVideoWidth);
        $video.height(newVideoHeight);
        $video.css('left', Math.ceil((viewportWidth - newVideoWidth) / 2));
    }

    updateVideoSIze();

    $(global).resize(function() {
        updateVideoSIze();
    });
})(jQuery, window);

</script>
</body>
</html>

## video.js
;(function($, global, undefined) {
    var document = global.document;

    /**
     * Class EventEmitter
     *
     * @constructor
     */
    function EventEmitter() {
        this.listeners = {};
    }

    /**
     * Adds a listener to the end of the listeners array for the specified event.
     *
     * @param eventName {string}
     * @param callback  {callback}
     *
     * @return  {void}
     */
    EventEmitter.prototype.on = function(eventName, callback) {
        if (!this.listeners.hasOwnProperty(eventName)) {
            this.listeners[eventName] = [];
        }

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

    /**
     * Execute each of the listeners in order with the supplied arguments.
     *
     * @param eventName {string} Event name
     * @param args      {Array}  Listener arguments
     *
     * @return {void}
     */
    EventEmitter.prototype.trigger = function(eventName, args) {
        if (!Array.isArray(this.listeners[eventName])) {
            return;
        }

        var callbacks = this.listeners[eventName];
        var max = callbacks.length;

        for (var i = 0; i < max; ++i) {
            callbacks[i].apply(this, args);
        }
    };

    /**
     * Class YouTubePlayer
     *
     * 目前有5個事件可以使用
     * - player.on('ready'): 當影片準備好可以播放的時候
     * - player.on('started'): 當影片開始的時候
     * - player.on('paused'): 當影片暫停的時候
     * - player.on('ended'): 當影片結束的時候
     * - player.on('buffering'): 當影片正在讀取的時候
     *
     * example:
     * player.on('ready', function (video) {
     *     // video 是 YouTube Player 物件
     *     // ...
     * });
     *
     * @param {jQuery} $element YouTube element jquery node
     * @param {Object} options  YouTube Player options
     *
     * @constructor
     */
    function YouTubePlayer($element, options) {
        this.$element = $element;
        this.options = {};
        this.isYoutubeIframeApiLoaded = false;
        this.isOnYouTubeIframeAPIReadyRegistered = false;

        this.init(this.$element, options);
    }

    // 繼承 EventEmitter class
    YouTubePlayer.prototype = new EventEmitter;

    /**
     * 初始化
     *
     * @param {jQuery} $element YouTube element jquery node
     * @param {Object} options  YouTube Player options
     */
    YouTubePlayer.prototype.init = function($element, options) {
        var player = this;
        var videoId = options.videoId ? options.videoId : '';

        this.options = $.extend({
            width: 800,
            height: 600,
            videoId: videoId,           // 影片 ID
            playerVars: {
                controls: 0,            // 在播放器顯示暫停／播放按鈕
                showinfo: 0,            // 隱藏影片標題
                modestbranding: 1,      // 隱藏YouTube Logo
                loop: 0,                // 讓影片循環播放
                fs: 0,                  // 隱藏全螢幕按鈕
                rel: 0,                 // 是否再播放結束時顯示相關影片清單
                cc_load_policty: 0,     // 隱藏字幕
                iv_load_policy: 3,      // 隱藏影片註解
                playlist: videoId,      // 影片 ID
                disablekb: 1,           // 啟用鍵盤快速鍵
                enablejsapi: 0
            },
            events: {
                'onReady': function(event) {
                    player.trigger('ready', [event.target]);
                },
                'onStateChange': function(event) {
                    switch (event.data) {
                        case YT.PlayerState.ENDED:      // 0
                            player.trigger('ended', [event.target]);
                            break;
                        case YT.PlayerState.PLAYING:    // 1
                            player.trigger('started', [event.target]);
                            break;
                        case YT.PlayerState.PAUSED:     // 2
                            player.trigger('paused', [event.target]);
                            break;
                        case YT.PlayerState.BUFFERING:  // 3
                            player.trigger('buffering', [event.target]);
                            break;
                        case YT.PlayerState.CUED:       // 5
                        case -1:                        // unstarted
                            break;
                    }
                }
            }
        }, options);

        this.loadYouTubeIframeApi();
        this.registerOnYouTubeIframeAPIReady($element.attr('id'), this.options);
    };

    /**
     * 引入 YouTube iFrame API 的 Javascript 檔
     */
    YouTubePlayer.prototype.loadYouTubeIframeApi = function () {
        if (this.isYoutubeIframeApiLoaded) {
            return;
        }

        var tag = document.createElement('script');
        var firstScriptTag = document.getElementsByTagName('script')[0];

        tag.src = 'https://www.youtube.com/iframe_api';
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        this.isYoutubeIframeApiLoaded = true;
    };

    /**
     * 註冊 YouTube iFrame API 的程式進入點 "function onYouTubeIframeAPIReady()"
     *
     * @param {String} id      影片擺放的元素 Id
     * @param {Object} options YouTube Player 設定
     */
    YouTubePlayer.prototype.registerOnYouTubeIframeAPIReady = function (id, options) {
        if (this.isOnYouTubeIframeAPIReadyRegistered) {
            return;
        }

        global.onYouTubeIframeAPIReady = function() {
            var youtubePlayer = new YT.Player(id, options);
        };

        this.isOnYouTubeIframeAPIReadyRegistered = true;
    };

    /**
     * Class Html5VideoPlayer
     *
     * 目前有5個事件可以使用
     * - player.on('ready'): 當影片準備好可以播放的時候
     * - player.on('started'): 當影片開始的時候
     * - player.on('paused'): 當影片暫停的時候
     * - player.on('ended'): 當影片結束的時候
     * - player.on('buffering'): 當影片正在讀取的時候
     *
     * example:
     * player.on('ready', function (video) {
     *     // video 是 Video 元素的物件
     *     // ...
     * });
     *
     * @param {jQuery} $element Video element jquery node
     *
     * @constructor
     */
    function Html5VideoPlayer($element) {
        this.$element = $element;

        this.init(this.$element);
    }

    Html5VideoPlayer.prototype = new EventEmitter;

    /**
     * @param {jQuery} $element Video element jquery node
     */
    Html5VideoPlayer.prototype.init = function($element) {
        var player = this;

        $element.on('canplay', function () {
            player.trigger('ready', [this]);
        });
        $element.on('play', function () {
            player.trigger('started', [this]);
        });
        $element.on('pause', function () {
            player.trigger('paused', [this]);
        });
        $element.on('ended', function () {
            player.trigger('ended', [this]);
        });
        $element.on('loadstart', function () {
            player.trigger('buffering', [this]);
        });
    };

    // Export classes
    global.YouTubePlayer = YouTubePlayer;
    global.Html5VideoPlayer = Html5VideoPlayer;
})(jQuery, window);
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
	<title>Video Test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.rawgit.com/LeoOnTheEarth/fd57ce7daa9ecd2d8f6482f40772e10b/raw/bb3904e33f087c807510986e332b66b22a9a7b54/video.js"></script>
	</head>
	<body style="margin:0;">

	<video id="video" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"
	muted="muted">
	<source id='video-mp4'
	src="http://client.wegames.com.tw/test/1920x1080_1019_v2_20mb.mp4"
	type='video/mp4'>

	<p>Your user agent does not support the HTML5 Video element.</p>
	</video>

	<script type="text/javascript">
	;(function($, global, undefined) {
	var videoWidth = 1920;
	var videoHeight = 1080;
	var player = new Html5VideoPlayer($('#video'));

	player.on('ready', function(video) {
	video.play();
	});
	player.on('ended', function(video) {
	video.play();
	});

	function updateVideoSIze() {
	var $video = $('#video');
	var viewportWidth = Math.max(document.documentElement.clientWidth, global.innerWidth \|\| 0);
	var viewportHeight = Math.max(document.documentElement.clientHeight, global.innerHeight \|\| 0);
	var newVideoHeight = Math.ceil(viewportHeight);
	var newVideoWidth = Math.ceil(newVideoHeight * videoWidth / videoHeight);

	if (newVideoWidth < viewportWidth) {
	newVideoHeight = Math.ceil(viewportHeight + 9 * (viewportWidth - newVideoWidth) / 16);
	newVideoWidth = Math.ceil(newVideoHeight * videoWidth / videoHeight);
	}

	$video.width(newVideoWidth);
	$video.height(newVideoHeight);
	$video.css('left', Math.ceil((viewportWidth - newVideoWidth) / 2));
	}

	updateVideoSIze();

	$(global).resize(function() {
	updateVideoSIze();
	});
	})(jQuery, window);

	</script>
	</body>
	</html>
	;(function($, global, undefined) {
	var document = global.document;

	/**
	* Class EventEmitter
	*
	* @constructor
	*/
	function EventEmitter() {
	this.listeners = {};
	}

	/**
	* Adds a listener to the end of the listeners array for the specified event.
	*
	* @param eventName {string}
	* @param callback {callback}
	*
	* @return {void}
	*/
	EventEmitter.prototype.on = function(eventName, callback) {
	if (!this.listeners.hasOwnProperty(eventName)) {
	this.listeners[eventName] = [];
	}

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

	/**
	* Execute each of the listeners in order with the supplied arguments.
	*
	* @param eventName {string} Event name
	* @param args {Array} Listener arguments
	*
	* @return {void}
	*/
	EventEmitter.prototype.trigger = function(eventName, args) {
	if (!Array.isArray(this.listeners[eventName])) {
	return;
	}

	var callbacks = this.listeners[eventName];
	var max = callbacks.length;

	for (var i = 0; i < max; ++i) {
	callbacks[i].apply(this, args);
	}
	};

	/**
	* Class YouTubePlayer
	*
	* 目前有5個事件可以使用
	* - player.on('ready'): 當影片準備好可以播放的時候
	* - player.on('started'): 當影片開始的時候
	* - player.on('paused'): 當影片暫停的時候
	* - player.on('ended'): 當影片結束的時候
	* - player.on('buffering'): 當影片正在讀取的時候
	*
	* example:
	* player.on('ready', function (video) {
	* // video 是 YouTube Player 物件
	* // ...
	* });
	*
	* @param {jQuery} $element YouTube element jquery node
	* @param {Object} options YouTube Player options
	*
	* @constructor
	*/
	function YouTubePlayer($element, options) {
	this.$element = $element;
	this.options = {};
	this.isYoutubeIframeApiLoaded = false;
	this.isOnYouTubeIframeAPIReadyRegistered = false;

	this.init(this.$element, options);
	}

	// 繼承 EventEmitter class
	YouTubePlayer.prototype = new EventEmitter;

	/**
	* 初始化
	*
	* @param {jQuery} $element YouTube element jquery node
	* @param {Object} options YouTube Player options
	*/
	YouTubePlayer.prototype.init = function($element, options) {
	var player = this;
	var videoId = options.videoId ? options.videoId : '';

	this.options = $.extend({
	width: 800,
	height: 600,
	videoId: videoId, // 影片 ID
	playerVars: {
	controls: 0, // 在播放器顯示暫停／播放按鈕
	showinfo: 0, // 隱藏影片標題
	modestbranding: 1, // 隱藏YouTube Logo
	loop: 0, // 讓影片循環播放
	fs: 0, // 隱藏全螢幕按鈕
	rel: 0, // 是否再播放結束時顯示相關影片清單
	cc_load_policty: 0, // 隱藏字幕
	iv_load_policy: 3, // 隱藏影片註解
	playlist: videoId, // 影片 ID
	disablekb: 1, // 啟用鍵盤快速鍵
	enablejsapi: 0
	},
	events: {
	'onReady': function(event) {
	player.trigger('ready', [event.target]);
	},
	'onStateChange': function(event) {
	switch (event.data) {
	case YT.PlayerState.ENDED: // 0
	player.trigger('ended', [event.target]);
	break;
	case YT.PlayerState.PLAYING: // 1
	player.trigger('started', [event.target]);
	break;
	case YT.PlayerState.PAUSED: // 2
	player.trigger('paused', [event.target]);
	break;
	case YT.PlayerState.BUFFERING: // 3
	player.trigger('buffering', [event.target]);
	break;
	case YT.PlayerState.CUED: // 5
	case -1: // unstarted
	break;
	}
	}
	}
	}, options);

	this.loadYouTubeIframeApi();
	this.registerOnYouTubeIframeAPIReady($element.attr('id'), this.options);
	};

	/**
	* 引入 YouTube iFrame API 的 Javascript 檔
	*/
	YouTubePlayer.prototype.loadYouTubeIframeApi = function () {
	if (this.isYoutubeIframeApiLoaded) {
	return;
	}

	var tag = document.createElement('script');
	var firstScriptTag = document.getElementsByTagName('script')[0];

	tag.src = 'https://www.youtube.com/iframe_api';
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	this.isYoutubeIframeApiLoaded = true;
	};

	/**
	* 註冊 YouTube iFrame API 的程式進入點 "function onYouTubeIframeAPIReady()"
	*
	* @param {String} id 影片擺放的元素 Id
	* @param {Object} options YouTube Player 設定
	*/
	YouTubePlayer.prototype.registerOnYouTubeIframeAPIReady = function (id, options) {
	if (this.isOnYouTubeIframeAPIReadyRegistered) {
	return;
	}

	global.onYouTubeIframeAPIReady = function() {
	var youtubePlayer = new YT.Player(id, options);
	};

	this.isOnYouTubeIframeAPIReadyRegistered = true;
	};

	/**
	* Class Html5VideoPlayer
	*
	* 目前有5個事件可以使用
	* - player.on('ready'): 當影片準備好可以播放的時候
	* - player.on('started'): 當影片開始的時候
	* - player.on('paused'): 當影片暫停的時候
	* - player.on('ended'): 當影片結束的時候
	* - player.on('buffering'): 當影片正在讀取的時候
	*
	* example:
	* player.on('ready', function (video) {
	* // video 是 Video 元素的物件
	* // ...
	* });
	*
	* @param {jQuery} $element Video element jquery node
	*
	* @constructor
	*/
	function Html5VideoPlayer($element) {
	this.$element = $element;

	this.init(this.$element);
	}

	Html5VideoPlayer.prototype = new EventEmitter;

	/**
	* @param {jQuery} $element Video element jquery node
	*/
	Html5VideoPlayer.prototype.init = function($element) {
	var player = this;

	$element.on('canplay', function () {
	player.trigger('ready', [this]);
	});
	$element.on('play', function () {
	player.trigger('started', [this]);
	});
	$element.on('pause', function () {
	player.trigger('paused', [this]);
	});
	$element.on('ended', function () {
	player.trigger('ended', [this]);
	});
	$element.on('loadstart', function () {
	player.trigger('buffering', [this]);
	});
	};

	// Export classes
	global.YouTubePlayer = YouTubePlayer;
	global.Html5VideoPlayer = Html5VideoPlayer;
	})(jQuery, window);