有没有一种方法可以在HTML5中播放mpeg视频?

13
我的基于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标签的代码片段

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

非常感谢您的建议。


1
是的,有的。你尝试过什么? - Matt Ball
4
在一些浏览器上可能是“可以”,但最好使用一些备用方案。 - Passerby
@MattBall。感谢您发布这篇文章的链接,它让我大开眼界。无论如何,我尝试使用MediaElement.js,但它也不支持MPEG视频。我还尝试了使用object标签,但对我也没有用。请告诉我从哪里开始。 - sagar pant
3个回答

16

如果你所说的 "mpeg" 是指H.264/MP4


更新(2017年12月):

  • 现在,所有主流浏览器都支持MP4格式(IE9+以及所有现代桌面和移动浏览器)。
  • 不再使用Flash作为备选方案,Flash已经几乎死亡了。

其他注意事项(来自caniuse):

  • Firefox自版本21开始,在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。

新回答: 这个问题的答案是:并不是所有的浏览器都支持。Firefox和Opera不支持在HTML5的<video>标签中使用MP4格式。

此外, 谷歌已经宣布(在2011年)将会从Chrome中移除对H.264的支持。原因似乎是谷歌收购On2 TechnologiesVP8编解码器,这种同样强大的编解码器在被谷歌收购后变成了免版税的。Chrome,Firefox和Opera通过WebM支持这种编解码器,其中包括VP8视频和Vorbis音频。

很可能不久,只有Internet ExplorerSafari支持H.264;这是一种非免费编解码器,MicrosoftApple都是专利持有者!您可以采取以下措施(实现跨浏览器支持):

  1. 当不支持H.264时,回退到Adobe Flash(播放器)
  2. 创建多个编码版本的视频,包括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" 是指 MPEG-1或MPEG-2

那么不行 :(


1
是的,我的意思是 MPEG-1。 - sagar pant
我认为这是你问题的答案。 - Onur Yıldırım
最新版的Firefox(或自2013年初回答以来浏览器的任何更新)是否影响您提供的代码?我问这个问题是因为我想将其整合到一个PHP函数中,以供将来的网站使用。 - Zach Smith
@HollerTrain,你没有点击我给的第一个链接吗?我会尽快更新这个答案。 - Onur Yıldırım
是的,我知道。你是否意识到自从你在2013年回答以来,火狐浏览器在2017年推出了一次巨大的更新?如果你访问这里 - https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats - 你会发现火狐现在支持MP4格式。 - Zach Smith
Firefox在2017年之前就已经支持了(具体来说是在2015年)。你可以从这个链接中看到:https://caniuse.com/#search=mp4。无论如何,我已经更新了答案,谢谢。 - Onur Yıldırım

6

很明显,你不能使用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>

3

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接