Javascript 有没有办法在HTML5中播放mpeg视频？

我的基于pc的web应用程序使用HTML5，我想导入其他应用程序以这种方式保存的mpeg文件在我的浏览器中播放。有没有办法用HTML5播放这些视频文件

编辑：

应用程序尝试从本地硬盘而不是服务器播放mpeg文件。因此，用户可以选择mpeg文件来播放选定的mpeg文件

HTML:

非常感谢您的建议。

如果您指的是，请使用“mpeg”：

---

更新（2017年12月）：

• 所有主流浏览器都支持MP4。（IE9+，以及所有现代桌面和移动浏览器）
• 不要再使用flash作为后备方案，flash几乎已经死了

其他注释（来自caniuse）：

• Firefox在Windows 7及更高版本上支持H.264，从版本21开始
• 如果安装了相应的gstreamer插件，Firefox自版本26起在Linux上支持H.264
• 在Windows 7中，软件和DXVA解码支持的最大分辨率为1920×1088像素。MSDN）
• Chrome的长h.264视频存在性能问题
• 浏览器在一个视频中有一个以上的音轨（支持多语言）时会遇到问题：IE11支持，Firefox播放最后一个音轨，Chrome播放第一个音轨

---

旧答案（保留用于历史目的）：

答案是“不是在每个浏览器上”。Firefox和Opera不支持HTML5标签中的MP4

另外，（2011年）他们将从Chrome中删除H.264支持。原因似乎是谷歌的，。这是一个同样强大的编解码器，由谷歌收购后制作。Chrome、Firefox和Opera通过包含VP8视频和Vorbis音频的支持此编解码器

所以很快，Internet Explorer和Safari将成为唯一支持H.264的浏览器；它不是免版税的编解码器，微软和苹果是专利持有人

因此，您可以做的（跨浏览器支持）是

退回到不支持H.264时

创建多个编码版本的视频，包括MP4、WebM和Ogg（按顺序）

或者更好的方法是，请参见此回退机制（by）的示例，它将所有这些功能结合在一起：

注意1：我稍微修改了一下，添加了WebM支持。
注2：您应该在顶部包括MP4，因为iPad的一个bug会在搜索源时停止视频

下载视频：
封闭格式：
开放格式：，

通过“mpeg”，如果您指的是：

---

<0>：（

很明显，你不能使用HTML5播放MPEG1或MPEG2。我也在寻找类似的东西。你可以嵌入一个VLC网络播放器，可以很容易地处理这些视频格式。也许考虑……/P>

VLC Mozilla插件测试页面

对于MPEG1，您可以尝试。 JSMpeg具有较低的延迟

---

您可以检查利弊

是的，有。但您最好使用一些备用解决方案。@MattBall。感谢您发布文章的链接。这是一个令人大开眼界的消息。无论如何，我尝试过使用MediaElement.js，但它也不支持MPEG视频。我也尝试过使用对象标记。但是，它对我也不起作用。请让我看看我知道从这里该往哪里走。是的，我指的是MPEG-1。不过，我认为这是对你问题的回答。firefox的最新版本（或自2013年初你回答这个问题以来的浏览器更新）是否您提供的代码效果如何？我这样问，因为我想将其应用到php函数中，以供将来使用sites@HollerTrain你没有点击我给出的第一个链接吗？我很快会更新这个答案。是的，我点击了。你意识到2017年firefox发布了一个巨大的版本吗？如果你点击这里，你会看到firefox现在支持mp4

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

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

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

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

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