/*
* blueimp Gallery 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, window, document */
;(function (factory) {
'use strict'
if (typeof define === 'function' && define.amd) {
// Register as an anonymous AMD module:
define(['./blueimp-helper', './blueimp-gallery'], factory)
} else {
// Browser globals:
factory(window.blueimp.helper || window.jQuery, window.blueimp.Gallery)
}
})(function ($, Gallery) {
'use strict'
$.extend(Gallery.prototype.options, {
// The class for video content elements:
videoContentClass: 'video-content',
// The class for video when it is loading:
videoLoadingClass: 'video-loading',
// The class for video when it is playing:
videoPlayingClass: 'video-playing',
// The list object property (or data attribute) for the video poster URL:
videoPosterProperty: 'poster',
// The list object property (or data attribute) for the video sources array:
videoSourcesProperty: 'sources'
})
var handleSlide = Gallery.prototype.handleSlide
$.extend(Gallery.prototype, {
handleSlide: function (index) {
handleSlide.call(this, index)
if (this.playingVideo) {
this.playingVideo.pause()
}
},
videoFactory: function (obj, callback, videoInterface) {
var that = this
var options = this.options
var videoContainerNode = this.elementPrototype.cloneNode(false)
var videoContainer = $(videoContainerNode)
var errorArgs = [
{
type: 'error',
target: videoContainerNode
}
]
var video = videoInterface || document.createElement('video')
var url = this.getItemProperty(obj, options.urlProperty)
var type = this.getItemProperty(obj, options.typeProperty)
var title = this.getItemProperty(obj, options.titleProperty)
var altText =
this.getItemProperty(obj, this.options.altTextProperty) || title
var posterUrl = this.getItemProperty(obj, options.videoPosterProperty)
var posterImage
var sources = this.getItemProperty(obj, options.videoSourcesProperty)
var source
var playMediaControl
var isLoading
var hasControls
videoContainer.addClass(options.videoContentClass)
if (title) {
videoContainerNode.title = title
}
if (video.canPlayType) {
if (url && type && video.canPlayType(type)) {
video.src = url
} else if (sources) {
while (sources.length) {
source = sources.shift()
url = this.getItemProperty(source, options.urlProperty)
type = this.getItemProperty(source, options.typeProperty)
if (url && type && video.canPlayType(type)) {
video.src = url
break
}
}
}
}
if (posterUrl) {
video.poster = posterUrl
posterImage = this.imagePrototype.cloneNode(false)
$(posterImage).addClass(options.toggleClass)
posterImage.src = posterUrl
posterImage.draggable = false
posterImage.alt = altText
videoContainerNode.appendChild(posterImage)
}
playMediaControl = document.createElement('a')
playMediaControl.setAttribute('target', '_blank')
if (!videoInterface) {
playMediaControl.setAttribute('download', title)
}
playMediaControl.href = url
if (video.src) {
video.controls = true
;(videoInterface || $(video))
.on('error', function () {
that.setTimeout(callback, errorArgs)
})
.on('pause', function () {
if (video.seeking) return
isLoading = false
videoContainer
.removeClass(that.options.videoLoadingClass)
.removeClass(that.options.videoPlayingClass)
if (hasControls) {
that.container.addClass(that.options.controlsClass)
}
delete that.playingVideo
if (that.interval) {
that.play()
}
})
.on('playing', function () {
isLoading = false
videoContainer
.removeClass(that.options.videoLoadingClass)
.addClass(that.options.videoPlayingClass)
if (that.container.hasClass(that.options.controlsClass)) {
hasControls = true
that.container.removeClass(that.options.controlsClass)
} else {
hasControls = false
}
})
.on('play', function () {
window.clearTimeout(that.timeout)
isLoading = true
videoContainer.addClass(that.options.videoLoadingClass)
that.playingVideo = video
})
$(playMediaControl).on('click', function (event) {
that.preventDefault(event)
if (isLoading) {
video.pause()
} else {
video.play()
}
})
videoContainerNode.appendChild(
(videoInterface && videoInterface.element) || video
)
}
videoContainerNode.appendChild(playMediaControl)
this.setTimeout(callback, [
{
type: 'load',
target: videoContainerNode
}
])
return videoContainerNode
}
})
return Gallery
})
|