|
35 | 35 | #video-rel-pos { display: table-cell; position: relative; height: 100%; width: 100%; } |
36 | 36 | #video-rel-pos > div { display: inline-block !important; } |
37 | 37 | #video { |
38 | | - display: inline-block; opacity: 0 |
| 38 | + display: inline-block !important; opacity: 0; |
39 | 39 | } |
40 | 40 | #video_html5_api { width: 100% } |
41 | 41 | #images div img { |
|
52 | 52 | ul { |
53 | 53 | list-style-type: none; |
54 | 54 | } |
| 55 | + |
| 56 | + /* filters */ |
| 57 | + .grayscale { |
| 58 | + -webkit-filter: grayscale(1); |
| 59 | + filter: grayscale(1); |
| 60 | + } |
| 61 | + .sepia { |
| 62 | + -webkit-filter: sepia(1); |
| 63 | + filter: sepia(1); |
| 64 | + } |
| 65 | + .tint { |
| 66 | + -webkit-filter: sepia(1) hue-rotate(200deg); |
| 67 | + filter: sepia(1) hue-rotate(200deg); |
| 68 | + } |
| 69 | + .washed { |
| 70 | + -webkit-filter: contrast(1.4) saturate(1.8) sepia(.6); |
| 71 | + filter: contrast(1.4) saturate(1.8) sepia(.6); |
| 72 | + } |
| 73 | + |
| 74 | + |
55 | 75 | </style> |
56 | 76 | </head> |
57 | 77 | <body> |
58 | 78 | <div id="images"></div> |
59 | 79 | <div id="video-pos"> |
60 | 80 | <div id="video-rel-pos"> |
61 | | - <video id="video"></video> |
| 81 | + <video id="video"> |
| 82 | + <source src="" type="video/mp4" /> |
| 83 | + </video> |
| 84 | + <div id="replay-label" style="vertical-align: top; opacity:0; text-shadow: 0px 0px 2px black; position: absolute; font-family: 'Roboto Condensed', sans; color: red; font-weight: bold; text-transform: uppercase; margin-top: 5px; margin-left: -90px; width: 100%; text-align: left;"><i class="fa fa-circle" style="position:relative; top: -3px;" aria-hidden="true"></i> |
| 85 | + <span style="font-size:20px">REPLAY</span> |
| 86 | + </div> |
62 | 87 | </div> |
63 | 88 | </div> |
64 | 89 |
|
65 | 90 | <script src="/dist/jquery/js/jquery.min.js"></script> |
66 | 91 | <script src="/dist/lodash/js/lodash.min.js"></script> |
67 | 92 | <script src="/dist/velocity-animate/js/velocity.min.js"></script> |
68 | | - <script src="/dist/video.js/js/video.js"></script> |
69 | 93 |
|
70 | 94 | <script> |
71 | 95 | var socket = io({query: "token="+token}); |
|
245 | 269 | } |
246 | 270 | video.volume = _.isNil(video.volume) ? 1 : parseInt(video.volume, 10) / 100 |
247 | 271 | video.delay = _.isNil(video.delay) ? 0 : parseInt(video.delay, 10) |
| 272 | + video.class = _.isNil(video.class) ? 'video' : video.class |
248 | 273 |
|
249 | 274 | let style = '' |
250 | 275 | switch (video.position) { |
|
286 | 311 | style += ';top:' + video['y-offset'] + 'px' |
287 | 312 | } |
288 | 313 |
|
289 | | - var vjs = videojs('video', { |
290 | | - controls: false, |
291 | | - autoplay: false, |
292 | | - preload: 'auto' |
293 | | - }) |
| 314 | + $('video source').attr('src', video.url) |
| 315 | + $('video')[0].load() |
294 | 316 |
|
295 | | - if (!_.isNil(video.size)) vjs.width(video.size) |
| 317 | + function checkLoad() { |
| 318 | + if ($('video')[0].readyState === 4) { |
| 319 | + $('video').prop("volume", video.volume) |
| 320 | + $('video').attr("width", video.size) |
296 | 321 |
|
297 | | - vjs.src(video.url) |
298 | | - vjs.ready(function() { |
299 | | - $('#replay-label').remove() |
300 | | - if (video.label === 'true') { |
301 | | - var label = $('<div id="replay-label" style="opacity:0; text-shadow: 0px 0px 2px black; position: relative; top:30px; left:-20px; font-family: \'Roboto Condensed\', sans; color: red; font-weight: bold; text-transform: uppercase; float:right"><i class="fa fa-circle" style="position:relative; top: -3px; aria-hidden="true"></i> <span style="font-size:20px">REPLAY</span></div>') |
302 | | - label.velocity("fadeIn", { loop: true, duration: 1000 }); |
303 | | - $('#video').prepend(label) |
304 | | - } |
| 322 | + if (!_.isNil(video.filter)) { |
| 323 | + $('video').addClass(video.filter) |
| 324 | + } |
305 | 325 |
|
306 | | - vjs.volume(video.volume) |
| 326 | + $('video').addClass(video.class) |
307 | 327 |
|
308 | | - $('#video-rel-pos').attr('style', style) |
| 328 | + if (video.label === 'true') { |
| 329 | + $('#replay-label').velocity("fadeIn", { loop: true, duration: 1000 }); |
| 330 | + } else { |
| 331 | + $('#replay-label').css('opacity', 0) |
| 332 | + } |
309 | 333 |
|
310 | | - if (video.delay === 0) { |
311 | | - vjs.play() |
312 | | - $('#video').velocity("fadeIn", { duration: video.duration }) |
313 | | - } else { |
314 | | - setTimeout(function () { |
315 | | - vjs.play() |
| 334 | + $('#video-rel-pos').attr('style', style) |
| 335 | + |
| 336 | + if (video.delay === 0) { |
| 337 | + $('video').trigger('play') |
316 | 338 | $('#video').velocity("fadeIn", { duration: video.duration }) |
317 | | - }, video.delay) |
| 339 | + } else { |
| 340 | + setTimeout(function () { |
| 341 | + $('video').trigger('play') |
| 342 | + $('#video').velocity("fadeIn", { duration: video.duration }) |
| 343 | + }, video.delay) |
| 344 | + } |
| 345 | + $("#video").bind("ended", function() { |
| 346 | + $("#replay-label").velocity("stop"); |
| 347 | + $('#replay-label').velocity("fadeOut", { duration: video.duration }); |
| 348 | + $('#video').velocity("fadeOut", { duration: video.duration, complete: function(e) { |
| 349 | + alertsQueue[id].finished++ |
| 350 | + $('video').removeClass(video.class) |
| 351 | + if (!_.isNil(video.filter)) { |
| 352 | + $('video').removeClass(video.filter) |
| 353 | + } |
| 354 | + }}) |
| 355 | + }); |
| 356 | + } else { |
| 357 | + setTimeout(checkLoad, 100); |
318 | 358 | } |
319 | | - }) |
| 359 | + } |
320 | 360 |
|
321 | | - vjs.on('ended', function() { |
322 | | - $('#video').velocity("fadeOut", { duration: video.duration, complete: function(e) { |
323 | | - alertsQueue[id].finished++ |
324 | | - }}) |
325 | | - }) |
| 361 | + checkLoad() |
326 | 362 | } |
327 | 363 |
|
328 | 364 | </script> |
|
0 commit comments