Jouer une vidéo locale dans une page HTML5 [Débutant(e)]

**billybobbonnet** · 10/03/2015, 10h24

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 JAVASCRIPT :

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
 
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 HTML :

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

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!

**SylvainPV** · 10/03/2015, 10h42

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

**billybobbonnet** · 10/03/2015, 11h12

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 HTML :

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
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.

**SylvainPV** · 10/03/2015, 11h35

Code :

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

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 html :

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
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>

**billybobbonnet** · 10/03/2015, 12h14

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 :

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

1
2
3
 
inputNode = document.querySelector('#myinput');
  inputNode.addEventListener('change', playSelectedFile, false);

**SylvainPV** · 10/03/2015, 14h27

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

Jouer une vidéo locale dans une page HTML5 [Débutant(e)]

JavaScript

Discussions similaires

Partager

Partager