Choisissez la vidéo locale et la lire en HTML5 (tous les locaux, même dossier)

pour l'école J'ai besoin d'utiliser un lecteur vidéo HTML5 avec des contrôles supplémentaires et la possibilité de choisir un fichier à partir du lecteur local. La page est aussi locale. Donc, ce n'est pas téléchargé. Les fichiers (HTML et vidéo) se trouvent dans le même dossier local.Choisissez la vidéo locale et la lire en HTML5 (tous les locaux, même dossier)

Pour le choix-chose j'utilise un formulaire avec <form><input type="file" id="chosen" /><button type="submit" onclick="open();">Change</button></form>. Voici mon JavaScript qui doit manipuler la source du lecteur vidéo:

function open() 
{ 
    var file=document.getElementById('chosen'); 
    var fileURL = window.URL.createObjectURL(file); 
    player.src=fileURL; 
    player.load(); 
}

Le lecteur vidéo ressemble à ceci:

<video id=player> 
<source src="big-buck-bunny_trailer.webm" type="video/webm" /> 
<source src="trailer_480p.mov" type"video/mp4" /> 
</video>

et bien sûr, je l'ai connecté la variable « joueur » avec mon lecteur vidéo. La chose player.load() - fonctionne correctement, donc la fonction est appelée correctement.

Maintenant ma question: Qu'est-ce qui ne va pas ou qui manque dans la partie Javascript? Le projet ne fonctionne pas comme expliqué.

Peut-être que vous pouvez m'aider. Merci;)

Source

2012-04-20 Schneeschipp

Quelle est votre question? – JJJ

Vérifiez-vous dans FF ou un autre navigateur? –

Je suis désolé, j'étais pressé. La question est donc de savoir comment le JavaScript peut manipuler la source-tag de la vidéo. Vidéo et HTML-fichier sont dans le même dossier, localement. Je vérifie IE9 et FF – Schneeschipp

Je ne suis pas sûr de ce que vous demandez, mais il y a quelques problèmes dans votre script.

function openPlayer(){ // open() is a native function, don't override 
    var vplayer=document.getElementById('player'); // A reference to the video-element 
    var file=document.getElementById('chosen').files[0]; // 1st member in files-collection 
    var fileURL = window.URL.createObjectURL(file); 
    vplayer.src=fileURL; 
    vplayer.load(); 
    return; // A good manner to end up a function 
}

Et n'oubliez pas de changer le nom de la fonction en onclick().

En savoir plus sur <video>: https://developer.mozilla.org/en/HTML/Element/video

Surtout pour les scripts: https://developer.mozilla.org/en/DOM/HTMLMediaElement

Source

2012-04-20 12:22:17 Teemu

Je ne sais pas si l'absence de codec est à l'origine un problème ici, vous url source vidéo doit ressembler à ceci:

<source src="big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"' />

Source

2012-04-20 19:34:56 defau1t

Choisissez la vidéo locale et la lire en HTML5 (tous les locaux, même dossier)

Répondre

Questions connexes