0

ウェブサイトで標準のビデオ タグを使用しています。しかし、少なくとも Chrome、Firefox、および Safari でファイルをサポートしてもらいたいです。バックアップファイルをどこかに置くことはできますか?

<video id="videoarea" controls="controls" poster="" src="" class="sandbox"></video>

<li movieurl="media/fiat.mp4" moviesposter="http://www.jingleweb.nl/wp-content/uploads/2012/05/logo-Fiat-Zomer-Radio.png">
    <p>1.</p>
        LG TV commercial
</li>

そのリスト項目は単なる例であり、コース外のリストにあります。そこにmp4ファイルをロードします。しかし、Firefox はそれをサポートしていません。だから私の質問は、そこにバックアップファイルを入れて、Firefox がそのファイルを再生できるかどうかです。

リストを制御するjsは次のとおりです。

$(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        })
        $("#playlist li.active").removeClass("active");
        $(this).addClass("active");
    })

    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    })
})
4

1 に答える 1

0

更新されたメッセージで求めていることは確かに実行できます。私はそれを簡単に突き刺しましたが、次はあなたが求めていることを行います。

<!doctype html>
<html>
  <head>
    <title>Video test</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>
      $(function() {
          $("#playlist li").on("click", function() {
              $("#videoarea").attr({
                  "src": $(this).attr("movieurl"),
                  "poster": "",
                  "autoplay": "autoplay"
              })
              $("#playlist li.active").removeClass("active");
              $(this).addClass("active");

              return false;
          })

          $("#videoarea").attr({
              "src": $("#playlist li").eq(0).attr("movieurl"),
              "poster": $("#playlist li").eq(0).attr("moviesposter")
          })
      });
    </script>
  </head>

  <body>

  <video id="videoarea" controls="controls" poster="" src="" class="sandbox"></video>

  <ul id="playlist">
    <li movieurl="video-short.mp4" moviesposter="poster.png">
        <p>1.</p>
            LG TV commercial
    </li>
    <li movieurl="video-short.ogv" moviesposter="poster.png">
        <p>1.</p>
            LG TV commercial
    </li>
  </ul>

  </body>
</html>

これを使用するコンテキストはわかりませんが、さまざまなブラウザーをサポートするために、video 要素内で source 要素を使用することをお勧めします。デフォルトの動画ファイルに「フォーマットがサポートされていません」というメッセージが表示された場合、訪問者は別のフォーマットを選択する必要があることに気付かないでしょう。

HTML ビデオ タグを使用すると、さまざまなブラウザで再生する複数のソースを指定できます。Dive Into HTML5 のビデオ セクションからのこのスニペットに示されているように、この主題に関する豊富な情報があります。

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis">
  <source src="pr6.ogv"  type="video/ogg; codecs=theora,vorbis">
</video>

各<source>タグは、異なるメディア ソース ファイル、タイプ、およびコーデックを指定します。この.mp4ファイルは Safari などのブラウザ用、.webmファイルは Chrome 用、.ogvファイルは Firefox 用です。

属性を追加しtypeてコーデックを含めると、ブラウザがファイルを再生できるかどうかを判断するのに役立ちます。

このすべての問題を解決する利点は、ブラウザが最初に type 属性をチェックして、特定のビデオ ファイルを再生できるかどうかを確認することです。ブラウザが特定のビデオを再生できないと判断した場合、ファイルはダウンロードされません。ファイルの一部でさえありません。帯域幅を節約でき、訪問者は目的のビデオをより速く見ることができます。

コーデックの値は必須ではありませんが、ご覧のとおり、視聴者を節約し、帯域幅の浪費を抑えることができます。

ビデオをさまざまな形式で配信するには、 Handbrakeや ffmpegなどのツールを使用して、ビデオ ファイルを自分でエンコードする必要があります。

最後に、視聴者が指定した 3 つのソース ファイルを再生できない場合は、代替コンテンツを追加できます。

<video width="320" height="240" controls>
  <source src="pr6.mp4"  type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
  <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis">
  <source src="pr6.ogv"  type="video/ogg; codecs=theora,vorbis">

  <object width="320" height="240" type="application/x-shockwave-flash"
    data="flowplayer-3.2.1.swf">
      [...]
  </object>
</video>

詳細については、Dive Into HTML5 Video ページをご覧ください。

それが役立つことを願っています。

于 2013-06-13T19:20:44.840 に答える