Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

 > Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS - [Tuto] Vidéo HTML5 en fond d'écran responsive
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] Vidéo HTML5 en fond d'écran responsive
 Répondre Répondre Page  12>
Auteur
Message
  Sujet Recherche Sujet Recherche  Options des sujets Options des sujets
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada QC
Status: Inactif
Points: 4521 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] Vidéo HTML5 en fond d'écran responsive
    Envoyé : 29 Juil 2016 à 18:08
Préalable: Vous devez disposer de deux fichiers vidéo mp4 et webm ainsi que d'une photo alternative.

Étape 1 - La vidéo

Téléchargez vos fichiers vidéo et photo alternative sur votre hébergement dans \Files\Image et Files\Video.

Étape 2 - Ajouter le code HTML suivant et position header et mettre le bon nom de fichier vidéo
<video muted playsinline autoplay poster="\Files\Image\MonVideo.jpg" id="bgvid" loop style="min-height: 100vh; min-width:100vw;">
<source src="\Files\Video\MonVideo.mp4" type="video/mp4">
<source src="\Files\Video\MonVideo.webm" type="video/webm">
</video>
Notes:
  • Remplacez \Files\Image\MonVideo.jpg,  Files\Video\MonVideo.mp4 et Files\Video\MonVideo.webm par vos propres fichiers.
  • Le fichier MonVideo.jpg est nécessaire pour certains fureteurs qui ne reconnaissent pas HTML5.  Mon vieux Android et mon Ipad n'affichent pas la vidéo cependant ils affichent la photo.

Étape 3 - Ajouter le bloc de code CSS suivant en position header
video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-size: contain; 
}

Étape 4 - Ajouter un élément cliquable appelé WEMutedVideo

Étape 5 - Ajouter le code Javascript suivant en position endbody

$("#WEMuteVideo").click( 
	function (){
		if( $("video").prop('muted') ) {
			$("video").prop('muted', false);
			$(".muting").text("Silence / Mute") // facultafif pour changer l'affichage de l'élément cliquable
		} else {
			$("video").prop('muted', true);
			$(".muting").text("Son / Sound") // facultafif pour changer l'affichage de l'élément cliquable
		}
	}
);
Étape 6 - Ajouter un contrôle de volume à glissière horizontale

Ajoutez un bloc de code visuel HTML et mettez-y le code suivant
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
Ajoutez ce qui suit au bloc de code javascript

function SetVolume(val){
	var player = document.getElementById('bgvid');
	console.log('Before: ' + player.volume);
	player.volume = val / 100;
	console.log('After: ' + player.volume);
}

Demo

Notes:


Première version, 2016-07-29, 12:09
Révisé, 2016-07-29, 15:09
Révisé, 2016-07-30, 07:35 - note sur Ipad ajoutée
Révisé, 2016-07-30, vidéo et image remplacées
Révisé, 2016-10-14, vidéo silencieux avec bouton pour le son
Révisé, 2016-11-06, Ajout d'un contrôle de volume
Révisé, 2017-01-05, ajout de vidéo webm pour Apple
 




Edité par Hobby001 - 31 Jan 2017 à 14:42
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada QC
Status: Inactif
Points: 4521 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 29 Juil 2016 à 21:07
Édition de la portion HTML et de la note sur la photo:  

note: le fichier mov_bbb.jpg est nécessaire pour certains fureteurs qui ne reconnaissent pas HTML5.  Mon vieux Android n'affiche pas la vidéo cependant il affiche la photo.

<video playsinline autoplay poster="\Files\Image\mov_bbb.jpg" id="bgvid" loop style="min-height: 100vh; min-width:100vw;">
    <source src="\Files\Video\mov_bbb.mp4" type="video/mp4">
</video>


Edité par Hobby001 - 14 Oct 2016 à 17:18
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4531 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Juil 2016 à 09:20
Elle ne marche pas la demo :)
Les Billets d'une Bobonne Bougonne Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 9310 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Juil 2016 à 09:25
elle marche bien chez moi Wink
sensode
Ma biographie
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4531 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Juil 2016 à 10:22
Bizarre, rien ne vient sur cyberfox, une imageet un peu de son  sur chrome et toute la video sur edge...

Edit : ça a fini par venir sur chrome mais nada sur cyberfox...


Edité par Bridet - 30 Juil 2016 à 10:24
Les Billets d'une Bobonne Bougonne Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada QC
Status: Inactif
Points: 4521 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Juil 2016 à 13:23
Message posté par Bridet Bridet a écrit:

Bizarre, rien ne vient sur cyberfox, une imageet un peu de son  sur chrome et toute la video sur edge...

Edit : ça a fini par venir sur chrome mais nada sur cyberfox...

Curieux, de chez moi ça fonctionne sur Chrome, Firefox, Vivaldi, Opera, IE et Edge.   Confused
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2078 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Juil 2016 à 13:30
Merci Hobby001, Thumbs Up

ça peut être très utile pour beaucoup ! Sick
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada QC
Status: Inactif
Points: 4521 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Juil 2016 à 13:37
Si quelqu'un peut me dire si ça roule sur un Mac, j'apprécierais.

Merci
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada QC
Status: Inactif
Points: 4521 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 30 Juil 2016 à 19:42
Message posté par Bridet Bridet a écrit:

Bizarre, rien ne vient sur cyberfox, une imageet un peu de son  sur chrome et toute la video sur edge...

Edit : ça a fini par venir sur chrome mais nada sur cyberfox...

@ Bridet, Faites un essai avec le démo au bas de la page sur ce site:  http://www.webmfiles.org/demo-files/


Edité par Hobby001 - 30 Juil 2016 à 19:43
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4531 		Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 31 Juil 2016 à 08:47
Oui ça marche mais toujours pas sur ta page (le reste comme Vegas, ça marche).
Bizarre!
Les Billets d'une Bobonne Bougonne Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne