123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169 |
- /*
- * 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 */
- ;(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
- })
|