/* @charset 'UTF-8'; */ /* globale jQuery*/ /*! * scissorhands plugin * Original author: @wcweb * Licensed under the MIT license * * jQuery lightweight video eidtor plugin * Original author: @wcweb * Further changes, comments: @wcweb * Licensed under the MIT license */ // the semi-colon before the function invocation is a safety // net against concatenated scripts and/or other plugins // that are not closed properly. ; (function ($, window, document, undefined) { (function () { var cache = {}; this.tmpl = function tmpl(str, data) { // Figure out if we're getting a template, or if we need to // load the template - and be sure to cache the result. var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : // Generate a reusable function that will serve as a template // generator (and which will be cached). new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + // Introduce the data as local variables using with(){} "with(obj){p.push('" + // Convert the template into pure JavaScript str .replace(/[\r\t\n]/g, " ") .split("<%").join("\t") .replace(/((^|%>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)%>/g, "',$1,'") .split("\t").join("');") .split("%>").join("p.push('") .split("\r").join("\\'") + "');}return p.join('');"); // Provide some basic currying to the user return data ? fn(data) : fn; }; })(); var pluginName = 'ScissorHands', playerAPI = null, wrapper = {}, events = [], cuepoints = [], colors = ["#fcfcfc", "#fcfcfc"], //tracker={start:time,end:time,id:id} defaults = { url: '', paramsData: '' }, contorl_panel_template = tmpl( '

增加轨道' + '完成截取等待截取...

' ), cuepoints_templeate = tmpl( '<% for(var key in cuepoints){ %>' + 'px; background:<%= cuepoints[key]["color"]%>;" title=" <%= cuepoints[key]["title"] %> | <%= cuepoints[key].seekTime.toString().toHHMMSS() %>">

' + '<% } %>' ), track_template = tmpl( '

<%= clip_name %>: 删除 <%= clip_start %> - <%= clip_end %>

