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