18008 sujets

Questions générales et questions de débutants

Page HTML intégrant une barre progress circle

Bonjour je suis débutant en développement et je souhaiterais créer une page HTML intégrant une petite vidéo de pub avec une barre de progression circulaire qui une fois cette dernière disparue laisse place un lien pour fermer la fenêtre web ou rediriger vers un lien web externe
Modérateur
Bonjour,

Est-ce une video que tu as, ou bien est-ce une video qui est déjà en ligne quelque part (genre sur youtube) ? Et si c'est en ligne, c'est où ?

La solution dépend éventuellement de l'endroit où est stockée la vidéo, et la manière dont tu l'insère dans ta page.

Amicalement,
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; }
}
Modérateur
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 :
<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 Smiley decu
Sujet clos
Aller à