在网站上播放视频的最佳方式

Question

根据w3schools的一篇文章，在网站上播放视频的最佳方法是使用HTML5，并采用以下回退方案：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object>
Please update your browser. Thanks!
</video>

我曾尝试使用上述代码，在Chrome和IE9上都可以正常工作。但当我的客户给我反馈时，他说视频在他的IE8浏览器上无法播放。所以我检查了一下，使用IE8确实失败了。我可以告诉他升级浏览器，但这对所有查看网站的用户都不起作用。

因此，我切换到youtube解决方案，来自于w3schools' post。现在它在他的IE8上播放（万岁！）。但是出现了一个新问题。视频无法在他的iPad上播放。可能他已经禁用了他的youtube应用程序。

我也尝试使用我的iPad。令人惊讶的是，它也没有工作（令人震惊！）。

问题：

在网站上播放视频的最佳方法是什么？也许不是100％无故障的解决方案，但会在大多数情况下播放。

标准：

- 自动播放 - 跨浏览器（包括Android的默认浏览器） - 不使用现成的插件/播放器 - 大型视频文件（50MB +）

- Erick

---

对于感兴趣的内容点赞 - ʰᵈˑ

我这里没有我的iPad，所以无法测试，但你读过这个吗？：http://www.satsig.net/images/youtube-on-ipad.htm这是一个相当旧的帖子，但如果有效，似乎是一个简单的解决方法。 - Izion

VideoJS - nietonfir

@Izion 我也尝试过了。将“//www.youtube.com”改为“http://www.youtube.com”。结果输出相同。 - Erick

@nietonfir 也试过那个。 - Erick

@Erick 运行得非常好。我今天在一个微网站中使用它，其中有不同版本（移动/流媒体版本约15MB和全高清桌面版本约40MB，均为H264）的视频。大多数浏览器（IE7+、FF、Chrome、iOS、Android等）都没有问题。自动播放在移动设备上显然不起作用，但这是浏览器的功能，以防止数据过载 - 在那里需要用户启动事件。至于你的iPad问题：视频需要具有适当的比例+支持的编码，否则它就无法播放。也许这可以帮助... - nietonfir

Answer 1

没有一种通用的方法可以跨浏览器实现此功能。

首先，没有一种HTML5视频编解码器适用于所有浏览器

其次，IE8不支持HTML5，因此除了Flash等现成的插件/播放器之外，无法实现。

第三，您不能在所有设备上都使用Flash，因为它在苹果iMonopolyPad和iHegemonyPhone上不起作用，因为苹果不允许它，因为他们a）想销售Quick-Time视频并且b）不希望有一个比他们自己平台上更好的Adobe应用商店竞争对手，因为这会削减他们的利润率。

Youtube视频并非全部转换为非Flash HTML5视频格式，并且HTML5视频可能已通过youtube / google帐户禁用。

因此，如果要嵌入它，最好使用jQuery插件。 然后，您可以声明具有宽度、高度、类和视频URL数据属性的div，而jQuery会替换每个浏览器的div为相应的HTML5 video标记，或在IE8中使用Flash。

最接近您的愿望的是这个：

<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
    <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>

   <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
   <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

一个很好的巴比伦编解码和分辨率转换器是这个：
http://www.mirovideoconverter.com/ 使用GNU文件（libmagic）实用程序来检查您的文件是否实际上是文件扩展名指定的格式。

- Stefan Steiger