18015 sujets

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

Arreter video html5 sur changement #contenu

novice en html5, j'ai voulu créer une page index avec plusieurs 'contenus' par ancrage
dans chaque contenu , il y a une video integree par l'instruction basique:
<video width="x" height="x" controls>
<source src="mp4/xxx.mp4" type="video/mp4" />
<source src="webm/xxx.webm" type="Video/webm" />
<source src="ogv/xxx.ogv" type="Video/Ogg" />
</video>
.
comment faire pour que la video en lecture puisse s'arreter automatiquement quand on pointe sur une autre ancre par le menu

merci
Modérateur
Salut,

il faut avoir recours au JS. Tu utilises les fonctions pour guider ta/tes videos. Petite piste à suivre :


window.addEventListener('load',function(){
	var maVideo = document.getElementById('mavideo'),
		unLien = document.getElementById('unLien');
		
	unLien.addEventListener('click',function(){
		maVideo.pause();
		maVideo.rewind();
	});
	
});

code fait de tête
Modifié par niuxe (20 Aug 2013 - 20:00)
merci pour la réponse.
n'ayant pas de compétences en js,mais sans vouloir sortir du cadre du sujet, concernant ce petit script proposé, la demarche pour le faire fonctionner est elle juste de le placer en fin de page html et assigner le chemin de script pour jquery.js ? ou y'a t'il des fonctions a rajouter dans la balise <video>
merci
Modérateur
yeathly a écrit :
a demarche pour le faire fonctionner est elle juste de le placer en fin de page html et assigner le chemin de script pour jquery.js ? ou y'a t'il des fonctions a rajouter dans la balise &lt;video&gt;
merci



Non ce n'est pas du jquery et il n'y a pas à mettre des attributs pourris dans l'élément video Smiley cligne 


<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p><a href="#" id="unLien">un lien</a></p>
    <video id="mavideo" controls>
        <source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.mp4" type="video/mp4" />
        <source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.webm" type="Video/webm" />
        <source src="http://www.nicolas-hoffmann.net/animations/Cavernae_Terragen2.ogv" type="Video/Ogg" />
    </video>
    <script type="text/javascript">
        window.addEventListener('load',function(){
                var maVideo = document.getElementById('mavideo'),
                        unLien = document.getElementById('unLien');
                        
                unLien.addEventListener('click',function(){
                        maVideo.pause();
                        maVideo.rewind();
                        
                        return false;
                });
                
        });
    </script>
</body>
</html>


*idem : code fait de tête
j'ai essayé de mettre le script après chaque contenu, puis à la fin mais rien n'y fait...
je ne dois pas mettre les bonnes assignations aux deux parametres 'mavideo' et 'monlien'
je n'arrive pas a declancher l'arret de la video en quittant l'ancre de sa page.

voici un extrait du code de cette page . peut être cela sera t'il plus compréhensible:


<body>

<div id="conteneur">

<nav>

<ul>
<li><a href="#contenu1" id="accueil">Accueil</a></li>
<li><a href="#contenu2" id="propos">video1</a></li>
<li><a href="#contenu3" id="propos">video2</a></li>
.....etc ..
<li><a href="#contenu9" id="propos8">video9l</a></li>

</ul>


</nav>


<div id="contenu">

<div id="contenu1">

<article >
</article>

</div>


<!-- ### page video 1 ### -->

<div id="contenu2">

<article class="gauche">

<h2>titre video1</h2>

</article>


<div class="droite">

<video width="700" height="450" controls>

<source src="videos/mp4/01_.mp4" type="video/mp4" />
<source src="videos/webm/01_.webm" type="Video/webm" />
<source src="videos/ogv/01_.ogv" type="Video/Ogg" />



</video>


</div>

</div>

<!-- ### page video 2 ### -->

<div id="contenu3">

<article class="gauche">


<h2>titre video 2</h2>


</article>

<div class="droite">

<video width="700" height="450" controls>
<source src="videos/mp4/02_.mp4" type="video/mp4" />
<source src="videos/webm/02_.webm" type="Video/webm" />
<source src="videos/ogv/02_.ogv" type="Video/Ogg" />

</video> </div>


</div>

<!-- ### idem pour les autres pages (de contenu3 a contenu9 )### -->





</div>

<footer></footer>
</div>


<script type="text/javascript">
window.addEventListener('load',function(){
var maVideo = document.getElementById('mavideo'),
unLien = document.getElementById('monlien');

unLien.addEventListener('click',function(){
maVideo.pause();
maVideo.rewind();

return false;
});

});
</script>

</body>
</html>
merci
je vais voir a tête reposé, après qq jours de vacances.; j’espère m'en sortir..
ca va vite les nouveaux langages. j'en étais reste aux plugs flash bien pratiques pourtant .. Smiley smile
concernant la présentation de mon msg, désolé . j'ai bien essayé de mettre en surligné mais le temps me manquait pour approfondir.
Sujet clos
Aller à