blueimp-gallery-vimeo.js 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. /*
  2. * blueimp Gallery Vimeo 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, $f */
  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-video'], factory)
  17. } else {
  18. // Browser globals:
  19. factory(window.blueimp.helper || window.jQuery, window.blueimp.Gallery)
  20. }
  21. })(function ($, Gallery) {
  22. 'use strict'
  23. if (!window.postMessage) {
  24. return Gallery
  25. }
  26. $.extend(Gallery.prototype.options, {
  27. // The list object property (or data attribute) with the Vimeo video id:
  28. vimeoVideoIdProperty: 'vimeo',
  29. // The URL for the Vimeo video player, can be extended with custom parameters:
  30. // https://developer.vimeo.com/player/embedding
  31. vimeoPlayerUrl:
  32. '//player.vimeo.com/video/VIDEO_ID?api=1&player_id=PLAYER_ID',
  33. // The prefix for the Vimeo video player ID:
  34. vimeoPlayerIdPrefix: 'vimeo-player-',
  35. // Require a click on the native Vimeo player for the initial playback:
  36. vimeoClickToPlay: true
  37. })
  38. var textFactory =
  39. Gallery.prototype.textFactory || Gallery.prototype.imageFactory
  40. var VimeoPlayer = function (url, videoId, playerId, clickToPlay) {
  41. this.url = url
  42. this.videoId = videoId
  43. this.playerId = playerId
  44. this.clickToPlay = clickToPlay
  45. this.element = document.createElement('div')
  46. this.listeners = {}
  47. }
  48. var counter = 0
  49. $.extend(VimeoPlayer.prototype, {
  50. canPlayType: function () {
  51. return true
  52. },
  53. on: function (type, func) {
  54. this.listeners[type] = func
  55. return this
  56. },
  57. loadAPI: function () {
  58. var that = this
  59. var apiUrl = '//f.vimeocdn.com/js/froogaloop2.min.js'
  60. var scriptTags = document.getElementsByTagName('script')
  61. var i = scriptTags.length
  62. var scriptTag
  63. var called
  64. /**
  65. * Callback function
  66. */
  67. function callback() {
  68. if (!called && that.playOnReady) {
  69. that.play()
  70. }
  71. called = true
  72. }
  73. while (i) {
  74. i -= 1
  75. if (scriptTags[i].src === apiUrl) {
  76. scriptTag = scriptTags[i]
  77. break
  78. }
  79. }
  80. if (!scriptTag) {
  81. scriptTag = document.createElement('script')
  82. scriptTag.src = apiUrl
  83. }
  84. $(scriptTag).on('load', callback)
  85. scriptTags[0].parentNode.insertBefore(scriptTag, scriptTags[0])
  86. // Fix for cached scripts on IE 8:
  87. if (/loaded|complete/.test(scriptTag.readyState)) {
  88. callback()
  89. }
  90. },
  91. onReady: function () {
  92. var that = this
  93. this.ready = true
  94. this.player.addEvent('play', function () {
  95. that.hasPlayed = true
  96. that.onPlaying()
  97. })
  98. this.player.addEvent('pause', function () {
  99. that.onPause()
  100. })
  101. this.player.addEvent('finish', function () {
  102. that.onPause()
  103. })
  104. if (this.playOnReady) {
  105. this.play()
  106. }
  107. },
  108. onPlaying: function () {
  109. if (this.playStatus < 2) {
  110. this.listeners.playing()
  111. this.playStatus = 2
  112. }
  113. },
  114. onPause: function () {
  115. this.listeners.pause()
  116. delete this.playStatus
  117. },
  118. insertIframe: function () {
  119. var iframe = document.createElement('iframe')
  120. iframe.src = this.url
  121. .replace('VIDEO_ID', this.videoId)
  122. .replace('PLAYER_ID', this.playerId)
  123. iframe.id = this.playerId
  124. this.element.parentNode.replaceChild(iframe, this.element)
  125. this.element = iframe
  126. },
  127. play: function () {
  128. var that = this
  129. if (!this.playStatus) {
  130. this.listeners.play()
  131. this.playStatus = 1
  132. }
  133. if (this.ready) {
  134. if (
  135. !this.hasPlayed &&
  136. (this.clickToPlay ||
  137. (window.navigator &&
  138. /iP(hone|od|ad)/.test(window.navigator.platform)))
  139. ) {
  140. // Manually trigger the playing callback if clickToPlay
  141. // is enabled and to workaround a limitation in iOS,
  142. // which requires synchronous user interaction to start
  143. // the video playback:
  144. this.onPlaying()
  145. } else {
  146. this.player.api('play')
  147. }
  148. } else {
  149. this.playOnReady = true
  150. if (!window.$f) {
  151. this.loadAPI()
  152. } else if (!this.player) {
  153. this.insertIframe()
  154. this.player = $f(this.element)
  155. this.player.addEvent('ready', function () {
  156. that.onReady()
  157. })
  158. }
  159. }
  160. },
  161. pause: function () {
  162. if (this.ready) {
  163. this.player.api('pause')
  164. } else if (this.playStatus) {
  165. delete this.playOnReady
  166. this.listeners.pause()
  167. delete this.playStatus
  168. }
  169. }
  170. })
  171. $.extend(Gallery.prototype, {
  172. VimeoPlayer: VimeoPlayer,
  173. textFactory: function (obj, callback) {
  174. var options = this.options
  175. var videoId = this.getItemProperty(obj, options.vimeoVideoIdProperty)
  176. if (videoId) {
  177. if (this.getItemProperty(obj, options.urlProperty) === undefined) {
  178. obj[options.urlProperty] = '//vimeo.com/' + videoId
  179. }
  180. counter += 1
  181. return this.videoFactory(
  182. obj,
  183. callback,
  184. new VimeoPlayer(
  185. options.vimeoPlayerUrl,
  186. videoId,
  187. options.vimeoPlayerIdPrefix + counter,
  188. options.vimeoClickToPlay
  189. )
  190. )
  191. }
  192. return textFactory.call(this, obj, callback)
  193. }
  194. })
  195. return Gallery
  196. })