Jouer une vidéo locale dans une page HTML5

Version imprimable

Salut à tous,

J'apprends le javascript, et j'en suis plutôt au début. J'ai essayé de faire marcher un code que j'ai trouvé sur jsfiddle mais je n'y parvient pas.

Voici le code en question: http://jsfiddle.net/dsbonev/cCCZ2/presentation/

Je remarque que le code est supposé s'exécuter au sein d'une fonction document.onload. Du coup, je l'ai repris et j'ai changé seulement deux choses: lorsque document.querySelector est appelé, j'ai utilisé un id au lieu du nom des noeuds (video et input) et j'ai précédé d'un # chaque id lors de l'appel. Voilà le code que j'ai entre mes balises <script>

Code:

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
 
document.onload=(function localFileVideoPlayerInit(win) {
    var URL = win.URL || win.webkitURL,
        displayMessage = (function displayMessageInit() {
            var node = document.querySelector('#message');
 
            return function displayMessage(message, isError) {
                node.innerHTML = message;
                node.className = isError ? 'error' : 'info';
            };
        }()),
        playSelectedFile = function playSelectedFileInit(event) {
            var file = this.files[0];
 
            var type = file.type;
 
            var videoNode = document.querySelector('#myvideo');
 
            var canPlay = videoNode.canPlayType(type);
 
            canPlay = (canPlay === '' ? 'no' : canPlay);
 
            var message = 'Can play type "' + type + '": ' + canPlay;
 
            var isError = canPlay === 'no';
 
            displayMessage(message, isError);
 
            if (isError) {
                return;
            }
 
            var fileURL = URL.createObjectURL(file);
 
            videoNode.src = fileURL;
        },
        inputNode = document.querySelector('#myinput');
   if (!URL) {
        displayMessage('Your browser is not ' + 
           '<a href="http://caniuse.com/bloburls">supported</a>!', true);
 
        return;
    }                
 
    inputNode.addEventListener('itemAdded', playSelectedFile, false);
}(window));

et l'HTML correspondant

Code:

1
2
3
4
 
<div id="message"></div>
<input id="myinput" type="file" accept="video/*"/>
<video id="myvideo" controls autoplay></video>

Dans ma version, playSelectedFile n'est jamais appelé. Et je sèche, d'autant que je sais qu'il y a pas mal d'évidences à côté desquelles je pourrais passer.

Un conseil, une solution?

Merci!

10/03/2015, 10h42
SylvainPV

Avec le jsfiddle en lien, j'arrive à lire correctement une vidéo depuis mon disque dur. Peux-tu refaire un fiddle avec tes modifications ?

Le truc, c'est que mes modifications fonctionnent dans le fiddle. Lorsque je place le code dans mon fichier, avec ou sans les modifications, ça ne marche pas, même en version minimaliste (juste le contenu du fiddle). Voilà le contenu de mon fichier html qui ne fonctionne pas:

Code:

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
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>  
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>play.it</title>
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
                        video, input {
                                display: block;
                        }
                        input {
                                width: 100%;       
                        }
                        .info {
                                background-color: aqua;            
                        }
                        .error {
                                background-color: red;
                                color: white;
                        }
        </style>
  <script>
document.onload=(function localFileVideoPlayerInit(win) {
    var URL = win.URL || win.webkitURL,
        displayMessage = (function displayMessageInit() {
            var node = document.querySelector('#message');
             return function displayMessage(message, isError) {
                node.innerHTML = message;
                node.className = isError ? 'error' : 'info';
            };
        }()),
        playSelectedFile = function playSelectedFileInit(event) {
            var file = this.files[0];
             var type = file.type;
             var videoNode = document.querySelector('#myvideo');
             var canPlay = videoNode.canPlayType(type);
             canPlay = (canPlay === '' ? 'no' : canPlay);
             var message = 'Can play type "' + type + '": ' + canPlay;
             var isError = canPlay === 'no';
             displayMessage(message, isError);
             if (isError) {
                return;
            }
             var fileURL = URL.createObjectURL(file);
             videoNode.src = fileURL;
        },
        inputNode = document.querySelector('#myinput');
   if (!URL) {
        displayMessage('Your browser is not ' + 
           '<a href="http://caniuse.com/bloburls">supported</a>!', true);
         return;
    }                
inputNode.addEventListener('change', playSelectedFile, false);
}(window));
                </script>
  </head>
<body>
<div id="message"></div>
<input id="myinput" type="file" accept="video/*"/>
<video id="myvideo" controls autoplay></video>
</body>
</html>

Quand je l'exécute, ça semble s'afficher correctement et firebug me donne "TypeError: inputNode is null" sur la ligne où j'ajoute l'eventListener à l'input. Le nom de fichier s'affiche mais pas le message. La vidéo n'est pas jouée.

Code:

document.onload=(function localFileVideoPlayerInit(win) { ... }(window));

Ça ne peut pas marcher comme ça : avec ce code, la fonction localFileVideoPlayerInit est immédiatement exécutée et son résultat (undefined) est attribué à document.onload.

Je pense que le mieux serait de retirer le document.onload et de déplacer la balise script juste avant la fermeture du </body>

Code:

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
59
60
61
62
63
64
65
66
67
68
<!doctype html>  
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>play.it</title>
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
            video, input {
                display: block;
            }
            input {
                width: 100%;       
            }
            .info {
                background-color: aqua;            
            }
            .error {
                background-color: red;
                color: white;
            }
        </style> 
  </head>
<body>
<div id="message"></div>
<input id="myinput" type="file" accept="video/*"/>
<video id="myvideo" controls autoplay></video>
 
<script>
(function localFileVideoPlayerInit(win) {
    var URL = win.URL || win.webkitURL,
        displayMessage = (function displayMessageInit() {
            var node = document.querySelector('#message');
             return function displayMessage(message, isError) {
                node.innerHTML = message;
                node.className = isError ? 'error' : 'info';
            };
        }()),
        playSelectedFile = function playSelectedFileInit(event) {
            var file = this.files[0];
             var type = file.type;
             var videoNode = document.querySelector('#myvideo');
             var canPlay = videoNode.canPlayType(type);
             canPlay = (canPlay === '' ? 'no' : canPlay);
             var message = 'Can play type "' + type + '": ' + canPlay;
             var isError = canPlay === 'no';
             displayMessage(message, isError);
             if (isError) {
                return;
            }
             var fileURL = URL.createObjectURL(file);
             videoNode.src = fileURL;
        },
        inputNode = document.querySelector('#myinput');
   if (!URL) {
        displayMessage('Your browser is not ' + 
           '<a href="http://caniuse.com/bloburls">supported</a>!', true);
         return;
    }                
   inputNode.addEventListener('change', playSelectedFile, false);
})(window);
</script></body></html>

10/03/2015, 12h14
billybobbonnet
merci pour ta réponse. Le problème persiste, même avec ta solution. Par ailleurs, est-ce que je ne suis pas censé conserver au moins ça dans le document.onload? ->
Code:

1 2 3 inputNode = document.querySelector('#myinput'); inputNode.addEventListener('change', playSelectedFile, false);
10/03/2015, 14h27
SylvainPV

Pas si tu as placé le script à la fin du body. Voir : http://javascript.developpez.com/faq...positionScript