nicolo/fara-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

iframe for Vimeo videos

Browse Source
This commit is contained in:
Nicolò P.t 2021-09-30 12:18:44 +02:00
parent 2ce1978327
commit b757eea5af
3 changed files with 63 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
js/fara.js
View File

@ -1,4 +1,6 @@
//use strict; //use strict;
localStorage.setItem('online', true);
/** /**
* 'Slide' background images * 'Slide' background images
* in landing page * in landing page
@ -14,19 +16,20 @@ export function sliderBg()
/*** Fade in??*/ /*** Fade in??*/
//opacity = 1; //opacity = 1;
let images = [ let images = [
'img/lp-bg/fara_bg_1.jpg', 'img/lp-bg/fara_bg_1.jpg',
'img/lp-bg/fara_bg_2.jpg', 'img/lp-bg/fara_bg_2.jpg',
'img/lp-bg/fara_bg_3.jpg', 'img/lp-bg/fara_bg_3.jpg',
'img/lp-bg/fara_bg_4.jpg', 'img/lp-bg/fara_bg_4.jpg',
'img/lp-bg/fara_bg_5.jpg', 'img/lp-bg/fara_bg_5.jpg',
]; ];
if (nextimage >= images.length) { if (nextimage >= images.length) {
nextimage = 0; nextimage = 0;
} }
header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
setTimeout(slider, 2000); header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
setTimeout(slider, 2000);
} }
} }
/** /**
@ -52,8 +55,6 @@ export function slideshow()
slideIndex = 1; slideIndex = 1;
} }
//console.log(slides);
slides[slideIndex-1].classList.remove("hide"); slides[slideIndex-1].classList.remove("hide");
slides[slideIndex-1].classList.add("show"); 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 * The canvas should be drawn into an overlay
* container (always fullscreen) * container (always fullscreen)
*/ */
@ -156,16 +157,46 @@ export function openVideo(a)
.trim(); .trim();
let vStr = ''; 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 => { aNodes.forEach(n => {
if (n.src) { if (n.src) {
vStr = n.src; vStr = n.src;
vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length) vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4'); .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('vidURI', vStr);
localStorage.setItem('vimeo', vimeoLink);
localStorage.setItem('vidTitle', title); localStorage.setItem('vidTitle', title);
/** /**
* Go to video page * Go to video page

10
js/ui.js
View File

@ -44,7 +44,7 @@ if (window.location.href.includes('itinerario')) {
*/ */
if (window.location.href.includes('video')) { if (window.location.href.includes('video')) {
document.addEventListener('readystatechange', () => { document.addEventListener('readystatechange', () => {
let vStr = localStorage.getItem('vidURI'); let vimeoLink = localStorage.getItem('vimeo');
let vidTitle = localStorage.getItem('vidTitle'); let vidTitle = localStorage.getItem('vidTitle');
document.querySelector('h1').innerHTML = vidTitle; document.querySelector('h1').innerHTML = vidTitle;
@ -57,12 +57,12 @@ if (window.location.href.includes('video')) {
window.history.go(-1); window.history.go(-1);
}); });
let source = document.querySelector('source'); let iframe = document.querySelector('iframe');
let video = source.parentNode; //let video = source.parentNode;
source.src = `assets/video/${vStr}`; iframe.src = vimeoLink;
video.load(); //video.load();
}); });
} }
/** /**

14
video.html
View File

@ -19,10 +19,20 @@
</div> </div>
</div> </div>
<div class="container"> <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"> <source src="" type="video/mp4">
Il browser non supporta i video integrati 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>
</div> </div>
</main> </main>