123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213 |
- /*
- * blueimp Gallery Vimeo Video Factory JS
- * https://github.com/blueimp/Gallery
- *
- * Copyright 2013, Sebastian Tschan
- * https://blueimp.net
- *
- * Licensed under the MIT license:
- * https://opensource.org/licenses/MIT
- */
- /* global define, $f */
- ;(function (factory) {
- 'use strict'
- if (typeof define === 'function' && define.amd) {
- // Register as an anonymous AMD module:
- define(['./blueimp-helper', './blueimp-gallery-video'], factory)
- } else {
- // Browser globals:
- factory(window.blueimp.helper || window.jQuery, window.blueimp.Gallery)
- }
- })(function ($, Gallery) {
- 'use strict'
- if (!window.postMessage) {
- return Gallery
- }
- $.extend(Gallery.prototype.options, {
- // The list object property (or data attribute) with the Vimeo video id:
- vimeoVideoIdProperty: 'vimeo',
- // The URL for the Vimeo video player, can be extended with custom parameters:
- // https://developer.vimeo.com/player/embedding
- vimeoPlayerUrl:
- '//player.vimeo.com/video/VIDEO_ID?api=1&player_id=PLAYER_ID',
- // The prefix for the Vimeo video player ID:
- vimeoPlayerIdPrefix: 'vimeo-player-',
- // Require a click on the native Vimeo player for the initial playback:
- vimeoClickToPlay: true
- })
- var textFactory =
- Gallery.prototype.textFactory || Gallery.prototype.imageFactory
- var VimeoPlayer = function (url, videoId, playerId, clickToPlay) {
- this.url = url
- this.videoId = videoId
- this.playerId = playerId
- this.clickToPlay = clickToPlay
- this.element = document.createElement('div')
- this.listeners = {}
- }
- var counter = 0
- $.extend(VimeoPlayer.prototype, {
- canPlayType: function () {
- return true
- },
- on: function (type, func) {
- this.listeners[type] = func
- return this
- },
- loadAPI: function () {
- var that = this
- var apiUrl = '//f.vimeocdn.com/js/froogaloop2.min.js'
- var scriptTags = document.getElementsByTagName('script')
- var i = scriptTags.length
- var scriptTag
- var called
- /**
- * Callback function
- */
- function callback() {
- if (!called && that.playOnReady) {
- that.play()
- }
- called = true
- }
- while (i) {
- i -= 1
- if (scriptTags[i].src === apiUrl) {
- scriptTag = scriptTags[i]
- break
- }
- }
- if (!scriptTag) {
- scriptTag = document.createElement('script')
- scriptTag.src = apiUrl
- }
- $(scriptTag).on('load', callback)
- scriptTags[0].parentNode.insertBefore(scriptTag, scriptTags[0])
- // Fix for cached scripts on IE 8:
- if (/loaded|complete/.test(scriptTag.readyState)) {
- callback()
- }
- },
- onReady: function () {
- var that = this
- this.ready = true
- this.player.addEvent('play', function () {
- that.hasPlayed = true
- that.onPlaying()
- })
- this.player.addEvent('pause', function () {
- that.onPause()
- })
- this.player.addEvent('finish', function () {
- that.onPause()
- })
- if (this.playOnReady) {
- this.play()
- }
- },
- onPlaying: function () {
- if (this.playStatus < 2) {
- this.listeners.playing()
- this.playStatus = 2
- }
- },
- onPause: function () {
- this.listeners.pause()
- delete this.playStatus
- },
- insertIframe: function () {
- var iframe = document.createElement('iframe')
- iframe.src = this.url
- .replace('VIDEO_ID', this.videoId)
- .replace('PLAYER_ID', this.playerId)
- iframe.id = this.playerId
- this.element.parentNode.replaceChild(iframe, this.element)
- this.element = iframe
- },
- play: function () {
- var that = this
- if (!this.playStatus) {
- this.listeners.play()
- this.playStatus = 1
- }
- if (this.ready) {
- if (
- !this.hasPlayed &&
- (this.clickToPlay ||
- (window.navigator &&
- /iP(hone|od|ad)/.test(window.navigator.platform)))
- ) {
- // Manually trigger the playing callback if clickToPlay
- // is enabled and to workaround a limitation in iOS,
- // which requires synchronous user interaction to start
- // the video playback:
- this.onPlaying()
- } else {
- this.player.api('play')
- }
- } else {
- this.playOnReady = true
- if (!window.$f) {
- this.loadAPI()
- } else if (!this.player) {
- this.insertIframe()
- this.player = $f(this.element)
- this.player.addEvent('ready', function () {
- that.onReady()
- })
- }
- }
- },
- pause: function () {
- if (this.ready) {
- this.player.api('pause')
- } else if (this.playStatus) {
- delete this.playOnReady
- this.listeners.pause()
- delete this.playStatus
- }
- }
- })
- $.extend(Gallery.prototype, {
- VimeoPlayer: VimeoPlayer,
- textFactory: function (obj, callback) {
- var options = this.options
- var videoId = this.getItemProperty(obj, options.vimeoVideoIdProperty)
- if (videoId) {
- if (this.getItemProperty(obj, options.urlProperty) === undefined) {
- obj[options.urlProperty] = '//vimeo.com/' + videoId
- }
- counter += 1
- return this.videoFactory(
- obj,
- callback,
- new VimeoPlayer(
- options.vimeoPlayerUrl,
- videoId,
- options.vimeoPlayerIdPrefix + counter,
- options.vimeoClickToPlay
- )
- )
- }
- return textFactory.call(this, obj, callback)
- }
- })
- return Gallery
- })
|