' ); // The actual plugin constructor function Plugin(element, options) { this.element = $(element); wrapper = this.element; this.options = $.extend({}, defaults, options); playerAPI = this.options.playerAPI; // playerAPI.seekTo(time,fn) this.cuepoints = this.options.cuepoints; this._name = pluginName; this.trackers = []; this.trackers_sum = 0; this.init(); this.cuepoints = this.getCuepointsList(); } Plugin.prototype.init = function () { // Place initialization logic here // You already have access to the DOM element and // the options via the instance, e.g. this.element // and this.options $(this.element).contents().remove(); $(this.element).append($(contorl_panel_template({}))); //var start_clip = this.addTrack('片头'), // end_clip = this.addTrack('片尾'), var init_one = this.addTrack(), that = this; // control panel intrativities $("#add_track").click(function (e) { e.preventDefault(); var new_one = that.addTrack(); }); $("#finish_button").click(function (e) { e.preventDefault(); var trackers = that.trackers.slice(0), output_string = ''; trackers = reOrder(trackers, "startTime"); output_string += "0B,"; for (var x = 0; x <= trackers.length - 1; x++) { output_string += Math.round(trackers[x].startTime) + "-" + Math.round(trackers[x].endTime) + ","; } output_string += "0A"; $(".output_codeline").html(output_string); $("input[name='Cutout']").val(output_string); }) } function reOrder(arr, option) { for (var i = 0; i <= arr.length - 1; i++) { for (var j = i; j < arr.length; j++) { if (arr[i][option] > arr[j][option]) { var temp = arr[j]; arr[j] = arr[i]; arr[i] = temp; } } } return arr } function randomColor() { var bg_colour = Math.floor(Math.random() * 16777215).toString(16) bg_colour = "#" + ("000000" + bg_colour).slice(-6) return bg_colour; } Plugin.prototype.renderCuePoints = function () { cuepoints = this.options.cuepoints; cuepoints = reOrder(cuepoints, "seekTime"); for (var key in cuepoints) { cuepoints[key].position = cuepoints[key].seekTime * $(".rails").width() / _getDuration(); cuepoints[key].color = randomColor(); } $(this.element).find("#rail_cues").contents().remove(); $(this.element).find("#rail_cues").append($(cuepoints_templeate({ cuepoints: cuepoints }))); } Plugin.prototype.addTrack = function (name) { var trackers = this.trackers, trackers_sum = this.trackers_sum; if (!name) name = '片段 ' + trackers_sum; var new_one = new tracker(trackers_sum, this, name); currentTracker = new_one; trackers.push(new_one); $(this.element).children("#content_panel").children("#trackers").prepend(new_one.html()); new_one.genneratEvent(); this.trackers_sum += 1; return new_one; } function tracker(id, root, name) { this.id = id; this.startTime = 0; this.endTime = _getDuration(); this.root = root; this.name = name; } tracker.prototype.duration = function () { return { startTime: this.startTime, endTime: this.endTime }; } tracker.prototype.html = function () { return $(track_template({ 'id': this.id, 'clip_name': this.name, 'clip_start': this.startTime.toString().toHHMMSS(), 'clip_end': this.endTime.toString().toHHMMSS() })); } tracker.prototype.genneratEvent = function () { var id = this.id, that = this, trackers = this.root.trackers, trackers_sum = this.root.trackers_sum; var left_handler = $("#handler_" + id + " .left_handler"), right_handler = $("#handler_" + id + " .right_handler"), handlers = $("#handler_" + id), tracer = $("#tracer_" + id), delete_track = $("#handler_" + id + " .delete_track"), startTime = 0, endTime = 0; handlers.width(tracer.width()) .height(tracer.height()) .offset(tracer.offset()) .css("position", "absolute") .css("z-index", "1002"); var orgin_stat_right = right_handler.offset().left; left_handler.draggable({ cursor: "col-resize", containment: "parent", axis: "x", refreshPositions: true }); right_handler.draggable({ cursor: "col-resize", containment: "parent", axis: "x", refreshPositions: true }); //right_handler.on("mouseenter", function (event) { // //$("#panels_line").offset({ left: tracer.offset().left + tracer.width() }); // $("#panels_line").fadeIn(); //}) right_handler.on("mouseleave", function (event) { $("#panels_line").fadeOut(); }) right_handler.on("drag", { currentTracker: this }, function (event, ui) { if (ui.position.left < left_handler.position().left - $(this).width()) return false; var new_width = Math.round(ui.position.left - left_handler.position().left + left_handler.width()); if (new_width > handlers.width()) { tracer.width(handlers.width()); } else { tracer.width(new_width); } $("#panels_line").show(); $("#panels_line").offset({ left: tracer.offset().left + tracer.width() }); _jumpTo((ui.offset.left - handlers.offset().left + $(this).width()) / handlers.width() * 10, currentTracker, function () { // var time = playerAPI.ready ? playerAPI.getTime() : playerAPI.getClip().duration; // if (!time) time = 0; var time = _getCurrentTime(); handlers.find("span.right_time").html((time).toString().toHHMMSS()); that.endTime = time; } ); }); //left_handler.on("mouseenter", function (event) { // // $("#panels_line").fadeIn(); // //$("#panels_line").offset({ left: tracer.offset().left }); // $("#panels_line").fadeIn(); //}) left_handler.on("mouseleave", function (event) { $("#panels_line").fadeOut(); }) left_handler.on("drag", function (event, ui) { if (ui.position.left > right_handler.position().left + $(this).width()) return false; tracer.width(Math.round(right_handler.position().left - ui.position.left + $(this).width())); tracer.offset({ top: null, left: Math.round(ui.offset.left + 0.5) }); $("#panels_line").show(); $("#panels_line").offset({ left: tracer.offset().left }); _jumpTo((ui.offset.left - handlers.offset().left) / handlers.width() * 10, currentTracker, function () { // var time = playerAPI.ready ? playerAPI.video.time : 0; //if (!time) time = 0; var time = _getCurrentTime(); if (time != null) { handlers.find("span.left_time").html((time).toString().toHHMMSS()); that.startTime = time; } } ); }); delete_track.on("click", function (event) { event.preventDefault(); //$(wrapper).contents.remove($($(this).attr('data-target'))); var target_id = $(this).attr('data-target'); $("#panel_" + target_id).remove(); trackers.splice(target_id, 1); }) } function _jumpTo(persence, currentTracker, callback) { if (playerAPI.seekTo == undefined) { playerAPI.seek(persence * _getDuration()); callback.call(currentTracker); } else { playerAPI.seekTo(persence, callback); } } function _getCurrentTime() { return playerAPI.ready ? playerAPI.video.time : playerAPI.video.duration; //return playerAPI.getTime(); } function _getDuration() { return playerAPI.ready ? playerAPI.video.duration : 0; //return playerAPI ? playerAPI.getClip().duration : 0; } Plugin.prototype.getCuepointsList = function () { var that = this; if (this.options.url.constructor.name == "Array") { $(this.options.url).each(function (index) { $.ajax({ type: "GET", url: that.options.url[index], data: that.paramsData, // crossDomain:true, //dataType: "json", dataType: "xml", jsonp: false }).done(function (results) { var cps = $(results).find("item"); cps.each(function (index, el) { that.options.cuepoints.push({ title: $(el).children("title").text(), seekTime: $(el).children("seekTime").text() / 1000 }); }) that.renderCuePoints(); }).fail(function (jqXHR, textStatus, errorThrown) { }); }); } else { $.ajax({ type: "GET", url: this.options.url, data: this.paramsData, // crossDomain:true, //dataType: "json", dataType: "xml", jsonp: false }).done(function (results) { var cps = $(results).find("item"); cps.each(function (index, el) { that.options.cuepoints.push({ title: $(el).children("title").text(), seekTime: $(el).children("seekTime").text() / 1000 }); }) that.renderCuePoints(); }).fail(function (jqXHR, textStatus, errorThrown) { }); } }; (function () { String.prototype.toHHMMSS = function () { var sec_num = parseInt(this, 10); // don't forget the second parm var hours = Math.floor(sec_num / 3600); var minutes = Math.floor((sec_num - (hours * 3600)) / 60); var seconds = sec_num - (hours * 3600) - (minutes * 60); var minseconds = Math.round((this - sec_num) * 10); if (hours < 10) { hours = "0" + hours; } if (minutes < 10) { minutes = "0" + minutes; } if (seconds < 10) { seconds = "0" + seconds; } //var time = hours+':'+minutes+':'+seconds; var time = minutes + ':' + seconds + ':' + minseconds; return time; } })(); // Closure (function () { /** * Decimal adjustment of a number. * * @param {String} type The type of adjustment. * @param {Number} value The number. * @param {Integer} exp The exponent (the 10 logarithm of the adjustment base). * @returns {Number} The adjusted value. */ function decimalAdjust(type, value, exp) { // If the exp is undefined or zero... if (typeof exp === 'undefined' || +exp === 0) { return Math[type](value); } value = +value; exp = +exp; // If the value is not a number or the exp is not an integer... if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) { return NaN; } // Shift value = value.toString().split('e'); value = Math[type](+(value[0] + 'e' + (value[1] ? (+value[1] - exp) : -exp))); // Shift back value = value.toString().split('e'); return +(value[0] + 'e' + (value[1] ? (+value[1] + exp) : exp)); } // Decimal round if (!Math.round10) { Math.round10 = function (value, exp) { return decimalAdjust('round', value, exp); }; } // Decimal floor if (!Math.floor10) { Math.floor10 = function (value, exp) { return decimalAdjust('floor', value, exp); }; } // Decimal ceil if (!Math.ceil10) { Math.ceil10 = function (value, exp) { return decimalAdjust('ceil', value, exp); }; } })(); $.fn[pluginName] = function (options) { return this.each(function () { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); } }); } })(jQuery, window, document);