18008 sujets

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

[Résolu] Insérer un lien à la fin d'une vidéo

Pages :
Bonjour à tous,
avant toute chose, je précise que je suis un béotien, non informaticien, qui comprend le principe des balises html, mais qui commence à surchauffer dès qu'on parle de css ou de javascript Smiley rolleyes
Voici mon problème : je souhaite diffuser une vidéo dont le format est vertical (pour être lu sur un portable), je ne veux donc pas passer par youtube, viméo ou autre... jusqu'ici, tout va bien, grâce au code suivant :
<body>
<video width="400" height="711" poster="accueil.jpeg" autoplay=""> <source
src="missionquiz.m4v" type="video/mp4">
</source></video>
</body>


Là ou ça se complique, c'est qu'une fois la vidéo terminée, je voudrais qu'un bouton qui s'affiche sur l'écran de fin (ou même l'intégralité de l'écran) soit cliquable, permettant ainsi au lecteur de continuer sa navigation et d'aller télécharger mon appli, puisque c'est de ça dont il s'agit Smiley smile
J'espère avoir été clair, merci d'avance de vos lumières !!!
Bonjour et merci, j'ai vu le topic, je vais essayer d'en faire quelque chose, en espérant que ça ne vole pas trop au dessus de ma tête Smiley smile
Bonjour à tous, je me suis inspiré du topic suggéré par Zelena pour modifier mon code, mais ça ne marche pas Smiley decu
À la fin de la vidéo, une autre page est censée s'ouvrir automatiquement (c'est le sens de la fonction window.location.replace), sauf que rien ne se passe, je reste sur l'écran de fin de la vidéo...
<html><head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
  <title>Mission quiz</title>
<link rel="stylesheet" href="">
<link rel="shortcut icon" href="favicon.ico">
 <meta name="keywords" content="Mission quiz">
<meta name="description" content="jeu de quiz">
<meta property="og:image" content="http://www.missionquiz.com/pictures/logo2.png">
</head><body>
<script type="text/javascript">
document.getElementById("pitch").addEventListener('ended',myHandler,false);
function myHandler(e) {
window.location.replace("http://www.missionquiz.com/play");
}
</script>
<video id="pitch" width="400" height="711" poster="http://www.missionquiz.com/presentation/accueil.jpeg" autoplay=""> <source src="http://www.missionquiz.com/presentation/missionquiz.m4v" type="video/mp4"></source></video>
</body></html>

merci de votre aide
Bonjour.

Vous avez mis le script Javascript avant le HTML pour la vidéo ? Se pourrait-il que le script ne trouve pas la balise ?

Pour savoir si un écouteur d'événement fonctionne ('addEventListener'), j'utilise souvent : alert('a'); dans le script.

Smiley smile
Bonjour Zelena, et merci de vous intéresser à mon cas...
Concernant l'ordre entre le script et la balise vidéo, je me suis juste inspiré d'un exemple vu sur internet, mais il semble que j'avais tort : j'ai inversé cet ordre (1: la balise, 2: le script) et j'ai fait comme vous le suggérez, j'ai mis une alerte... et là, miracle, elle s'affiche ! J'ai ensuite remis mon lien, et là encore, ça fonctionne Smiley smile
Là question pour moi est maintenant que la redirection vers ce lien se fasse, non pas de manière autoritaire (disons automatique) comme maintenant, mais si et seulement si le lecteur clique sur l'écran. J'ai vu qu'il existait une fonction 'onclick' mais je ne sais pas comment l'utiliser, et si c'est la bonne solution... merci encore, je sens que je sors du brouillard Smiley sweatdrop
MisterYepi a écrit :
J'ai vu qu'il existait une fonction 'onclick' mais je ne sais pas comment l'utiliser, et si c'est la bonne solution...

Par rapport à ça, j'ai essayé en remplaçant
window.location.replace("http://www.missionquiz.com/play")
par 
onclick="location.replace("http://www.missionquiz.com/play")

mais ça ne marche pas...
le onclick il faut le placer dans une balise HTML
tel que : 
<div onclick="location.replace("http://www.missionquiz.com/play")></div>
JENCAL a écrit :
le onclick il faut le placer dans une balise HTML
tel que : 
&lt;div onclick="location.replace("http://www.missionquiz.com/play")&gt;&lt;/div&gt;

