html5 canvas 直播,HTML5 使用Canvas播放视频+视频播放控制器

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

/*

CanvasFilmMovie

Copyright(c) 2015 SHIFTBRAIN - Tsukasa Tokura

This software is released under the MIT License.

http://opensource.org/licenses/mit-license.php

*/

(function() {

var CanvasFilmMovie,

bind = function(fn, me) {

return function() {

return fn.apply(me, arguments);

};

},

slice = [].slice;

CanvasFilmMovie = (function() {

CanvasFilmMovie.prototype.defaults = {

acTime: 3,

acEasing: $.easing.easeInSine,

deTime: 2,

deEasing: $.easing.easeOutSine,

offsetValue: 1,

targetImgArray: [],

sceneWidth: false,

sceneHeight: false,

fps: 30

};

function CanvasFilmMovie(_$targetParent, options) {

this.changeFps = bind(this.changeFps, this);

this.spriteClear = bind(this.spriteClear, this);

this._drawLoop = bind(this._drawLoop, this);

this.drawLoopStop = bind(this.drawLoopStop, this);

this.drawLoopStart = bind(this.drawLoopStart, this);

this.drawLoopSpeedDown = bind(this.drawLoopSpeedDown, this);

this.drawLoopSpeedUp = bind(this.drawLoopSpeedUp, this);

this._canvasResize = bind(this._canvasResize, this);

this.options = $.extend({}, this.defaults, options);

this.imgWidth = null;

this.imgHeight = null;

this.canvasPointArray = [];

this.imgPointArray = [];

this.canvasPanelWidth = null;

this.canvasXPanelNum = null;

this.imgPanelresizedWidth = null;

this.imgXPanelNum = null;

this.imgYPanelNum = null;

this.acSpeedArray = [];

this.deSpeedArray = [];

this.currentFrame = 0;

this.vector = 1;

this.nowSpeed = 0;

this.stopping = false;

this.isDrawed = false;

this.$targetParent = _$targetParent;

this.canvas = null;

this.ctx = null;

this.requestId = null;

this.setTimerId = null;

this.fpsInterval = 1000 / this.options.fps;

this.timeLog = Date.now();

this.requestAnimationFrame = (window.requestAnimationFrame && window.requestAnimationFrame.bind(window)) || (window.webkitRequestAnimationFrame && window.webkitRequestAnimationFrame.bind(window)) || (window.mozRequestAnimationFrame && window.mozRequestAnimationFrame.bind(window)) || (window.oRequestAnimationFrame && window.oRequestAnimationFrame.bind(window)) || (window.msRequestAnimationFrame && window.msRequestAnimationFrame.bind(window)) || function(callback, element) {

return this.setTimerId = window.setTimeout(callback, 1000 / 60);

};

this.cancelAnimationFrame = (window.cancelAnimationFrame && window.cancelAnimationFrame.bind(window)) || (window.webkitCancelAnimationFrame && window.webkitCancelAnimationFrame.bind(window)) || (window.mozCancelAnimationFrame && window.mozCancelAnimationFrame.bind(window)) || (window.oCancelAnimationFrame && window.oCancelAnimationFrame.bind(window)) || (window.msCance