Bonsoir,

Voici ma première question technique. Elle concerne la balise VIDEO.

J'ai écris le code suivant pour l'affichage de deux vidéos. l'une avec l'attribut contols donnant accès à un lecteur vidéo préformaté et la seconde sans l'attribut controls et piloté via du code Javascript.

Sous Firefox c'est nickel. Les deux vidéos fonctionnent à merveille. Mais en IE8 et sous Chromes cela ne marche pas.

En fait pour être plus précis sour IE8 rien ne marche. Sous Chrome seul celle sans l'attribut controls fonctionne.

En outre j'ai constaté que dans les fichiers exemple fourni sur le site de l'éditeur sous Chrome les deux vidéos fonctionnent.

Les fichiers vidéos de l'éditeur sont sous .mp4 et .ogv.

Mes vidéos réalisées au départ avec CamStudio, donc en .avi ont été converties en .mp4 via l'application FormatFactory et en .ogv via FireFox.

Pourriez-vous me dire pourquoi mes vidéos bien que sauvées sous les formats .ogv et .mp4 telles celles de l'éditeur du livre ne tournent pas toutes les deux à la fois sous Chrome et FireFox ? Et quid de IE8 voire antérieur ?

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<video controls preload="none" poster="Resources/poster.png"
		width="200" height="200">
		<source src="Resources/TestRic.mp4">
 
 
		<source src="Resources/TestRic.ogv">
		Votre navigateur ne supporte pas l'élément vidéo
 
 
	</video>
 
	<video id="video" loop width="200" height="200">
		<source src="Resources/TestRic.mp4">
 
 
		<source src="Resources/TestRic.ogv">
				Votre navigateur ne supporte pas l'élément vidéo
 
 
	</video>
 
	<br/>
 
	<input type="button" value="Play" id="playpause" onclick="playOrPause()" />
	<input type="button" value="Forward" id="forward" onclick="fastForward()" />
	<input type="button" value="Muted" id="mutebutton" onclick="muteOrUnmute()">
 
	<script type="text/javascript">
        
        var video = document.getElementById("video");
 
        function playOrPause() {
                if (video.paused) {
                        video.play();
                        document.getElementById("playpause").value = "Pause";
                } else {
                        video.pause();
                        document.getElementById("playpause").value = "Play";
                }
        }
                
        function fastForward() {
                if (video.playbackRate == 1.0) { // normal
                        video.playbackRate = 10.0;
                        document.getElementById("forward").value = "Normal";
                } else { // Fast forward
                        video.playbackRate = 1.0;
                        document.getElementById("forward").value = "Forward";
                }
                return false;
        }
        
        function muteOrUnmute() {
                video.muted = !video.muted;
                document.getElementById("mutebutton").value = video.muted ? "Unmuted" : "Muted";
        }
 
</script>