Affichage plusieurs vidéos sur page Web en HTLM5
Kat
-
Alko -
Alko -
Bonjour,
Je voudrai afficher sur une page plusieurs lecteurs vidéos en html5 qui proposent à chaque fois plusieurs vidéos. Le code suivant ne fonctionne pas. Pourquoi ?
Merci pour votre aide. Kat
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript">
function changeVideo(newUrl) {
var video = document.getElementById("player");
video.src = newUrl;
video.load();
video.play();
}
</script>
</head>
<body>
<div>
<video id="player" width="600" height="400" controls>
<source id="video_src" src="video/derniers_recours_x264.mp4" type="video/mp4" />
</video>
</div>
<div>
<ul id="maListe1">
<li><a href="javascript:changeVideo('video/derniers_recours_x264.mp4');" rel="player" >
Dernier recours</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_01_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 1</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_02_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 2</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_03_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 3</a></li>
</ul>
</div>
<br>
<div>
<video id="player" width="600" height="400" controls>
<source id="video_src" src="video/derniers_recours_x264.mp4" type="video/mp4" />
</video>
</div>
<div>
<ul id="maListe2">
<li><a href="javascript:changeVideo('video/derniers_recours_x264.mp4');" rel="player" >
Dernier recours</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_01_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 1</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_02_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 2</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_03_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 3</a></li>
</ul>
</div>
</body>
</html>
Je voudrai afficher sur une page plusieurs lecteurs vidéos en html5 qui proposent à chaque fois plusieurs vidéos. Le code suivant ne fonctionne pas. Pourquoi ?
Merci pour votre aide. Kat
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<head>
<title>Test</title>
<script language="JavaScript" type="text/javascript">
function changeVideo(newUrl) {
var video = document.getElementById("player");
video.src = newUrl;
video.load();
video.play();
}
</script>
</head>
<body>
<div>
<video id="player" width="600" height="400" controls>
<source id="video_src" src="video/derniers_recours_x264.mp4" type="video/mp4" />
</video>
</div>
<div>
<ul id="maListe1">
<li><a href="javascript:changeVideo('video/derniers_recours_x264.mp4');" rel="player" >
Dernier recours</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_01_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 1</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_02_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 2</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_03_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 3</a></li>
</ul>
</div>
<br>
<div>
<video id="player" width="600" height="400" controls>
<source id="video_src" src="video/derniers_recours_x264.mp4" type="video/mp4" />
</video>
</div>
<div>
<ul id="maListe2">
<li><a href="javascript:changeVideo('video/derniers_recours_x264.mp4');" rel="player" >
Dernier recours</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_01_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 1</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_02_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 2</a></li>
<li><a href="javascript:changeVideo('video/suicide_chef_entreprise_03_x264.mp4');" rel="player" >
Suicide d'un chef d'entreprise - Séquence 3</a></li>
</ul>
</div>
</body>
</html>
A voir également:
- Affichage plusieurs vidéos sur page Web en HTLM5
- Comment supprimer une page sur word - Guide
- Web office - Guide
- Comment traduire une page web - Guide
- Capture page web - Guide
- Création page web - Guide
1 réponse
Salut,
http://www.w3schools.com/html/html5_video.asp
Et ça ne fonctionne tout simplement pas car une id est unique or vous avez plusieurs balises avec la même id.
Utilisez simplement plusieurs pages ou une id différente pour chaque vidéo, en HTML5 il n'y a pas besoin de se préoccuper du lecteur.
Pour faire une playlist dans le même lecteur(donc la même balise video) vous pouvez regarder de ce côté ci:
https://www.google.fr/search?q=playlist+video+HTML5
http://www.w3schools.com/html/html5_video.asp
Et ça ne fonctionne tout simplement pas car une id est unique or vous avez plusieurs balises avec la même id.
Utilisez simplement plusieurs pages ou une id différente pour chaque vidéo, en HTML5 il n'y a pas besoin de se préoccuper du lecteur.
Pour faire une playlist dans le même lecteur(donc la même balise video) vous pouvez regarder de ce côté ci:
https://www.google.fr/search?q=playlist+video+HTML5