是否有HTML5播放MPEG视频的方法吗？(Is there a way to play mpeg

我的基于PC的Web应用程序使用HTML5，我想导入MPEG文件在我的浏览器已被其他应用程序保存的方式来播放。是否有播放这些视频文件与HTML5的方法吗？

编辑：

该应用程序尝试从本地硬盘驱动器，而不是从服务器播放MPEG文件。因此，用户必须选择MPEG文件播放选定的MPEG文件的能力。

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

从修改http://jsfiddle.net/dsbonev/cCCZ2/embedded/result,js,html,css/presentation/

我试着像插件添加到浏览器的几件事情，用Mediaelement.js ，使用object标签，看看那些选定的MPEG文件可以播放。但是，在尝试均告失败。

下面是我使用的对象标签在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>

任何的建议是高度赞赏。

Answer 1:

通过“MPEG”，如果你指的是H.264 / MP4 ：

UPDATE（2017年，月）：

MP4是现在支持所有主要的浏览器。（IE9 +，以及所有现代桌面和移动浏览器）。
不要使用闪光灯作为后备了，闪光灯几乎是死了。

其他注意事项（从caniuse）：

Firefox支持在Windows 7及更高版本，因为21版本的H.264。
Firefox支持H.264在Linux上，因为版本26，如果安装了适当的GStreamer插件。
在Windows 7中，支持的最大分辨率为1920×1088像素的软件和DXVA解码。 MSDN）。
Chrome浏览器有较长的H.264视频性能问题。
浏览器有一个视频与多音轨（多语言支持）故障：IE 11支持的话，火狐播放最后一首曲目时，Chrome播放第一首曲目。

老答案 （保持历史的目的）：

~~答案是“不是所有的浏览器”。~~ ~~Firefox和Opera不支持HTML5中MP4 <video>标签..~~

此外，谷歌已经宣布（2011年），他们将被从Chrome中移除支持H.264。 原因似乎是谷歌的收购的On2技术和VP8编解码器 。这是一个同样强大的编解码器和制造免版税收购后由谷歌。 Chrome浏览器，Firefox和Opera支持通过该编解码器的WebM其中包括VP8视频和Vorbis音频的。

因此，可能很快，Internet Explorer和Safari浏览器将支持H.264唯一的浏览器; 这是不是一个免版税的编解码器和微软和苹果的专利持有人！..

所以，你可以做什么（对于跨浏览器支持）是;

落回的Adobe Flash（播放器）时，不支持H.264。
创建视频，包括MP4和WebM和Ogg（按顺序）的多个编码版本。

或者更好的，看一个回退机制（通过这个例子，克洛克卡门 ），它结合了所有这些：

注1：我稍微修改这个增加WebM的支持。
注2：您应该包括MP4在顶部，因为iPad的错误，停止视频的同时搜索源。

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

通过“MPEG”，如果你指的是MPEG-1或MPEG-2 ：

那就不要！我只是写了一堆废话！

Answer 2:

很显然，你不能使用HTML5播放MPEG1或MPEG2。我也一直在寻找到类似的东西。你可以嵌入一个VLC的网络播放器，可以很容易地处理这些视频格式。也许考虑... 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>

文章来源: Is there a way to play mpeg videos in HTML5?