Imprimer la Page | Close Window

[Tuto] Vidéo HTML5 en fond d'écran responsive

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=22190
Date: 23 Juil 2019 à 22:07
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: [Tuto] Vidéo HTML5 en fond d'écran responsive
Posté par: Hobby001
Sujet: [Tuto] Vidéo HTML5 en fond d'écran responsive
Posté le: 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);
}

http://www.essais.denlaf.com/Pages/Video-arriere-plan.htm" rel="nofollow - Demo

Notes:

  • les instructions de base proviennent de: http:// thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video" rel="nofollow -   http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video" rel="nofollow - http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video
  • La politique de Apple en matière de vidéo en mode "Autoplay" est claire, pas de son sinon on ne joue pas.  J'ai donc mis la vidéo en mode "Muted" et ajouté un élément cliquable permettant d'entendre le son.

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
 




-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/



Réponses:
Posté par: Hobby001
Posté le: 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>


-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/


Posté par: Bridet
Posté le: 30 Juil 2016 à 09:20
Elle ne marche pas la demo :)


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be


Posté par: brolysan
Posté le: 30 Juil 2016 à 09:25
elle marche bien chez moi Wink

-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: Bridet
Posté le: 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...


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be


Posté par: Hobby001
Posté le: 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/


Posté par: Maurice306
Posté le: 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 !!!


Posté par: Hobby001
Posté le: 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/


Posté par: Hobby001
Posté le: 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/" rel="nofollow - http://www.webmfiles.org/demo-files/


-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/


Posté par: Bridet
Posté le: 31 Juil 2016 à 08:47
Oui ça marche mais toujours pas sur ta page (le reste comme Vegas, ça marche).
Bizarre!


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be


Posté par: Hobby001
Posté le: 31 Juil 2016 à 14:06
Message posté par Bridet Bridet a écrit:

Oui ça marche mais toujours pas sur ta page (le reste comme Vegas, ça marche).
Bizarre!

Je me creuse la tête avec ceci car pour moi ça marche parfaitement.  Je travaille sous Windows 10 avec les dernières versions:

Chrome version 52.0.2743.82 m
Firefox version 47.0.1
Vivaldi version 1.2.490.43
Opéra version 38.0.2220.41
Internet Explorer version 11.494.10586.0
Edge version 25.10586.0.0

Est-ce aussi votre cas?




-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/


Posté par: Bridet
Posté le: 31 Juil 2016 à 18:16
C'est Cyberfox 30.0 qui foire


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be


Posté par: Hobby001
Posté le: 31 Juil 2016 à 18:41
Selon ce site c'est Cyberfox 37 qu'il vous faut

http://html5test.com/s/636f202619f66f0b.html" rel="nofollow - http://html5test.com/s/636f202619f66f0b.html


-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/


Posté par: Hobby001
Posté le: 31 Juil 2016 à 20:18
Cyberfox en est à la version 47.0.2.

Sur celle-ci ça roule très bien


-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/


Posté par: Bridet
Posté le: 01 Août 2016 à 09:14
oups! :-D bizarre qu'il ne propose pas des mises à jour!


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be


Posté par: Hobby001
Posté le: 14 Oct 2016 à 17:17
Édition du http://forum.openelement.com/fr/forum_posts.asp?TID=22190&PN=1&title=tuto-vido-html5-en-fond-dcran-responsive" rel="nofollow - tuto pour satisfaire les exigences d'Apple sur le Video avec bande sonore et en mode autoplay

-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/


Posté par: Hobby001
Posté le: 06 Nov 2016 à 23:33
Edition du http://forum.openelement.com/fr/forum_posts.asp?TID=22190&title=tuto-vido-html5-en-fond-dcran-responsive" rel="nofollow - tuto pour ajouter un contrôle de volume de son

-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/


Posté par: Hobby001
Posté le: 05 Jan 2017 à 22:03
J'ai ajouté les fichiers webm au tuto pour les besoins de Apple.

-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. http://denislafrance.net/



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk