web-dev-qa-db-ja.com

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>

どんな提案でも大歓迎です。

javascripthtmlmpeg
11
sagar pant

「mpeg」とは、H.264/MP4を参照している場合：

[〜＃〜]更新[〜＃〜]（2017年12月）：

  • MP4は 現在サポートされています すべての主要なブラウザで使用されています。 （IE9 +、およびすべての最新のデスクトップおよびモバイルブラウザー）。
  • フォールバックとしてフラッシュを使用しないでください。フラッシュはほとんど機能していません。

その他の注意事項（caniuseから）：

  • Firefoxは、バージョン21以降のWindows7以降でH.264をサポートしています。
  • 適切なgstreamerプラグインがインストールされている場合、Firefoxはバージョン26以降のLinuxでH.264をサポートします。
  • Windows 7では、サポートされている最大解像度は、ソフトウェアとDXVAデコードの両方で1920×1088ピクセルです。 MSDN）。
  • Chromeには、長いh.264ビデオでパフォーマンスの問題があります。
  • ブラウザは、ビデオ内の複数のオーディオトラックで問題が発生します（多言語サポートの場合）：IE 11はそれをサポートし、Firefoxは最後のトラックを再生しますChrome最初のトラックを再生します。

古い回答（歴史的な目的のために保持）:

答えは「すべてのブラウザにあるわけではない」です。 FirefoxおよびOperaはHTML5内のMP4をサポートしていません<video> 鬼ごっこ..

また、 Googleは発表 （2011年）Hを削除することを発表しました。 Chromeからの264のサポート。その理由は、Googleの 買収 of On2 Technologies およびVP8コーデック。これは同様に強力なコーデックであり、買収後にGoogleによって ロイヤリティフリー 作成されました。 Chrome、Firefox、およびOperaは、VP8ビデオとで構成されるWebMを介してこのコーデックをサポートしますVorbisオーディオ。

したがって、おそらくすぐに、Internet ExplorerとSafariが唯一のブラウザになりますH.264をサポートします。これはロイヤリティフリーのコーデックではなく、MicrosoftとAppleは特許ですホルダー！..

したがって、（クロスブラウザサポートのために）できることは次のとおりです。

  1. H.264がサポートされていない場合は、 Adobe Flash（player） にフォールバックします。
  2. MP4、WebM、Oggを含む複数のエンコードされたバージョンのビデオを（順番に）作成します。

または、これらすべてを組み合わせたフォールバックメカニズムの例を参照してください（ Kroc Camen による）：

注1：WebMサポートを追加するためにこれを少し変更しました。
注2：ソースの検索中にビデオを停止するiPadのバグがあるため、上部にMP4を含める必要があります。

<!-- 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を参照している場合：

それならいいえ:(

17
Onur Yıldırım

Html5を使用してmpeg1またはmpeg2を再生できないことは明らかです。私もそのようなことを調べていました。これらのビデオ形式を非常に簡単に処理できるVLCWebプレーヤーを埋め込むことができます。たぶん考えてみてください... 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>
5
Cris Rockwell

MPEG1の場合、 jsmpeg を試すことができます。 JSMpegは待ち時間が短くなります。

そして、あなたはチェックすることができます https://jsmpeg.com/ 賛否両論

0
foxiris