blueimp-gallery-video.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. /*
  2. * blueimp Gallery Video Factory JS
  3. * https://github.com/blueimp/Gallery
  4. *
  5. * Copyright 2013, Sebastian Tschan
  6. * https://blueimp.net
  7. *
  8. * Licensed under the MIT license:
  9. * https://opensource.org/licenses/MIT
  10. */
  11. /* global define */
  12. ;(function (factory) {
  13. 'use strict'
  14. if (typeof define === 'function' && define.amd) {
  15. // Register as an anonymous AMD module:
  16. define(['./blueimp-helper', './blueimp-gallery'], factory)
  17. } else {
  18. // Browser globals:
  19. factory(window.blueimp.helper || window.jQuery, window.blueimp.Gallery)
  20. }
  21. })(function ($, Gallery) {
  22. 'use strict'
  23. $.extend(Gallery.prototype.options, {
  24. // The class for video content elements:
  25. videoContentClass: 'video-content',
  26. // The class for video when it is loading:
  27. videoLoadingClass: 'video-loading',
  28. // The class for video when it is playing:
  29. videoPlayingClass: 'video-playing',
  30. // The list object property (or data attribute) for the video poster URL:
  31. videoPosterProperty: 'poster',
  32. // The list object property (or data attribute) for the video sources array:
  33. videoSourcesProperty: 'sources'
  34. })
  35. var handleSlide = Gallery.prototype.handleSlide
  36. $.extend(Gallery.prototype, {
  37. handleSlide: function (index) {
  38. handleSlide.call(this, index)
  39. if (this.playingVideo) {
  40. this.playingVideo.pause()
  41. }
  42. },
  43. videoFactory: function (obj, callback, videoInterface) {
  44. var that = this
  45. var options = this.options
  46. var videoContainerNode = this.elementPrototype.cloneNode(false)
  47. var videoContainer = $(videoContainerNode)
  48. var errorArgs = [
  49. {
  50. type: 'error',
  51. target: videoContainerNode
  52. }
  53. ]
  54. var video = videoInterface || document.createElement('video')
  55. var url = this.getItemProperty(obj, options.urlProperty)
  56. var type = this.getItemProperty(obj, options.typeProperty)
  57. var title = this.getItemProperty(obj, options.titleProperty)
  58. var altText =
  59. this.getItemProperty(obj, this.options.altTextProperty) || title
  60. var posterUrl = this.getItemProperty(obj, options.videoPosterProperty)
  61. var posterImage
  62. var sources = this.getItemProperty(obj, options.videoSourcesProperty)
  63. var source
  64. var playMediaControl
  65. var isLoading
  66. var hasControls
  67. videoContainer.addClass(options.videoContentClass)
  68. if (title) {
  69. videoContainerNode.title = title
  70. }
  71. if (video.canPlayType) {
  72. if (url && type && video.canPlayType(type)) {
  73. video.src = url
  74. } else if (sources) {
  75. while (sources.length) {
  76. source = sources.shift()
  77. url = this.getItemProperty(source, options.urlProperty)
  78. type = this.getItemProperty(source, options.typeProperty)
  79. if (url && type && video.canPlayType(type)) {
  80. video.src = url
  81. break
  82. }
  83. }
  84. }
  85. }
  86. if (posterUrl) {
  87. video.poster = posterUrl
  88. posterImage = this.imagePrototype.cloneNode(false)
  89. $(posterImage).addClass(options.toggleClass)
  90. posterImage.src = posterUrl
  91. posterImage.draggable = false
  92. posterImage.alt = altText
  93. videoContainerNode.appendChild(posterImage)
  94. }
  95. playMediaControl = document.createElement('a')
  96. playMediaControl.setAttribute('target', '_blank')
  97. if (!videoInterface) {
  98. playMediaControl.setAttribute('download', title)
  99. }
  100. playMediaControl.href = url
  101. if (video.src) {
  102. video.controls = true
  103. ;(videoInterface || $(video))
  104. .on('error', function () {
  105. that.setTimeout(callback, errorArgs)
  106. })
  107. .on('pause', function () {
  108. if (video.seeking) return
  109. isLoading = false
  110. videoContainer
  111. .removeClass(that.options.videoLoadingClass)
  112. .removeClass(that.options.videoPlayingClass)
  113. if (hasControls) {
  114. that.container.addClass(that.options.controlsClass)
  115. }
  116. delete that.playingVideo
  117. if (that.interval) {
  118. that.play()
  119. }
  120. })
  121. .on('playing', function () {
  122. isLoading = false
  123. videoContainer
  124. .removeClass(that.options.videoLoadingClass)
  125. .addClass(that.options.videoPlayingClass)
  126. if (that.container.hasClass(that.options.controlsClass)) {
  127. hasControls = true
  128. that.container.removeClass(that.options.controlsClass)
  129. } else {
  130. hasControls = false
  131. }
  132. })
  133. .on('play', function () {
  134. window.clearTimeout(that.timeout)
  135. isLoading = true
  136. videoContainer.addClass(that.options.videoLoadingClass)
  137. that.playingVideo = video
  138. })
  139. $(playMediaControl).on('click', function (event) {
  140. that.preventDefault(event)
  141. if (isLoading) {
  142. video.pause()
  143. } else {
  144. video.play()
  145. }
  146. })
  147. videoContainerNode.appendChild(
  148. (videoInterface && videoInterface.element) || video
  149. )
  150. }
  151. videoContainerNode.appendChild(playMediaControl)
  152. this.setTimeout(callback, [
  153. {
  154. type: 'load',
  155. target: videoContainerNode
  156. }
  157. ])
  158. return videoContainerNode
  159. }
  160. })
  161. return Gallery
  162. })