From b757eea5afb08c1bce9a4e537657e880668165d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P=2Et?= <nicolo.paraciani@cnr.it> Date: Thu, 30 Sep 2021 12:18:44 +0200 Subject: [PATCH] iframe for Vimeo videos --- js/fara.js | 61 ++++++++++++++++++++++++++++++++++++++++-------------- js/ui.js | 10 ++++----- video.html | 14 +++++++++++-- 3 files changed, 63 insertions(+), 22 deletions(-) diff --git a/js/fara.js b/js/fara.js index 9b42af4..c4f3bf8 100644 --- a/js/fara.js +++ b/js/fara.js @@ -1,4 +1,6 @@ //use strict; +localStorage.setItem('online', true); + /** * 'Slide' background images * in landing page @@ -14,19 +16,20 @@ export function sliderBg() /*** Fade in??*/ //opacity = 1; - let images = [ - 'img/lp-bg/fara_bg_1.jpg', - 'img/lp-bg/fara_bg_2.jpg', - 'img/lp-bg/fara_bg_3.jpg', - 'img/lp-bg/fara_bg_4.jpg', - 'img/lp-bg/fara_bg_5.jpg', + let images = [ + 'img/lp-bg/fara_bg_1.jpg', + 'img/lp-bg/fara_bg_2.jpg', + 'img/lp-bg/fara_bg_3.jpg', + 'img/lp-bg/fara_bg_4.jpg', + 'img/lp-bg/fara_bg_5.jpg', ]; - - if (nextimage >= images.length) { - nextimage = 0; - } - header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");'); - setTimeout(slider, 2000); + + if (nextimage >= images.length) { + nextimage = 0; + } + + header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");'); + setTimeout(slider, 2000); } } /** @@ -52,8 +55,6 @@ export function slideshow() slideIndex = 1; } - //console.log(slides); - slides[slideIndex-1].classList.remove("hide"); slides[slideIndex-1].classList.add("show"); @@ -61,7 +62,7 @@ export function slideshow() } } /** - * @todo + * @todo Interactive SVG? * The canvas should be drawn into an overlay * container (always fullscreen) */ @@ -156,16 +157,46 @@ export function openVideo(a) .trim(); let vStr = ''; + let vimeoVids = { + 'thumb_prologo' : '478632535', + 'thumb_viaggiatore' : '562518107', + 'thumb_faresi' : '562529310', + 'thumb_piazza' : '443587380', + 'thumb_antonio' : '606341398', + 'thumb_francesco' : '471773781', + 'thumb_nobili' : '562534835', + 'thumb_rocco' : '606346781', + 'thumb_alberto' : '606372910', + 'thumb_disputa' : '471537982', + 'thumb_duomo' : '606343917', + 'thumb_loredana' : '513080769', + 'thumb_pietro' : '455576197', + 'thumb_castello' : '562536148', + 'thumb_sabini' : '542321131', + 'thumb_monumento' : '606362546', + 'thumb_eva' : '606352547', + 'thumb_toto' : '606348670', + 'thumb_fuori' : '606358668', + 'thumb_carro' : '562262086', + }; + let vimeoLink = 'https://player.vimeo.com/video/'; + aNodes.forEach(n => { if (n.src) { vStr = n.src; vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length) .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4'); + + vimeoLink += vimeoVids[n.src.substr(n.src.lastIndexOf('/')+1, n.src.length) + .replace(/\.(png|jpg)/, '')]; + + vimeoLink += '?autoplay=1'; } }); localStorage.setItem('vidURI', vStr); + localStorage.setItem('vimeo', vimeoLink); localStorage.setItem('vidTitle', title); /** * Go to video page diff --git a/js/ui.js b/js/ui.js index e22298a..79c0fe9 100644 --- a/js/ui.js +++ b/js/ui.js @@ -44,7 +44,7 @@ if (window.location.href.includes('itinerario')) { */ if (window.location.href.includes('video')) { document.addEventListener('readystatechange', () => { - let vStr = localStorage.getItem('vidURI'); + let vimeoLink = localStorage.getItem('vimeo'); let vidTitle = localStorage.getItem('vidTitle'); document.querySelector('h1').innerHTML = vidTitle; @@ -57,12 +57,12 @@ if (window.location.href.includes('video')) { window.history.go(-1); }); - let source = document.querySelector('source'); - let video = source.parentNode; + let iframe = document.querySelector('iframe'); + //let video = source.parentNode; - source.src = `assets/video/${vStr}`; + iframe.src = vimeoLink; - video.load(); + //video.load(); }); } /** diff --git a/video.html b/video.html index 027ab50..c5c36d1 100644 --- a/video.html +++ b/video.html @@ -19,10 +19,20 @@ </div> </div> <div class="container"> - <video class="video-responsive" controls autoplay> + <div class="video-responsive"> + <iframe src="" frameborder="0" allowfullscreen allow="autoplay"></iframe> + </div> + <!--https://player.vimeo.com/video/578170143?autoplay=1 + <video class="video-responsive" controls autoplay> <source src="" type="video/mp4"> Il browser non supporta i video integrati - </video> + <div style="padding:56.25% 0 0 0;position:relative;"> + <iframe src="https://player.vimeo.com/video/578170143?h=c62122f89b&autoplay=1" + style="position:absolute;top:0;left:0;width:100%;height:100%;" + frameborder="0" allow="autoplay; fullscreen; picture-in-picture" + allowfullscreen></iframe> + </div> + </video>--> </div> </div> </main>