Discussion :

[RicardoBxl]

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>

[Vil'Coyote]

http://sharktracks.co.uk/lcc/webmedia/video.html

lire le tableau comparatif, ie8 ne supporte aucun des 2 formats.

[Bovino]

Ben surtout, IE8 ne reconnait pas la balise <video> tout court !

[Vil'Coyote]

Ben surtout, IE8 ne reconnait pas la balise <video> tout court !

d'un autre côté y a pas grand monde qui supporte ie tout court.

[RicardoBxl]

Bonsoir à tous,

Après plusieurs tests avec le balise

Code :

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

<video>

et la balise

Code :

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

<object>

je suis parvenu au code ci-dessous qui fonctionne bien sous Safari, Chrome, FireFox et Opera.

Quant à Internet Explorer, je n'arrive pas à lancer mes vidéos. C'est bien simple à la différence des autres navigateurs IE ne montre même pas à l'écran l'emplacement de ma vidéo.

Comme vous pouvez le voir j'ai mis deux types de fichiers. Un .ogv et un .mp4. Dois-je proposer d'autres formats de fichier tels .wmv .omv bref toute les extensions possibles pour être sûr que cela marche et ce sous un maximum de versions IE ?

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
 
<video width="320" height="240" controls>
 
  <source src="Resources/TestRic.mp4" type="video/mp4" />
  <source src="Resources/TestRic.ogv" type="video/ogg"; 
 
codecs="theora,vorbis" />
 
    <object id="flowplayer" data="flowplayer-3.2.2.swf" type="application/x-             
    
    shockwave-flash" width="320" height="240" >
 
    <param name="movie" value="flowplayer-3.2.2.swf">
    <param name="allowfullscreen" value="true">
    <param name="flashvars" value="config={'clip': 
    {'url':'Resources/TestRic.mp4','autoPlay':false}}">
 
    </object> 
 
</video>

[Vil'Coyote]

du flv avec un lecteur flash. ça reste le plus classique pour la compatibilité ie