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/

我尝试了一些东西,比如在浏览器中添加插件,used Mediaelement.js, usedobject标签来查看是否可以播放这些选定的 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>

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

4

3 回答 3

15

通过“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。

此外,Google 已宣布(2011 年)他们将从 Chrome 中删除 H.264 支持。原因似乎是谷歌收购On2 TechnologiesVP8 编解码器。这是一个同样强大的编解码器,在收购后被谷歌免版税。Chrome、Firefox 和 Opera 通过由 VP8 视频和 Vorbis 音频组成的 WebM支持此编解码器。

所以可能很快,Internet ExplorerSafari将成为唯一支持 H.264 的浏览器;这不是免版税的编解码器,微软苹果是专利持有者!..

所以你可以做的(跨浏览器支持)是;

  1. 在不支持 H.264 时回退到Adob​​e 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

那就不要 :(

于 2013-02-21T02:02:10.497 回答
5

很明显,您不能使用 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>
于 2013-09-26T23:06:56.000 回答
2

对于 MPEG1,您可以尝试jsmpeg。JSMpeg 延迟较低。

您可以检查https://jsmpeg.com/的优缺点

于 2019-11-29T10:09:39.633 回答