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;
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

10
js/ui.js
View File

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

14
video.html
View File

@ -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>