Bonjour, Bonsoir !
Je viens m'adresser à vous car je suis sur un projet d'école simulant un site vitrine pour GoPro et j'avais pour idée d'utiliser des vidéos en autoplay, loop, et muted.
Lorsque je scroll, sur la vidéo elle serait pas mute. Mais c'est pas ça mon problème.
Le soucis c'est que je n'arrive pas à visualiser ma vidéo lorsque j'enlève l'attribut muted et est remplacé par un écran noir comme si la vidéo ne marchait plus. Mettre la valeur muted="false" remet la vidéo en marche mais me son n'est pas audible... Je n'arrive pas à comprendre mon erreur car j'avais réussi un moment mais depuis... Plus rien !
Je suis sur google chrome
voici le code, si vous souhaitez visualiser mon projet, il faudra vous mettre sur inspecter, iphone 6 7 8, et remplacer mes fichiers actuels par les votre, peu importe ce n'est pas important :
EDIT : Fonctionne sur Firefox
Modifié par loupilon (12 Feb 2019 - 21:32)
Je viens m'adresser à vous car je suis sur un projet d'école simulant un site vitrine pour GoPro et j'avais pour idée d'utiliser des vidéos en autoplay, loop, et muted.
Lorsque je scroll, sur la vidéo elle serait pas mute. Mais c'est pas ça mon problème.
Le soucis c'est que je n'arrive pas à visualiser ma vidéo lorsque j'enlève l'attribut muted et est remplacé par un écran noir comme si la vidéo ne marchait plus. Mettre la valeur muted="false" remet la vidéo en marche mais me son n'est pas audible... Je n'arrive pas à comprendre mon erreur car j'avais réussi un moment mais depuis... Plus rien !
Je suis sur google chrome
voici le code, si vous souhaitez visualiser mon projet, il faudra vous mettre sur inspecter, iphone 6 7 8, et remplacer mes fichiers actuels par les votre, peu importe ce n'est pas important :
EDIT : Fonctionne sur Firefox
<!doctype html>
<html lang="fr">
<head>
<title>TITRE DE LA PAGE</title> <!-- IMPORTANT !! -->
<meta name="Content-Type" charset="UTF-8"> <!-- IMPORTANT !! encodage des caractères (permet d'avoir les accent en ligne, pour le FR) -->
<meta name="copyright" content="All Rights Reserved - AUTEUR" /> <!-- metadonné pour les droits du site, changer l'AUTEUR -->
<meta name="Content-Language" content="fr"> <!-- métadonné qui renseigne la langue de la page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- IMPORTANT !! métadonnée qui permet d'adapter la taille décran aux mobiles -->
<meta name="Description" content="Courte description de la page"> <!-- IMPORTANT !! Sujet du site (apparaît en description du site sur google) -->
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<header>
<div class="header-bar">
<img class="logo" src="images/logogopro.png">
<div class="burger">+</div>
</div>
</header>
<div class="container">
<video id="video1" autoplay="autoplay" loop="loop" muted="false">
<source src="videos/video1.mp4" type="video/mp4">
</video>
<h2 class="contitle">Du départ...</h2>
<p>Marquez le départ de votre passion et enregistrez vos meilleurs moments seul ou avec vos amis, pas besoin d’être un pro pour manipuler votre nouveau compagnon !</p>
<svg class="forme1">
<defs>
<pattern id="pattern1" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="images/image1.jpg" />
</pattern>
</defs>
<polygon fill="url(#pattern1)" points="0 238 0 88 376 0 376 270 0 238"/>
</svg>
</div>
<div class="container">
<video class="videopad" id="video2">
<source src="videos/video2.mp4" type="video/mp4">
</video>
<h2 class="contitle">En course !</h2>
<p>Go Pro est le premier témoin de vos progrès qui reflétera parfaitement votre niveau actuel, filmez vos exploits et partagez-les facilement ! </p>
<svg class="forme2">
<defs>
<pattern id="pattern2" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="images/image2.jpg" />
</pattern>
</defs>
<polygon fill="url(#pattern2)" points="0 0 0 212 375 181 375 53 0 0"/>
</svg>
</div>
<div class="container">
<video class="videopad" id="video2" autoplay="false" loop="loop" muted="muted">
<source src="videos/video3.mp4" type="video/mp4">
</video>
<h2 class="contitle">Ligne d'arrivée</h2>
<p>Vous êtes un aguerri dans votre domaine. Prouvez que l’impossible est accessible à la nouvelle génération en démontrant vos performances sur la toile ! </p>
<svg class="forme3">
<defs>
<pattern id="pattern3" height="100%" width="100%" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xlink:href="images/image3.jpg" />
</pattern>
</defs>
<polygon fill="url(#pattern3)" points="0 73 0 178 375 254 375 0 0 73"/>
</svg>
<div class="shopzone">
<h2>Lancez vous !</h2>
<img src="images/goprohero7.png" width="50%" height="auto%">
<button>Boutique</button>
</div>
<div class="blockshop"></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script> <!-- lien vers la bibliothèque jquery dans le votre dossier js -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <!-- lien vers la bibliothèque jquery ( qui permet de gérer les courbes de vitesse) -->
<script type="text/javascript" src="js/index.js"> </script> <!-- lien vers la page index.js qui contient toutes vos fonctions qui concerne cette page -->
</body>
</html>
@import url('index/index_736_portrait.css') screen and (max-width: 736px) and (orientation: portrait);
@import url('index/index_736_landscape.css') screen and (max-width: 736px) and (orientation: landscape);
@import url('index/index_992_portrait.css') screen and (min-width: 737px) and (max-width: 1024px) and (orientation: portrait);
@import url('index/index_992_landscape.css') screen and (min-width: 737px) and (max-width: 1024px) and (orientation: landscape);
@import url('index/index_1025_screen.css') screen and (min-width: 1025px) and (max-width: 1200px);
@import url('index/index_1200_screen.css') screen and (min-width: 1200px);
@charset;
html{
width: 100%;
height: auto;
margin: 0;
}
body{
width: 100%;
height: auto;
margin: 0;
scroll-snap-type: y proximity;
overflow-y: scroll;
}
/* ------------ HEADER ------------ */
header{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0;
width: 100%;
height: 50px;
background-color: black;
}
.header-bar{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-right: 10px;
padding-left: 10px;
width: 100%;
height: auto;
}
.logo{
width: 20%;
height: auto;
}
.burger{
color: white;
}
/* ------------ CONTAINER ------------ */
.container{
overflow: hidden;
scroll-snap-align: start;
}
video{
width: 1185px;
height: 667px;
position: relative;
right: 70%;
}
#video2{
right: 100%
}
h2{
font-family: "Segoe UI";
font-size: 1.75rem;
}
.contitle{
font-family: "Segoe UI";
font-size: 1.75rem;
margin-top: 5vw;
margin-left: 3vw;
margin-bottom: 0vw;
}
p{
font-family: "Segoe UI";
font-size: 120%;
width: 60vw;
margin-top: 3vw;
margin-left: 3vw;
color: #707070;
margin-bottom: 15vw;
}
polygon{
position: relative;
}
.mobile{
overflow: hidden;
}
svg{
display: flex;
width: 100vw;
height: 72vw;
margin-bottom: 24vw;
}
/* ------------ Link to Shop ------------ */
.blockshop{
top: 1026vw;
position: absolute;
height: 500px;
width: 100vw;
background-color: black;
z-index: -1;
}
.shopzone{
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100vw;
background-color: black;
height: 100vw;
color: white
}
.forme3{
margin-bottom: 0vw;
}
button{
margin-top: 5vw;
margin-bottom: 5vw;
width: 60%;
background-color: white;
border-color: transparent;
border-radius:28px;
display:inline-block;
cursor:pointer;
color: black;
font-family: "Segoe UI";
font-weight: bold;
font-size: 120%;
padding: 5px;
text-decoration:none;
}
Modifié par loupilon (12 Feb 2019 - 21:32)
! Donc je vais continuer à faire sur FireFox alors