18041 sujets
Questions générales et questions de débutants
Salut merci pour ton retour. La vidéo est stockée sur en local sur mon routeur.
En fait l'idée est de mettre à disposition une connexion wifi gratuite de 15mn aux utilisateurs. Et lors de leur connexion au wifi (sans entrer de mot de passe) qu'ils s'affiche une page HTML sur laquelle sera jouée ma video avec une progress circle bar (en haut à droite) qui une fois arrivée à 100% laissera place à un lien permettant de fermer la fenêtre en cours ou une redirection vers un site.
Voici mon petit code mais le rendu n'est pas super:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="can1.js"></script>
<link href="can2.css" rel="stylesheet" type="text/css">
<script src="jquery-3.3.1.js"></script>
</head>
<body >
<div id="loader" class="loading">
<canvas id="circularLoader" width="200" height="200"></canvas>
</div>
<video playsinline autoplay muted preload="auto" id="videos" width="600" height="450">
<source src="pilote.mp4" type="video/mp4" />
<source src="pilote.mp4" type="video/mp4" />
<source src="pilote.webm" type="video/webm"/>
<source src="pilote.ogv" type="video/ogg"/>
<object>
<embed src="pilote.mp4" type= "application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" />
</object>
</video>
<a href="https://mpubcom.net" class="link">
<span class="link1"> CLIQUER ICI POUR INTERNET</span>
</a>
<script src="jquery-3.3.1.js"></script>
<script>
var ctx = document.getElementById('circularLoader').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;
function progressSim(){
diff = ((al / 100) * Math.PI*2*10).toFixed(2);
ctx.clearRect(0, 0, cw, ch);
ctx.lineWidth = 17;
ctx.fillStyle = 'white';
ctx.strokeStyle = "white";
ctx.textAlign = "center";
ctx.font="35px monospace";
ctx.fillText(al+'%', cw*.52, ch*.5+5, cw+12);
ctx.beginPath();
ctx.arc(100, 100, 55, start, diff/10+start, false);
ctx.stroke();
if(al >= 100){
clearTimeout(sim);
// Add scripting here that will run when progress completes
}
al++;
}
var sim = setInterval(progressSim, 100);
setTimeout(function() {
$('#loader').delay(3000).fadeOut(6000);
}, 6000);
$(function(){ // $(document).ready shorthand
$('.link').delay(6000).hide().fadeIn(6000);
});
</script>
</body>
</html>
CSS
html {
margin:0;
padding:0;
background: url(image3.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
}
.videos{
position:absolute;
left:30px;
bottom:20px;
}
#loader {
width: auto;
height: 15vh;
position: absolute;
top: 5%;
right: 5%;
font-size: 3vmin;
font-style: bold;
}
canvas {
width: auto;
/* 90% of smallest-side */
height: 10vmin;
}
.link {
top: 20%;
right: 10%;
position: absolute;
font-size: 3vmin;
font-style: bold;
font-style: italic;
}
a.link:link
{
text-decoration:none;
}
.link1 {
color:white;
animation: clignote 2s linear infinite;
font-size:30px;
font-style: bold;
}
@keyframes clignote {
50% { opacity: 0.5; }
}
En fait l'idée est de mettre à disposition une connexion wifi gratuite de 15mn aux utilisateurs. Et lors de leur connexion au wifi (sans entrer de mot de passe) qu'ils s'affiche une page HTML sur laquelle sera jouée ma video avec une progress circle bar (en haut à droite) qui une fois arrivée à 100% laissera place à un lien permettant de fermer la fenêtre en cours ou une redirection vers un site.
Voici mon petit code mais le rendu n'est pas super:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="can1.js"></script>
<link href="can2.css" rel="stylesheet" type="text/css">
<script src="jquery-3.3.1.js"></script>
</head>
<body >
<div id="loader" class="loading">
<canvas id="circularLoader" width="200" height="200"></canvas>
</div>
<video playsinline autoplay muted preload="auto" id="videos" width="600" height="450">
<source src="pilote.mp4" type="video/mp4" />
<source src="pilote.mp4" type="video/mp4" />
<source src="pilote.webm" type="video/webm"/>
<source src="pilote.ogv" type="video/ogg"/>
<object>
<embed src="pilote.mp4" type= "application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" />
</object>
</video>
<a href="https://mpubcom.net" class="link">
<span class="link1"> CLIQUER ICI POUR INTERNET</span>
</a>
<script src="jquery-3.3.1.js"></script>
<script>
var ctx = document.getElementById('circularLoader').getContext('2d');
var al = 0;
var start = 4.72;
var cw = ctx.canvas.width;
var ch = ctx.canvas.height;
var diff;
function progressSim(){
diff = ((al / 100) * Math.PI*2*10).toFixed(2);
ctx.clearRect(0, 0, cw, ch);
ctx.lineWidth = 17;
ctx.fillStyle = 'white';
ctx.strokeStyle = "white";
ctx.textAlign = "center";
ctx.font="35px monospace";
ctx.fillText(al+'%', cw*.52, ch*.5+5, cw+12);
ctx.beginPath();
ctx.arc(100, 100, 55, start, diff/10+start, false);
ctx.stroke();
if(al >= 100){
clearTimeout(sim);
// Add scripting here that will run when progress completes
}
al++;
}
var sim = setInterval(progressSim, 100);
setTimeout(function() {
$('#loader').delay(3000).fadeOut(6000);
}, 6000);
$(function(){ // $(document).ready shorthand
$('.link').delay(6000).hide().fadeIn(6000);
});
</script>
</body>
</html>
CSS
html {
margin:0;
padding:0;
background: url(image3.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
background-size: cover; /* version standardisée */
}
.videos{
position:absolute;
left:30px;
bottom:20px;
}
#loader {
width: auto;
height: 15vh;
position: absolute;
top: 5%;
right: 5%;
font-size: 3vmin;
font-style: bold;
}
canvas {
width: auto;
/* 90% of smallest-side */
height: 10vmin;
}
.link {
top: 20%;
right: 10%;
position: absolute;
font-size: 3vmin;
font-style: bold;
font-style: italic;
}
a.link:link
{
text-decoration:none;
}
.link1 {
color:white;
animation: clignote 2s linear infinite;
font-size:30px;
font-style: bold;
}
@keyframes clignote {
50% { opacity: 0.5; }
}
Bonjour,
1) Qu'est-ce qui ne te plait pas dans le rendu ? Le rendu du lien ? La mise en page global ? La circle progress bar ?
2) Souhaites-tu récupérer automatiquement la durée de la vidéo, ou bien tu la connais toujours a priori et coder en dur le temps d'affichage de ta circle progress bar te va bien ?
3) tu as mis 2 fois l'appel à jquery dans ton code. Une fois suffit (ça peut se mettre dans la partie <head> de la page avant tout autre script, et cela n'a aucune utilité de le remettre ensuite plus bas sauf à ralentir la page et semer la confusion).
4) on est bientôt en 2022, et en 2022, on doit laisser tomber flash, et on peut très probablement se contenter du mp4. Et en conséquence, le code html suivant devrait suffire :
Amicalement,
1) Qu'est-ce qui ne te plait pas dans le rendu ? Le rendu du lien ? La mise en page global ? La circle progress bar ?
2) Souhaites-tu récupérer automatiquement la durée de la vidéo, ou bien tu la connais toujours a priori et coder en dur le temps d'affichage de ta circle progress bar te va bien ?
3) tu as mis 2 fois l'appel à jquery dans ton code. Une fois suffit (ça peut se mettre dans la partie <head> de la page avant tout autre script, et cela n'a aucune utilité de le remettre ensuite plus bas sauf à ralentir la page et semer la confusion).
4) on est bientôt en 2022, et en 2022, on doit laisser tomber flash, et on peut très probablement se contenter du mp4. Et en conséquence, le code html suivant devrait suffire :
<video playsinline autoplay muted preload="auto" id="videos" width="600" height="450">
<source src="pilote.mp4" type="video/mp4">
</video>
Amicalement,
Merci, effectivement mon code n'est pas nikel.
Oui en fait je souhaiterais l'épurer et le simplifier.
Aussi je note de bonnes lenteurs lors du chargement de la page et de la redirection vers le site (href). faire un fichier JS externe me permettrait de gagner en temps mais je n'arrive pas.
Pour ce qui est du rendu je souhaiterais que cette page soit compatible Safari/Chrome (iOS, Android). Et que la taille de la page se fasse en fonction de l'écran du smartphone; Je galère un peu
Oui en fait je souhaiterais l'épurer et le simplifier.
Aussi je note de bonnes lenteurs lors du chargement de la page et de la redirection vers le site (href). faire un fichier JS externe me permettrait de gagner en temps mais je n'arrive pas.
Pour ce qui est du rendu je souhaiterais que cette page soit compatible Safari/Chrome (iOS, Android). Et que la taille de la page se fasse en fonction de l'écran du smartphone; Je galère un peu