jquery.fileupload-video.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /*
  2. * jQuery File Upload Video Preview Plugin
  3. * https://github.com/blueimp/jQuery-File-Upload
  4. *
  5. * Copyright 2013, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * http://www.opensource.org/licenses/MIT
  10. */
  11. /* jshint nomen:false */
  12. /* global define, require, window, document */
  13. (function (factory) {
  14. 'use strict';
  15. if (typeof define === 'function' && define.amd) {
  16. // Register as an anonymous AMD module:
  17. define([
  18. 'jquery',
  19. 'load-image',
  20. './jquery.fileupload-process'
  21. ], factory);
  22. } else if (typeof exports === 'object') {
  23. // Node/CommonJS:
  24. factory(
  25. require('jquery'),
  26. require('load-image')
  27. );
  28. } else {
  29. // Browser globals:
  30. factory(
  31. window.jQuery,
  32. window.loadImage
  33. );
  34. }
  35. }(function ($, loadImage) {
  36. 'use strict';
  37. // Prepend to the default processQueue:
  38. $.blueimp.fileupload.prototype.options.processQueue.unshift(
  39. {
  40. action: 'loadVideo',
  41. // Use the action as prefix for the "@" options:
  42. prefix: true,
  43. fileTypes: '@',
  44. maxFileSize: '@',
  45. disabled: '@disableVideoPreview'
  46. },
  47. {
  48. action: 'setVideo',
  49. name: '@videoPreviewName',
  50. disabled: '@disableVideoPreview'
  51. }
  52. );
  53. // The File Upload Video Preview plugin extends the fileupload widget
  54. // with video preview functionality:
  55. $.widget('blueimp.fileupload', $.blueimp.fileupload, {
  56. options: {
  57. // The regular expression for the types of video files to load,
  58. // matched against the file type:
  59. loadVideoFileTypes: /^video\/.*$/
  60. },
  61. _videoElement: document.createElement('video'),
  62. processActions: {
  63. // Loads the video file given via data.files and data.index
  64. // as video element if the browser supports playing it.
  65. // Accepts the options fileTypes (regular expression)
  66. // and maxFileSize (integer) to limit the files to load:
  67. loadVideo: function (data, options) {
  68. if (options.disabled) {
  69. return data;
  70. }
  71. var file = data.files[data.index],
  72. url,
  73. video;
  74. if (this._videoElement.canPlayType &&
  75. this._videoElement.canPlayType(file.type) &&
  76. ($.type(options.maxFileSize) !== 'number' ||
  77. file.size <= options.maxFileSize) &&
  78. (!options.fileTypes ||
  79. options.fileTypes.test(file.type))) {
  80. url = loadImage.createObjectURL(file);
  81. if (url) {
  82. video = this._videoElement.cloneNode(false);
  83. video.src = url;
  84. video.controls = true;
  85. data.video = video;
  86. return data;
  87. }
  88. }
  89. return data;
  90. },
  91. // Sets the video element as a property of the file object:
  92. setVideo: function (data, options) {
  93. if (data.video && !options.disabled) {
  94. data.files[data.index][options.name || 'preview'] = data.video;
  95. }
  96. return data;
  97. }
  98. }
  99. });
  100. }));