video visualizzabile una sola volta

**neo1976** · 01-06-2017, 17:39

Originariamente inviata da _Marco_87

devi solo comandare il filmato con javascript e dire 'se il cookie ha questo valore allora non mandare il filmato'.

Marco per me è arabo...

**neo1976** · 01-06-2017, 18:19

conosco l'html5, css3, e quasi zero javascript....

**lucavizzi** · 01-06-2017, 19:28

@neo1976
Posta un link alla pagina in questione

**neo1976** · 01-06-2017, 20:50

Ciao luca il sito non è ancora online, ci sto lavorando su tramite easyphp.

p.s. ho visto la tua pagina web, molto bella complimenti, pulita, senza tanti fronzoli inutili ma nel contempo originale.

**lucavizzi** · 02-06-2017, 11:29

Originariamente inviata da neo1976

Ciao luca il sito non è ancora online, ci sto lavorando su tramite easyphp.

p.s. ho visto la tua pagina web, molto bella complimenti, pulita, senza tanti fronzoli inutili ma nel contempo originale.

Grazie, è molto vecchia in realtà...

Posta la parte di codice relativa al video e la funzione che usi per rimuoverlo in dissolvenza.

**neo1976** · 02-06-2017, 17:17

ecco la parte riguardate il video.... css,javascript e html5:
la parte css:

codice:

<style>
#video-bg {z-index:-1;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
  }
  #video-bg > video {z-index:-1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {z-index: 1000;
    #video-bg > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  




@supports (object-fit: cover) {
    #video-bg > video {z-index:-1;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
  }


</style>

<script type="text/javascript" src="index/dissolvenza/jquery-1.8.3.js"></script>
<script type="text/javascript" src="index/dissolvenza/dissolvenza.js"></script>

la parte nel body:

codice HTML:

<div class="fullscreen-bg"><div id="video-bg">        <video   autoplay>            <source src="../0/video/giardini/giardini.mp4" type="video/mp4">            <source src="../0/video/giardini/giardini.ogv" type="video/ogg">            <source src="../0/video/giardini/giardini.webm" type="video/webm">        </video>    </div>     </div>

la parte javascript per la dissolvenza file dissolvenza.js:

codice:

$(window).load(function(){
$("video").bind('ended', function(){
    console.log("video ended");
    $("video").fadeOut(2000,function(){
        $("video").remove();
    });
});
});

**ciro78** · 02-06-2017, 18:13

io vorrei ricordare a tutti che il forum, almeno questa sezione, non dovrebbe essere il luogo dove ci si fa fare il lavoro dagli altri.

**lucavizzi** · 02-06-2017, 19:27

Breve premessa:
Un cookie non è altro che un file di testo che può essere salvato, dallo sviluppatore, all'interno del browser dell'utente.
Di solito viene utilizzato per salvare delle informazioni che resteranno a disposizione del software nelle sessioni successive, anche dopo la chiusura del browser.

Per l'implementazione ho usato il localStorage (introdotto con HTML5) e non i cookies.
Il funzionamento è analogo. Come per i cookies serve ad immagazzinare informazioni che resteranno disponibili anche dopo la chiusura del browser.
Il localStorage è di più facile gestione rispetto ai cookies e non richiede l'implementazione di funzioni per salvare un valore e per leggerlo.

Per le operazioni di scrittura si usa la funzione nativa setItem()

codice:

 
localStorage.setItem( "il_video_è_stato_già_visto" , "sì" );

Per le operazioni di lettura si usa la funzione getItem()

codice:

var visto=localStorage.getItem("il_video_è_stato_già_visto");

Il codice:

In questa prima versione il video viene rimosso dal documento HTML se l'utente lo ha già visto.
Nota che il tag "video" non ha più l'attributo "autoplay".

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
	if(localStorage.getItem("seen")==null){
		$('video').get(0).play();
		localStorage.setItem("seen","yes");
	}else{
		$("video").remove();
	}
});
</script>
</head>


<body>
<div class="fullscreen-bg">
   <div id="video-bg">
      <video>
         <source src="Clip_1080_5sec_10mbps_h264.mp4" type="video/mp4">
         <source src="../0/video/giardini/giardini.ogv" type="video/ogg">
         <source src="../0/video/giardini/giardini.webm" type="video/webm">
      </video>
   </div>
</div>
</body>
</html>

In questa seconda versione il video resta nel documento HTML, anche se non parte in automatico.
Nota che anche in questo caso manca l'attributo "autoplay" ed è stato aggiunto l'attributo "controls" di modo che l'utente possa avviare il video se lo desidera.

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
	if(localStorage.getItem("seen")==null){
		$('video').get(0).play();
		localStorage.setItem("seen","yes");
	}
});


</script>
</head>


<body>
<div class="fullscreen-bg">
   <div id="video-bg">
      <video controls>
         <source src="Clip_1080_5sec_10mbps_h264.mp4" type="video/mp4">
         <source src="../0/video/giardini/giardini.ogv" type="video/ogg">
         <source src="../0/video/giardini/giardini.webm" type="video/webm">
      </video>
   </div>
</div>
</body>
</html>

**neo1976** · 02-06-2017, 20:08

grazie luca, sei stato gentilissimo, ma io ho bisogno che il video parta in automatico, con questa tipologia non si può aggiungere l'attributo "autoplay"?

**lucavizzi** · 02-06-2017, 20:15

Originariamente inviata da neo1976

grazie luca, sei stato gentilissimo, ma io ho bisogno che il video parta in automatico, con questa tipologia non si può aggiungere l'attributo "autoplay"?

Partirà in automatico, solo agli utenti che non l'hanno ancora visto.

Discussione: video visualizzabile una sola volta

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio