// Test (function () { if (window.location.protocol == "file:" && ((navigator.userAgent + "").indexOf(" Chrome/") >= 0)) { $(document).ready(function () { api_setup(); }); } else { // Load API var api_load_state = 0; $.getScript("ve_api.js", function () { if (++api_load_state == 2) api_setup(); }); // Load test CSS $.ajax({ url: "api_test.css", dataType: "text", success: function (data) { $($("head")[0]) .append( $(document.createElement("style")) .html(data) ); if (++api_load_state == 2) api_setup(); } }); } // Element creation functions function E(elem) { return $(document.createElement(elem)); } function D() { return $(document.createElement("div")); } function text_to_html(str) { return str.replace(/&/g, "&") .replace(/>/g, ">") .replace(/Sync offset") ) ) .append( D() .append( E("span") .html("Tag ") ) .append( E("input") .attr("type", "text") .attr("maxlength", "100") .attr("name", "tag") .on("change", on_api_retag_tag_change) ) ) .append(D().css("clear", "both")) ) .append( (retag_video_main_container = D()) .append(D().addClass("APITestSeparatorContainer").append(D().addClass("APITestSeparator"))) .append( //{ D() .css("text-align", "right") .css("float", "right") .append( E("div") .html("Audio After Video") ) .append( D() .append( E("label") .css("display", "inline-block") .append(" Loop") .append(E("input").attr("type", "radio").attr("name", "audio_after_video_style").val("1").on("change", on_api_retag_value_change)) ) .append( E("label") .css("display", "inline-block") .css("padding-left", "8px") .append("Don't play") .append(E("input").attr("type", "radio").attr("name", "audio_after_video_style").val("0").on("change", on_api_retag_value_change)) ) ) .append( D() .append( E("label") .append("Fade Out") .append(E("input").attr("type", "checkbox").attr("name", "audio_fade_out").on("change", on_api_retag_value_change)) ) ) ) //} .append( //{ D() .append( E("div") .html("Audio Before Video") ) .append( D() .append( E("label") .css("display", "inline-block") .append(E("input").attr("type", "radio").attr("name", "audio_before_video_style").val("0").on("change", on_api_retag_value_change)) .append("Don't play") ) .append( E("label") .css("display", "inline-block") .css("padding-left", "8px") .append(E("input").attr("type", "radio").attr("name", "audio_before_video_style").val("1").on("change", on_api_retag_value_change)) .append("Loop") ) ) .append( D() .append( E("label") .append(E("input").attr("type", "checkbox").attr("name", "audio_fade_in").on("change", on_api_retag_value_change)) .append("Fade In") ) ) ) //} .append(D().css("clear", "both")) ) .append( (retag_audio_main_container = D()) .append(D().addClass("APITestSeparatorContainer").append(D().addClass("APITestSeparator"))) .append( //{ D() .css("text-align", "right") .css("float", "right") .append( E("div") .html("Video After Audio") ) .append( D() .append( D() .css("display", "inline-block") .append( E("label") .css("display", "block") .append("Loop video") .append(E("input").attr("type", "radio").attr("name", "video_after_audio_style").val("1").on("change", on_api_retag_value_change)) ) .append( E("label") .css("display", "block") .append("Show image") .append(E("input").attr("type", "radio").attr("name", "video_after_audio_style").val("3").on("change", on_api_retag_value_change)) ) ) .append( D() .css("display", "inline-block") .css("padding-left", "8px") .append( E("label") .css("display", "block") .append("Blank") .append(E("input").attr("type", "radio").attr("name", "video_after_audio_style").val("0").on("change", on_api_retag_value_change)) ) .append( E("label") .css("display", "block") .append("Video frame") .append(E("input").attr("type", "radio").attr("name", "video_after_audio_style").val("2").on("change", on_api_retag_value_change)) ) ) ) .append( D() .append( E("label") .append("Fade Out") .append(E("input").attr("type", "checkbox").attr("name", "video_fade_out").on("change", on_api_retag_value_change)) ) ) ) //} .append( //{ D() .append( E("div") .html("Video Before Audio") ) .append( D() .append( D() .css("display", "inline-block") .append( E("label") .css("display", "block") .append(E("input").attr("type", "radio").attr("name", "video_before_audio_style").val("0").on("change", on_api_retag_value_change)) .append("Blank") ) .append( E("label") .css("display", "block") .append(E("input").attr("type", "radio").attr("name", "video_before_audio_style").val("2").on("change", on_api_retag_value_change)) .append("Video frame") ) ) .append( D() .css("display", "inline-block") .css("padding-left", "8px") .append( E("label") .css("display", "block") .append(E("input").attr("type", "radio").attr("name", "video_before_audio_style").val("1").on("change", on_api_retag_value_change)) .append("Loop video") ) .append( E("label") .css("display", "block") .append(E("input").attr("type", "radio").attr("name", "video_before_audio_style").val("3").on("change", on_api_retag_value_change)) .append("Show image") ) ) ) .append( D() .append( E("label") .append(E("input").attr("type", "checkbox").attr("name", "video_fade_in").on("change", on_api_retag_value_change)) .append("Fade In") ) ) ) //} .append(D().css("clear", "both")) ) .append(D().addClass("APITestSeparatorContainer").append(D().addClass("APITestSeparator"))) .append( (retag_regenerate_container = D()) .css("text-align", "center") .append( E("a") .css("cursor", "pointer") .html("Regenerate") .on("click", on_api_retag_regenerate_click) ) .append( (retag_regenerate_container_error = E("div")) .css("opacity", "0.7") .css("font-size", "0.8em") ) ) .append( (retag_regenerating_container = D()) .css("display", "none") .css("text-align", "center") .append( E("span") .html("regenerating...") ) ) .append( (retag_download_container = D()) .css("display", "none") .css("text-align", "center") .append( (retag_download_link = E("a")) .css("cursor", "pointer") .html("Download") ) .append(" / ") .append( E("a") .css("cursor", "pointer") .html("Load in player") .on("click", on_api_retag_load_in_player_click) ) .append( E("div") .css("opacity", "0.7") .css("font-size", "0.8em") .html("Be sure to save it as the correct file type if your browser doesn't specify a file extension") ) ) .append(D().addClass("APITestSeparatorContainer").append(D().addClass("APITestSeparator"))); } // Acquire data to decode function on_api_get_data(ui8_data, filename) { // Clear old if (vplayer != null) { vplayer.reset(); vplayer = null; } if (videcode != null) { videcode.reset(); videcode = null; } // New videcode = new Videcode(ui8_data, filename); var callback = function () { if (!videcode.has_error()) { // Clear if (dragdrop_info_display_inner != null) { dragdrop_info_display_inner.remove(); dragdrop_info_display_inner = null; } video_container.html(""); retag_container.css("display", ""); // Create data vplayer = new VPlayer(videcode); // Setup html video_status_label.html("loading"); filename_display.html(text_to_html(filename)); tag_display.html("[" + text_to_html(videcode.get_tag()) + "]"); link_display.css("display", ""); if (vplayer.get_video_url() != null) video_link.attr("href", vplayer.get_video_url()); else video_link.removeAttr("href"); if (vplayer.get_audio_url() != null) audio_link.attr("href", vplayer.get_audio_url()); else audio_link.removeAttr("href"); if (vplayer.get_image_url() != null) image_link.attr("href", vplayer.get_image_url()); else image_link.removeAttr("href"); video_seek_label.html("0"); video_seek_bar.css("width", "0%"); retag_video_main_container.css("display", "none"); retag_audio_main_container.css("display", "none"); retag_regenerating_container.css("display", "none"); setup_retag(videcode); // Setup player vplayer .on("load", function (data) { // Set container size var w = video_container_outer.width(); var h = video_container_outer.height(); var v_size = (this.has_video() ? this.get_video_size() : this.get_image_size()); if (v_size.width > 0 && v_size.height > 0) { var scale = w / v_size.width; var scale2 = h / v_size.height; scale = (scale < scale2 ? scale : scale2); var vid_width = v_size.width * scale; var vid_height = v_size.height * scale; $(this.get_container()).css({ "width": vid_width + "px", "height": vid_height + "px" }); video_container.css("padding-top", ((h - vid_height) / 2.0) + "px"); } // Status video_status_label.html("loaded"); video_seek_label.html("0"); video_seek_bar.css("width", "0%"); if (vplayer.has_video_and_audio()) { retag_video_main_container.css("display", vplayer.is_video_main() ? "" : "none"); retag_audio_main_container.css("display", vplayer.is_video_main() ? "none" : ""); if (videcode != null) { retag_form.find("[name=sync_offset]").val(vplayer.get_sync_offset()); } } }) .on("error", function (data) { video_status_label.html("error"); }) .on("timeupdate", function (data) { if (!video_seeking) { video_seek_label.html(data.time); video_seek_bar.css("width", (data.time / data.duration * 100) + "%"); } }) .on("volumechange", function (data) { volume_display.html(Math.round(data.volume * 100) + "%"); }) .on("seek", function (data) { video_seek_label.html(data.time); video_seek_bar.css("width", (data.time / data.duration * 100) + "%"); }) .on("play", function (data) { video_status_label.html("playing"); }) .on("pause", function (data) { video_status_label.html("paused"); }) .on("end", function (data) { video_status_label.html("ended"); }) .create_html(video_container[0]); // Volume volume_display.html(Math.round(vplayer.get_volume() * 100) + "%"); } else { // Error video_status_label.html("Error: " + videcode.get_error()); retag_container.css("display", "none"); link_display.css("display", "none"); filename_display.html("no file"); tag_display.html(""); video_seek_label.html("0"); video_seek_bar.css("width", "0%"); } }; if (load_mode_instant) { videcode.decode(); } else { videcode.decode_async({steps:1000, delay:1}, callback, function (data) { // Status video_status_label.html("Loading: " + (Math.round(data.percent * 10000) / 100) + "%"); }); } callback(); } function setup_retag(videcode) { retag_form.find("[name=tag]").val(videcode.get_tag()); retag_form.find("[name=sync_offset]").val((videcode.get_sync_offset())); retag_sync_container.css("display", videcode.has_video_and_audio() ? "" : "none"); retag_form.find("[name=audio_before_video_style][value=" + videcode.get_audio_play_style(true) + "]").prop("checked", true); retag_form.find("[name=audio_after_video_style][value=" + videcode.get_audio_play_style(false) + "]").prop("checked", true); retag_form.find("[name=audio_fade_in]").prop("checked", videcode.get_audio_fade(true)); retag_form.find("[name=audio_fade_out]").prop("checked", videcode.get_audio_fade(false)); retag_form.find("[name=video_before_audio_style][value=" + videcode.get_video_play_style(true) + "]").prop("checked", true); retag_form.find("[name=video_after_audio_style][value=" + videcode.get_video_play_style(false) + "]").prop("checked", true); retag_form.find("[name=video_fade_in]").prop("checked", videcode.get_video_fade(true)); retag_form.find("[name=video_fade_out]").prop("checked", videcode.get_video_fade(false)); } // Ignore event function on_event_ignore() { return false; } // Drag/drop events function on_api_dragover(event) { event.originalEvent.dataTransfer.dropEffect = "move"; return false; } function on_api_dragenter(event) { dragdrop_info_display.removeClass("APITestDragDropInfoContainerDisabled"); if (dragdrop_info_display_inner != null) dragdrop_info_display_inner.addClass("APITestVideoRegionTextDisabled"); return false; } function on_api_dragexit(event) { dragdrop_info_display.addClass("APITestDragDropInfoContainerDisabled"); if (dragdrop_info_display_inner != null) dragdrop_info_display_inner.removeClass("APITestVideoRegionTextDisabled"); return false; } function on_api_dragdrop(event) { // Close overlays dragdrop_info_display.addClass("APITestDragDropInfoContainerDisabled"); if (dragdrop_info_display_inner != null) dragdrop_info_display_inner.removeClass("APITestVideoRegionTextDisabled"); // Load if (event.originalEvent.dataTransfer.files.length > 0) { for (var i = 0; i < event.originalEvent.dataTransfer.files.length; ++i) { // Local file var filename = event.originalEvent.dataTransfer.files[i].name; var reader = new FileReader(); // Done function reader.onload = function () { // Convert and call load function var ui8_data = new Uint8Array(this.result); // Load data on_api_get_data(ui8_data, filename); } // Start reader.readAsArrayBuffer(event.originalEvent.dataTransfer.files[i]); break; } } else { // not implemented } // Done return false; } // Load function on_api_load_mode_click(event) { if (event.which == 1) { load_mode_instant = !load_mode_instant; $(this).html(load_mode_instant ? "instant" : "asynchronous"); return false; } return true; } // Play/pause function on_api_play_pause_click(event) { if (event.which == 1) { if (vplayer != null) { if (vplayer.is_paused()) vplayer.play(); else vplayer.pause(); } return false; } return true; } // Seek bar function on_api_seek_mousedown(event) { if (event.which == 1) { video_seeking = true; if (vplayer != null) { video_seeking_paused = vplayer.is_paused(); vplayer.pause(); var percent = (event.pageX - video_seek_bar_container.offset().left) / video_seek_bar_container.width(); if (percent < 0.0) percent = 0.0; else if (percent > 1.0) percent = 1.0; vplayer.seek(percent * vplayer.get_duration()); } return false; } return true; } function on_api_seek_mouseup(event) { if (video_seeking) { video_seeking = false; if (!video_seeking_paused && vplayer != null && vplayer.get_time() < vplayer.get_duration()) vplayer.play(); } return true; } function on_api_seek_mousemove(event) { if (video_seeking) { if (vplayer != null) { var percent = (event.pageX - video_seek_bar_container.offset().left) / video_seek_bar_container.width(); if (percent < 0.0) percent = 0.0; else if (percent > 1.0) percent = 1.0; vplayer.seek(percent * vplayer.get_duration()); } } return true; } // Volume change function on_api_vol_add_click(event) { if (event.which == 1) { if (vplayer != null) { vplayer.set_volume(vplayer.get_volume() + 0.05); } return false; } return true; } function on_api_vol_sub_click(event) { if (event.which == 1) { if (vplayer != null) { vplayer.set_volume(vplayer.get_volume() - 0.05); } return false; } return true; } // Retag function on_api_retag_value_change(event) { retag_regenerate_container.css("display", ""); retag_download_container.css("display", "none"); retag_regenerating_container.css("display", "none"); return true; } function on_api_retag_tag_change(event) { var tag = $(this).val(); tag = encode_utf8(tag); var maxLen = parseInt($(this).attr("maxlength")); if (tag.length > maxLen) { var loop = true; var newTag = ""; while (loop && maxLen >= 0) { loop = false; try { newTag = decode_utf8(tag.substr(0, maxLen)); } catch (e) { --maxLen; loop = true; } } $(this).val(newTag); } return on_api_retag_value_change(); } function on_api_retag_sync_change(event) { var time = $(this).val(); time = retag_validate_sync_time(parseFloat(time)); $(this).val(time.toString()); return on_api_retag_value_change(); } function on_api_retag_regenerate_click(event) { if (event.which == 1) { if (videcode == null || videcode.has_error()) return false; retag_regenerate_container.css("display", "none"); retag_download_container.css("display", "none"); retag_regenerating_container.css("display", ""); if (videncode != null) { videncode.reset(); videncode = null; } // Create new var sync_offset = parseFloat(retag_form.find("[name=sync_offset]").val()); if (sync_offset != sync_offset || !isFinite(sync_offset)) sync_offset = 0.0; var o; videncode = new Videncode(); videncode .set_image(videcode.get_image(), videcode.get_image_mime_type()) .set_video(videcode.get_video()) .set_audio(videcode.get_audio()) .set_tag(retag_form.find("[name=tag]").val()) .set_sync_offset(sync_offset); if (videcode.has_video_and_audio()) { if (vplayer == null || vplayer.is_video_main()) { videncode .set_audio_play_style(true, (o = retag_form.find("[name=audio_before_video_style]:checked")).length > 0 ? parseInt(o.val()) : 0) .set_audio_play_style(false, (o = retag_form.find("[name=audio_after_video_style]:checked")).length > 0 ? parseInt(o.val()) : 0) .set_audio_fade(true, retag_form.find("[name=audio_fade_in]:checked").length > 0) .set_audio_fade(false, retag_form.find("[name=audio_fade_out]:checked").length > 0); } if (vplayer == null || !vplayer.is_video_main()) { videncode .set_video_play_style(true, (o = retag_form.find("[name=video_before_audio_style]:checked")).length > 0 ? parseInt(o.val()) : 0) .set_video_play_style(false, (o = retag_form.find("[name=video_after_audio_style]:checked")).length > 0 ? parseInt(o.val()) : 0) .set_video_fade(true, retag_form.find("[name=video_fade_in]:checked").length > 0) .set_video_fade(false, retag_form.find("[name=video_fade_out]:checked").length > 0); } } // Encode if (videncode.encode().has_error()) { // Error retag_regenerate_container.css("display", ""); retag_regenerate_container_error.html("Error: " + videncode.encode().get_error()); retag_download_container.css("display", "none"); retag_regenerating_container.css("display", "none"); } else { // No error retag_regenerate_container.css("display", "none"); retag_download_container.css("display", ""); retag_regenerating_container.css("display", "none"); retag_download_link.attr("download", "blob." + (videcode ? videcode.get_image_mime_type().substr(6).replace(/jpeg/ig, "jpg") : "jpg")); // Create link var url = videncode.get_url(); retag_download_link.attr("href", url); } return false; } return true; } function on_api_retag_load_in_player_click(event) { if (event.which == 1) { if (videncode != null && !videncode.has_error()) { on_api_get_data( videncode.get_data(), "blob" + (videncode.get_image_mime_type() == "image/png" ? ".png" : ( videncode.get_image_mime_type() == "image/gif" ? ".gif" : ".jpg" )) ); } return false; } return true; } function retag_validate_sync_time(time) { if (time != time || !isFinite(time)) time = 0.0; else if (time < 0.0) time = 0.0; else if (vplayer != null) { if (time + vplayer.get_min_duration() > vplayer.get_duration()) { time = vplayer.get_duration() - vplayer.get_min_duration(); } } return time; } })();