Javascript Girl
  1. Javascript Girl
  3. Existe-t-il un moyen de lire des vidéos mpeg dans HTML5?
Intereting Posts
Récupérer jQuery Cookie value Analysez et manipulez les DOM qui sont venus comme entrée de chaîne Comment appeler la méthode c # bouton-clic de javascript? Comment résoudre le C: \ faakepath? Css et javascript n'ont pas inclus lors du rafraîchissement Regex javascript pour un minimum de 8 caractères, au moins un nombre et un caractère spécial, maximum 32 caractères Est-il possible de fermer une fenêtre de navigateur avec javascript? Est-il possible d'attendre que tous les fichiers javascript soient chargés avant d'exécuter le code javascript? Comment désactiver rapidement et facilement toutes les instructions console.log dans mon code? Initialiser les info-bulles après la charge de vue JavaScript / jQuery: remplacer une partie de chaîne? Comment calculer la distance entre deux villes à l'aide de google maps api V3 Faites défiler plusieurs divs de la barre latérale sur l'écran comme 9gag.com. Une bonne documentation de référence API Javascript relative aux navigateurs et DOM Changer la propriété CSS Link surCliquez avec Javascript / JQuery?

Existe-t-il un moyen de lire des vidéos mpeg dans HTML5?

Mon application Web basée sur le PC utilise HTML5, et je souhaite importer des fichiers mpeg dans mon navigateur qui ont été enregistrés de cette façon par une autre application. Existe-t-il un moyen de lire ces fichiers vidéo avec HTML5?

MODIFIER:

L'application essaie de lire les fichiers mpeg du disque dur local plutôt que du serveur. Ainsi, l'utilisateur a la possibilité de choisir les fichiers mpeg pour lire les fichiers mpeg sélectionnés.

HTML: 

<input id="t20provideoinput" type="file" multiple accept="video/*"/> <video id="t20provideo" controls controls>

Javascript: 

 (function localFileVideoPlayerInit(win) { var URL = win.URL || win.webkitURL; var sources = []; var j = 1; var videoNode = document.querySelector('video'); var videoNode1 = document.querySelector('object'); var groupElement = document.getElementsByClassName('metric')[0]; console.log('this is group element ' + groupElement); var playSelectedFile = function playSelectedFileInit(event) { for(var i=0; i<this.files.length; i++){ var file = this.files[i]; var type = file.type; var fileURL = URL.createObjectURL(file); sources.push(fileURL); } groupElement.addEventListener('click', function(){ videoNode.src = sources[0]; }); }; var inputNode = document.getElementById('t20provideoinput'); videoNode.addEventListener('ended', function(){ videoNode.src = sources[j++]; videoNode.load(); videoNode.play(); }, false); if (!URL) { displayMessage('Your browser is not ' + '<a href="http://caniuse.com/bloburls">supported</a>!', true); return; } console.log(inputNode); if (inputNode != null) { inputNode.addEventListener('change', playSelectedFile, false); } }(window));

Modifié à partir de http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/presentation/

J'ai essayé quelques choses comme ajouter des plugins au navigateur, utilisé Mediaelement.js , étiquette d' object utilisée pour voir si ces fichiers mpeg sélectionnés peuvent être lus. Mais, les tentatives ont échoué.

Vous trouverez ci-dessous l'extrait de code où j'ai utilisé l'étiquette d'objet dans html5 

 <object type="video/mpeg" data="test.mpeg" width="200" height="40"> <param name="src" value="test.mpeg" /> <param name="autoplay" value="false" /> <param name="autoStart" value="0" /> </object>

Toute suggestion est très appréciée.

Par "mpeg", si vous faites référence à H.264 / MP4 :

La réponse n'est pas sur tous les navigateurs . Firefox et Opera ne prennent pas en charge MP4 dans la <video> HTML5 <video> .

De plus, Google a annoncé (en 2011) qu'ils supprimeront le support H.264 de Chrome . La raison semble être l' acquisition par Google de On2 Technologies et du codec VP8 . Ce qui est un codec également puissant et rendu gratuit par Google après l'acquisition. Chrome, Firefox et Opera prennent en charge ce codec via WebM qui consiste en une vidéo VP8 et un audio Vorbis.

Donc, probablement assez rapidement, Internet Explorer et Safari seront les seuls navigateurs supportant H.264; Ce n'est pas un codec sans redevance et Microsoft et Apple sont des détenteurs de brevets!

Donc, ce que vous pouvez faire (pour le support multi-navigateur) est;

  1. Revenez à Adobe Flash (lecteur) lorsque H.264 n'est pas pris en charge.
  2. Créez plusieurs versions codées de vos vidéos, y compris MP4, WebM et Ogg (dans l'ordre).

Ou mieux, voir cet exemple d'un mécanisme de secours (par Kroc Camen ) qui les combine tous:

Note 1 : J'ai légèrement modifié ceci pour ajouter un support WebM.
Note 2 : vous devez inclure MP4 en haut, en raison d'un bug iPad qui arrête la vidéo en recherchant la source. 

 <!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --> <!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 --> <video width="640" height="360" controls> <!-- MP4 must be first for iPad! --> <source src="__VIDEO__.MP4" type="video/mp4" /><!-- IE / Safari / iOS video --> <source src="__VIDEO__.WEBM" type="video/webm" /><!-- Firefox / Chrome / Opera / Android --> <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 --> <!-- fallback to Flash: --> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <!-- fallback image. note the title field below, put the title of the video there --> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want --> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Formats: <a href="__VIDEO__.WEBM">"WebM"</a>, <a href="__VIDEO__.OGV">"Ogg"</a> </p>

Par «mpeg», si vous faites référence à MPEG-1 ou MPEG-2 :

Alors non! Et je viens d'écrire un tas de merde!

Il est clair que vous ne pouvez pas lire mpeg1 ou mpeg2 en utilisant html5. J'avais aussi une idée de ce genre. Vous pouvez intégrer un lecteur Web VLC qui peut gérer ces formats vidéo très facilement. Peut-être envisagez-vous … https://wiki.videolan.org/Documentation:WebPlugin/ 

 <html> <title>VLC Mozilla plugin test page</title> <body> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="640" height="480" id="vlc"> </embed> <script language="Javascript"> <!-- var vlc = document.getElementById("vlc"); vlc.audio.toggleMute(); //!--> </script> </body> </html>