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>

虽然我不知道您将使用它的上下文，但使用视频元素中的源元素来支持不同的浏览器肯定会更好。如果您的访问者看到默认视频文件的“格式不受支持”消息，他们不太可能意识到他们需要选择不同的格式。

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属性并包含编解码器将有助于浏览器确定是否可以播放文件。

解决所有这些麻烦的好处是浏览器会首先检查类型属性，看它是否可以播放特定的视频文件。如果浏览器决定它不能播放特定的视频，它就不会下载该文件。甚至不是文件的一部分。您将节省带宽，并且您的访问者将更快地看到他们想要的视频。

编解码器值不是必需的，但如您所见，它可能会节省您的观众和一些浪费的带宽。

为了以不同格式提供视频，您需要使用Handbrake或 ffmpeg 等工具自己对视频文件进行编码。

最后，如果您的观众无法播放您指定的三个源文件，您可以添加一些替代内容。

<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 Page 了解更多信息。

希望有帮助。

于 2013-06-13T19:20:44.840 回答