Merci Jencal, mais actuellement la fonction est dans un script, ça veux dire qu'il faut supprimer le script ? ou insérer la balise html dans le script ? ou après le script ?
Alors soit tu utilise une fonction 
function myHandler() {
location.replace("http://www.missionquiz.com/play");
}

Et tu l'ajoute dans un onclick d'une balise html : 
<div onclick="myHandler()"></div>


Soit tu l'utilise directement dans le onclick , sans fonction : 
<div onclick="location.replace('http://www.missionquiz.com/play')"></div>

Modifié par JENCAL (30 May 2017 - 11:34)
si je prends cette solution (sans fonction)
<div onclick="location.replace('http://www.missionquiz.com/play')></div>

que fais-je du addEventListener('ended',myHandler,false) qui fait référence à la fonction myHandler ?
pour être plus clair, voici le code que j'ai actuellement :
<script type="text/javascript">
document.getElementById("pitch").addEventListener('ended',myHandler,false);
function myHandler(e) {
<div onclick="location.replace("http://www.missionquiz.com/play")></div>

}
</script>
Non, je ne dis pas qu'il faut utilisé le onclick dans le HTML, mais j'ai cru que tu utilisé le onclick dans la function(), du coup je voulais juste expliquer qu'un "onclick=""" ne pouvais se trouver dans une function, mais uniquement dans une balise html.

Il faut garder ton addevenlistener car c'est lui qui te dit "quand" la vidéo fini. oublie le onclick.


P.S je viens de voir ton code, tu ne peux pas mettre de balise html dans du javascript comme tu viens de le faire avec la div.
Modifié par JENCAL (30 May 2017 - 11:51)
Mais alors du coup, comment je fais pour que dès que la vidéo est finie, l'internaute puisse cliquer sur l'écran et être redirigé vers le site de mon choix ? désolé si je pose des questions auxquelles en fait tu as déjà répondu, mais mon seuil de compétence est largement atteint Smiley smile
Modérateur
Bonjour,

J'ai suivis le sujet et je le trouve intéressant. Il semble que vous ayez là tous les éléments pour y arriver, il ne vous manque plus qu'à concaténer toutes ces précieuses informations.

Ainsi, je pense que ceci devrait vous permettre d'atteindre votre but:

/** On récupère l'objet qui contient la video **/
let videoObject = document.getElementById('pitch');
/** On place en écoute la fin de la lecture de la vidéo **/
videoObject.addEventListener('ended', function() {
  /** Quand la vidéo est finie, on écoute le clic **/
  videoObject.addEventListener('click', function() {
    /** On redirige le visiteur vers  http://my.url  **/
    windows.location = 'http://my.url';
  }, false);
}, false);


Ça devrait marcher, non ?
Meilleure solution
hélas, ça ne marche pas Smiley decu
voici comment j'ai agencé les choses :
<body>
<video id="pitch" width="400" height="711" poster="http://www.missionquiz.com/presentation/accueil.jpeg" autoplay=""> <source src="http://www.missionquiz.com/presentation/missionquiz.m4v" type="video/mp4"></source></video>
<script type="text/javascript">
/** On récupère l'objet qui contient la video **/
let videoObject = document.getElementById('pitch');
/** On place en écoute la fin de la lecture de la vidéo **/
videoObject.addEventListener('ended', function() {
  /** Quand la vidéo est finie, on écoute le clic **/
  videoObject.addEventListener('click', function() {
    /** On redirige le visiteur vers   http://my.url   **/
    windows.location = 'http://www.missionquiz.com';
  }, false);
}, false);
}
</script>
</body>
Et avec :
'window.location = '....';

sans le 's' à window

Il y a un message à la fin de votre vidéo qui indique qu'il faut cliquer dessus ?

Smiley smile
Modifié par Zelena (30 May 2017 - 13:36)
pas plus de succès sans le 's' hélas...

pas de message indiquant qu'il faut cliquer, mais je pars du principe que lorsqu'on voit les bouton Google et Apple, on sait ce qu'on a à faire Smiley smile
Modérateur
La dernière accolade est obsolète. De plus je me suis trompé, ce n'est pas windows mais window (l'habitude de nommer l'OS). Smiley confused
Pages :
Sujet clos
Aller à