有没有办法在HTML5中播放mpeg视频？ [英] Is there a way to play mpeg videos in HTML5?

问题描述

我的基于电脑的Web应用程序使用HTML5，我想导入mpeg文件在我的浏览器中播放，这些文件已被其他应用程序保存。有没有办法用HTML5播放这些视频文件？

My pc based web application uses HTML5, and I want to import mpeg files to play in my browser which have been saved that way by other application. Is there a way to play these video files with HTML5?

编辑：

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

The application tries to play the mpeg files from the local hard drive rather than from the server. So, user has an ability to choose the mpeg files to play the selected mpeg files.

HTML：

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

Javascript：

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文件。但是，这些尝试都没有成功。

I tried few things like adding plugins to the browser, used Mediaelement.js, used object tag to see if those selected mpeg files can be played. But, the attempts were unsuccessful.

下面是我在html5中使用object标签的代码片段

Below is the code snippet where I used the object tag in 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>

我们非常感谢任何建议。

Any suggestion is highly appreciated.

推荐答案

按mpeg，如果您指的是 H .264 / MP4 ：

---

更新（2017年， 12月）：

By "mpeg", if you are referring to H.264/MP4:

---

UPDATE (2017, December):

• MP4是现在支持。 （IE9 +，以及所有现代桌面和移动浏览器）。


• 不要再使用flash作为后备，Flash几乎已经死了。

• MP4 is now supported by all major browsers. (IE9+, and all modern desktop and mobile browsers).
• Don't use flash as a fallback anymore, Flash is almost dead.

其他Notes（来自caniuse）：

Other Notes (from caniuse):

• Firefox支持Windows 7及更高版本的H.264版本。


• 如果安装了相应的gstreamer插件，Firefox自26版以来就支持Linux上的H.264。


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


• Chrome浏览器在长h.264视频时出现性能问题。


• 浏览器在视频中遇到多个音轨问题（适用于多语言支持）：IE 11支持它，Firefox播放最后一首曲目，Chrome播放第一首曲目。

• Firefox supports H.264 on Windows 7 and later since version 21.
• Firefox supports H.264 on Linux since version 26 if the appropriate gstreamer plug-ins are installed.
• In Windows 7, the maximum supported resolution is 1920 × 1088 pixels for both software and DXVA decoding. MSDN).
• Chrome has performance problems with long h.264 videos.
• Browsers have trouble with more than one audio track in a video (for multi-language support): IE 11 supports it, Firefox plays the last track, Chrome plays the first track.

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

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

The answer is "not on every browser". Firefox and Opera does not support MP4 within the HTML5 <video> tag..

另外， Google 宣布 （2011年）他们将从Chrome中删除H.264支持。原因似乎是Google的 收购 On2 Technologies 和 VP8编解码器 。这是一个同样强大的编解码器，并在收购后由Google提供免版税。 Chrome，Firefox和Opera通过 WebM 支持此编解码器，其中包含VP8视频和Vorbis音频。

Also, Google has announced (in 2011) that they will be removing H.264 support from Chrome. The reason seems to be Google's acquisition of On2 Technologies and the VP8 codec. Which is an equally powerful codec and made royalty-free by Google after the acquisition. Chrome, Firefox and Opera supports this codec via WebM which consists of VP8 video and Vorbis audio.

所以可能很快， Internet Explorer 和 Safari 将是唯一支持H.264的浏览器;这不是免版税的编解码器， Microsoft 和 Apple 是专利持有人！..

So probably soon enough, Internet Explorer and Safari will be the only browsers supporting H.264; which is not a royalty-free codec and Microsoft and Apple are patent holders!..

那么你呢可以做（用于跨浏览器支持）;

So what you can do (for cross-browser support) is;

1. 回到 Adob​​e Flash （播放器）。


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

1. Fall back to Adobe Flash (player) when H.264 is not supported.
2. Create multiple encoded versions of your videos including MP4, WebM and Ogg (in order).

或者更好，请参阅此回退机制示例（通过< a href =http://camendesign.com/code/video_for_everybody =nofollow noreferrer> Kroc Camen ）将它们全部组合在一起：

Or better, see this example of a fallback mechanism (by Kroc Camen) which combines them all:

注意1 ：我稍微修改了此项以添加WebM支持。

注意2 ：您应该包含MP4在顶部，因为iPad错误会在搜索源时停止视频。

Note 1: I slightly modified this to add WebM support.
Note 2: You should include MP4 at the top, because of an iPad bug that stops the video while searching for the 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>

按mpeg，如果你指的是 MPEG-1或MPEG-2 ：

那么不！我刚刚写了一堆垃圾！

By "mpeg", if you are referring to MPEG-1 or MPEG-2:

Then NO! and I just wrote a bunch of crap!

这篇关于有没有办法在HTML5中播放mpeg视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！