Récupérer les évènements d'une balise video.

**elekaj34** · 27/09/2013, 11h08

Bonjour,

Je cherche a récupérer les évènements "play" et "ended" de ma balise vidéo
Voici donc le code de ma page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>MA VIDEO</title>
		<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
		<script type="text/javascript"> 
			var video=document.getElementById("myvideo");
 
			video.ended = function(e) {
				alert("La video est finie !");
			}
			video.play = function(e) {
				alert("La video est finie !");
			}
 
		</script>						
	</head>
 
	<body>
		<video id="myvideo" controls width="640" height="360" poster="thumbs/test.jpg" preload>
			<source src="videos/test.mp4" type="video/mp4">
			<source src="videos/test.webm" type="video/webm">
		</video>
	</body>
</html>

Évidemment ca marche po !
Faut il charger d'une quelconque manière l'API HTML 5 (il me semble que non mais après tout autant en être sûr).
Dois je passer par un framework particulier ?

Pour info, dans les erreurs JS retournées par la barre webdevelopper de Firefox, j'ai un assez terrible :

TypeError: video is null (à la ligne 10)

L'erreur est sur la ligne "video.ended = function(e) {"

Merci pour votre aide

**Bovino** · 27/09/2013, 11h36

Mouais... un grand classique.

Au moment où ton script s'exécute, l'élément <video> n'existe pas encore dans le document, tu ne peux donc pas t'en servir !

**elekaj34** · 27/09/2013, 12h27

Merci de m'avoir enlevé la m....e des yeux

En mettant le code après la balise vidéo (et en passant par addEventListener) ca va beaucoup mieux

Voilà le code pour les autres qui auront le problème.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<video id="myvideo" controls width="640" height="360" poster="thumbs/test.jpg" preload>
	<source src="videos/test.mp4" type="video/mp4">
	<source src="videos/test.webm" type="video/webm">
</video>
 
<script type="text/javascript"> 
	var video=document.getElementById("myvideo");
 
	video.addEventListener("ended", videoEnd, false);
	video.addEventListener("playing", videoStart, false);
 
	function videoEnd(e) {
		mon code 
	}
	function videoStart(e) {
		mon code
	}
</script>

Récupérer les évènements d'une balise video. [API HTML5]

JavaScript

Discussions similaires

Partager

Partager