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

【问题标题】：The best way to play videos on website在网站上播放视频的最佳方式
【发布时间】：2014-07-30 09:30:24
【问题描述】：

根据Post from 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，它确实失败了。我可以告诉他升级他的浏览器，但这不适用于所有查看该网站的用户。

所以我从 w3schools' post 切换到 youtube 解决方案。现在它在他的 IE8 上播放（欢呼！）。但是新的问题出现了。视频无法在他的 iPad 上播放。可能他禁用了他的 youtube 应用程序。

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

问题：

在网站上播放视频的最佳方式是什么？也许不是一个 100% 无故障的解决方案，但可以在大多数情况下发挥作用。

标准：

自动播放
跨浏览器（包括 Android 的默认浏览器）
拒绝现成的插件/播放器
大型视频文件 (50MB+)

【问题讨论】：

为兴趣点赞
我这里没有我的 iPad，所以无法测试这个，但你读过这个吗？：satsig.net/images/youtube-on-ipad.htm 这是一个相当老的帖子，但如果它有效，似乎是一个简单的修复。
VideoJS
@Izion 我也试过了。添加“http:”而不是“//www.youtube.com”。产生相同的输出。
@Erick 就像一个魅力。今天刚刚在一个视频的不同版本（移动/流媒体版本约 15MB 和全高清桌面版本约 40MB，均为 H264）的微型网站中使用它。在大多数浏览器（IE7+、FF、Chrome、iOS、Android 等）上都没有问题。自动播放显然不能在移动设备上运行，但这是防止数据占用的浏览器功能 - 您需要一个用户发起的事件。关于你的 iPad 问题：视频需要有适当的比例 + 支持的编码，否则它就不会播放。也许这有帮助……

标签： javascript php jquery html video

【解决方案1】：

没有单一的方法可以跨浏览器。

First, there is not a single HTML5-video-codec that works on all browsers

第二，IE8不支持HTML5，所以没有Flash等现成的插件/播放器是不行的

第三，您不能只在所有设备上使用 Flash，因为这在 Apple iMonopolyPad 和 iHegemonyPhone 上不起作用，因为 Apple 不允许这样做，因为他们 a) 想要销售 Quick-Time 视频 b)不希望在自己的平台上出现比他们自己的更好的竞争 adobe-appstore，因为这会降低他们的利润率。

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

所以，如果你想嵌入它，你最好使用 jQuery 插件。然后，您可以为视频 URL 声明一个具有宽度和高度、类和数据属性的 div，jQuery 用每个浏览器的相应 HTML5 视频标签或 IE8 中的 Flash 替换该 div。

最接近你愿望的是this:

<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) 实用程序检查您的文件是否实际上是文件扩展名中指定的格式。

【讨论】：