2 petits problèmes en HTML...
Résolu
Mathlo
-
The Dead T Messages postés 80 Date d'inscription Statut Membre Dernière intervention -
The Dead T Messages postés 80 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis en train de créer un site pour mon TPE (travail à présenter en première pour le bac).
Mon site est : http://biomasse.fr.cr
(pour bien voir la vidéo en Html 5 et les animations utilisés chrome...)
Bref, je rencontre toutefois 2 petits problèmes...
1) à l'arrivée sur le site, se lance la petite vidéo. Comment faire pour que quand cette vidéo soit finie, on soit automatiquement dirigé vers la suite du site? :s
2) ma forêt en background est affiché Grace à la nouvell propriété CSS background-size: cover, toutefois je souhaiterai que l'image ne s'adapte pas à la taille de la ''page'' mais plutot à la taille de l'écran... Comment faire?
Merci d'avance pour votre, ça me serait super utile,
Bonne journée :)
Je suis en train de créer un site pour mon TPE (travail à présenter en première pour le bac).
Mon site est : http://biomasse.fr.cr
(pour bien voir la vidéo en Html 5 et les animations utilisés chrome...)
Bref, je rencontre toutefois 2 petits problèmes...
1) à l'arrivée sur le site, se lance la petite vidéo. Comment faire pour que quand cette vidéo soit finie, on soit automatiquement dirigé vers la suite du site? :s
2) ma forêt en background est affiché Grace à la nouvell propriété CSS background-size: cover, toutefois je souhaiterai que l'image ne s'adapte pas à la taille de la ''page'' mais plutot à la taille de l'écran... Comment faire?
Merci d'avance pour votre, ça me serait super utile,
Bonne journée :)
A voir également:
- 2 petits problèmes en HTML...
- Supercopier 2 - Télécharger - Gestion de fichiers
- Editeur html - Télécharger - HTML
- 2 ecran pc - Guide
- Faire 2 colonnes sur word - Guide
- Whatsapp 2 - Guide
3 réponses
Hello!
1) Utilisons javascript! Grâce aux events tu peux détecter quand ta vidéo est terminée. L'event "ended" peut te permettre de faire ça, voici quelques lignes qui te permettront de rediriger ta page s'il détecte que la vidéo est finie
2) Utilisons encore javascript! Tu peux détecter la taille de ton écran grâce à la simple fonction "screen.width" et "screen.height".
Le problème avec ça, c'est que si tu appliques directement la largeur et la hauteur de ton écran au background celui-ci risque d'être déformé...
Il faudra donc que tu crées une fonction qui te garde le bon ratio en fonction de ton background!
J'espère que ça a pu t'aider!
1) Utilisons javascript! Grâce aux events tu peux détecter quand ta vidéo est terminée. L'event "ended" peut te permettre de faire ça, voici quelques lignes qui te permettront de rediriger ta page s'il détecte que la vidéo est finie
var myvid = document.getElementById('vid');
if (myvid.ended) {
document.location.href="nouvellepage.html"
}
2) Utilisons encore javascript! Tu peux détecter la taille de ton écran grâce à la simple fonction "screen.width" et "screen.height".
Le problème avec ça, c'est que si tu appliques directement la largeur et la hauteur de ton écran au background celui-ci risque d'être déformé...
Il faudra donc que tu crées une fonction qui te garde le bon ratio en fonction de ton background!
J'espère que ça a pu t'aider!
Oulala merci pour ton aide...
Par contre je connais rien au Javascript --' est ce que tu pourrai m'aider encore un peu notamment pour la question de la fin de la video stp? Ça serait super sympa...
Merci encore :)
Par contre je connais rien au Javascript --' est ce que tu pourrai m'aider encore un peu notamment pour la question de la fin de la video stp? Ça serait super sympa...
Merci encore :)
En fait, c'est pas vraiment juste comme je t'ai dit ^^
Le plus simple, c'est d'ajouter l'événement "onended" dans ta balise <video>, ce qui te permettras d'exécuter ce que tu veux lorsque la fin de la vidéo est détectée!
Tu peux donc remplacer le code de ta balise <video> comme ceci :
"document.location.href='tanouvellepage.html'" est une commande en javascript qui te permet de changer l'adresse actuelle de ta page par la nouvelle valeur que tu as mis (ici ca sera tanouvellepage.html, je te laisse changer le nom comme tu le souhaites).
Le plus simple, c'est d'ajouter l'événement "onended" dans ta balise <video>, ce qui te permettras d'exécuter ce que tu veux lorsque la fin de la vidéo est détectée!
Tu peux donc remplacer le code de ta balise <video> comme ceci :
<video onended="document.location.href='tanouvellepage.html'" width="600" preload="auto" autoplay="true" src="intro.theora.ogv">Video introductive</video>
"document.location.href='tanouvellepage.html'" est une commande en javascript qui te permet de changer l'adresse actuelle de ta page par la nouvelle valeur que tu as mis (ici ca sera tanouvellepage.html, je te laisse changer le nom comme tu le souhaites).
