Question

我在网站上使用标准视频标签。但我希望至少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")
    })
})

Answer 1

您当然可以在更新的消息中执行您所要求的操作。我快速刺了一下，以下是你所追求的。

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

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

HTML视频代码允许您为不同的浏览器指定多个来源。正如来自潜入HTML5的Video section的此片段所示，其中包含有关该主题的大量信息。

<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等工具自行编码视频文件。

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

<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视频页面。

希望有所帮助。

标准视频完全支持所有浏览器

1 个答案: