javascript - 有没有办法用HTML5播放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>

任何建议都将受到高度赞赏。

最佳答案

如果您是指 H.264/MP4 ，则用“mpeg”表示:

更新(2017年12月):

MP4在所有主要浏览器中都是now supported。 (IE9 +，以及所有现代台式机和移动浏览器)。

不再使用Flash作为后备，Flash几乎已死。

其他说明(来自犬类):

从版本21开始，Firefox在Windows 7和更高版本上支持H.264。

如果安装了适当的gstreamer插件，Firefox从版本26开始就在Linux上支持H.264。

在Windows 7中，软件和DXVA解码的最大支持分辨率均为1920×1088像素。 MSDN)。

Chrome的h.264较长视频存在性能问题。

浏览器在视频中有多个音频轨道时遇到麻烦(用于多语言支持):IE 11支持它，Firefox播放最后一个轨道，Chrome播放第一个轨道。

旧答案(出于历史目的保留):

答案是“不是在每个浏览器上”。 Firefox和Opera在HTML5 <video>标记内不支持MP4。

此外，Google has announced(在2011年)表示他们将是，从Chrome的中删除了对H.264的支持。原因似乎是Google的acquisition的On2 Technologies和的VP8 codec 。收购后，这是同等强大的编解码器，由Google制作为royalty-free。 Chrome，Firefox和Opera通过 WebM (由VP8视频和Vorbis音频组成)支持此编解码器。

大概很快就可以了， Internet Explorer 和 Safari 将是唯一支持H.264的浏览器。这不是免版税的编解码器，并且微软和苹果是专利持有人!

因此，您可以做的(为跨浏览器支持)是:

当不支持H.264时回退到Adobe Flash (player)。

创建视频的多个编码版本，包括MP4，WebM和Ogg(按顺序)。

或更好，请参见此后备机制的示例(由Kroc Camen结合使用):

注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-1 or MPEG-2 ，则用“mpeg”表示:

那就不要 :(