设计师如何学习html_HTML5视频：设计师需要知道的10件事

HTML5革命引起了来自世界各地的令人兴奋的Web设计师。新规范支持用于构建语义网站的许多元素和属性。这些新功能包括用于音频和视频格式的多媒体标签。

在过去的几年中，基于Flash的媒体播放器已足以在Web上进行流传输，并且该技术对于支持旧版浏览器仍然是必需的。但是值得庆幸的是，现代标准已经取得了进步，HTML5视频的加入为许多新机遇打开了大门。

在本指南中，我想介绍Web上HTML5视频。了解本地浏览器内播放器及其所有功能将需要一些练习。最好的熟悉方式是先潜水！

1.媒体类型

当您使用Flash视频播放器时，通常无法在.flv中关联所有视频格式。尽管这样做确实可行，但大多数flv文件都无法在更高级的文件格式/编解码器附近保持质量。 HTML5支持3种重要的视频类型：MP4，WebM和Ogg / Ogv。 MPEG-4文件类型通常以H.264编码，从而可以在第三方Flash播放器中播放。这意味着您无需保留.flv视频副本即可支持后备方法！ WebM和Ogg是与HTML5视频相关的两种更新得多的文件类型。 Ogg使用Theora编码，该编码基于开源标准音频文件格式。可以使用.ogg或.ogv扩展名保存。

WebM是Google推出的一个项目，您可以在WebM Project网站上了解更多信息。 Opera，Google Chrome，Firefox 4+和最新的Internet Explorer 9已经支持该格式。大多数Web专业人员仍不知道该格式，但WebM是Web视频未来的领先视频媒体格式。

2.浏览器支持

那么您的网站需要哪种文件类型？理想情况下，所有这三个都将是出色的，因为它们可以提供全部支持范围。但这是不现实的，实际上，您只能用其中两个覆盖所有基础。以下是适用于每种浏览器的细分：

Mozilla Firefox – WebM，Ogg
Google Chrome – WebM，Ogg
Opera – WebM，Ogg
Safari – MP4
Internet Explorer 9 – MP4
Internet Explorer 6-8 –否HTML5，仅Flash！

如果您还记得，我之前提到过，大多数Flash视频播放器将支持MP4文件，只要它们以H.264编码即可。因此，这些浏览器中的每一个都将最终嵌入MP4 + Flash。这意味着您只需要创建两种不同的视频格式即可支持所有浏览器。 Safari / IE9的MP4，其余的则在WebM或Ogg之间选择。

在我看来，我强烈建议您坚持使用WebM格式。它在该项目（即Google）背后享有盛誉，并在HTML5社区中赢得了很多关注。将支持Ogg / Ogv，但很可能会因为WebM较小的文件大小而失去流行性。您可以在网上阅读由Sean Golliher撰写的有关视频未来的相关文章。

3.嵌入简单HTML5视频

现在让我们看一下嵌入一些示例代码所需的语法。我们需要的是HTML5视频标记，以引用每个电影URL。

<video width="320" height="240" controls autoplay poster="/img/scene-preview.jpg">
<source src="/mov/scene.mp4" type="video/mp4">
<source src="/mov/scene.webm" type="video/webm">
Sorry, your browser doesn't support HTML5 video.
</video>

请注意， controls和autoplay属性不需要设置任何值。我还包括了poster属性，该属性在流式传输之前在视频播放器上预加载图像。这是许多网络播放器的常见预览。

我们提供视频元素内部的MP4和WebM格式。如果这两种方法均无法加载，则我们将向用户显示错误以更新其浏览器。

4.提供Flash后备

上面的示例非常适合所有符合标准的Web浏览器。但是，我们还需要考虑到，世界并不总是处于尖端技术。我们需要在旧版Safari，Mozilla Firefox，尤其是Internet Explorer上为用户提供支持。

实现此目标的最佳方法是通过Flash后备播放器。可以使用embed或object标记添加这些标记以引用第三方.swf文件。 JW Player和Flowplayer是您可以考虑的两个免费开源解决方案。还可以在ActiveDen上查看高级视频播放器，其价格可低至$ 15- $ 20。

现在，让我们调整上面的代码，以包括一个后备Flash播放器，以支持现有的几乎所有浏览器。

<video width="320" height="240" controls autoplay poster="/img/scene-preview.jpg">
<source src="/mov/scene.mp4" type="video/mp4">
<source src="/mov/scene.webm" type="video/webm"><object type="application/x-shockwave-flash" data="/mov/player.swf"
width="320" height="240"><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always"><param name="flashvars" value="file=/mov/scene.mp4"><!--[if IE]><param name="movie" value="/mov/player.swf"><![endif]--><img src="/img/scene-preview.jpg" width="320" height="240" alt="Video"><p>Sorry but your browser doesn't support HTML5 video.</p></object>
</video>

5.移动设备支持

由于移动行业还很年轻，因此这个话题仍然受到高度争议。苹果推出了在Mac和iOS设备上对MP4的支持。这意味着您可以在标准视频UI中以本地方式在iPad，iPhone或iPod Touch上流.mp4视频文件。这涵盖了很多市场份额。

最近，Android设备在获得相同级别的支持方面遇到了困难。但是，Google最终采用了.mp4网络流媒体，现在几乎可以利用所有移动用户的资金。而且由于Flash不是选项，因此MP4是最好的解决方案。这就是为什么您要首先嵌入.mp4代码，以便iOS设备可以立即识别该文件的原因。

6. Safari用户代理

必须提到的一个错误是Flash播放器与Safari上的本机HTML5 .mp4流之间存在的一个错误。由于浏览器可以同时支持这两个文件，因此您可能难以获得HTML5视频流来代替Flash。但是，由于这篇关于TUAW的精彩博客文章，更改浏览用户代理很容易。

这将迫使您的网页将浏览器识别为在其他设备上运行。您很可能会选择不支持任何Flash播放的iPad。这是测试MP4本机和Flash播放方法时可能遇到的唯一主要问题。

7.管理播放器控件

信不信由你，您还可以使用一些方法来操纵HTML5视频播放器控件。所有这些都可以通过使用JavaScript中的一组开放方法来完成。这里列出的方法太多了，但是请尝试浏览W3C媒体元素文档以获取更多详细信息。

为了给您一个大致的概念， Opera开发人员博客发布了一些简短的教程，对新手来说非常有用。即使您以前从未接触过JavaScript或jQuery，使用此工具还是很简单的。您可以调用视频媒体的特定属性，例如muted或currentTime 。然后，您可以通过在jQuery中操作DOM来根据这些条件执行操作（调暗背景，显示广告）。

Opera文章中的同一位开发人员提供了其脚本视频播放器的工作演示。自定义自己的UI控件的机会非常多。它只是说明HTML5视频正变得多么强大。

8.视频格式转换

这是另一个大问题，这可能会使不太懂技术的人感到困惑。您只想建立自己的网站并进行流式传输，现在就不得不处理视频转换了吗？好吧，实际上并不是那么困难。

要处理MP4，这是您的首要任务，可以使用HandBrake ，这是一个免费的开源解决方案，可以在所有3种主要操作系统上运行。它将支持H.264以及其他一些编解码器，这使它成为免费用户的最佳选择。如果您有钱花钱，我必须推荐Mac App Store上的Xilisoft转换器，终身许可证仅需40美元。

看起来WebM路线使生活变得容易得多。 Miro Video Converter是适用于Windows和OS X的免费工具，可以生成高质量的WebM文件。它也可以执行Ogg Theora编码，质量也很高。

9.构建一个Web Player

带有HTML5规范的视频格式对于开发人员来说仍然是新的。有开放的协议正在等待使用，以允许自定义控件，滑块，播放/暂停图标等。如果您感到胆怯，请查看有关如何制作自己HTML5播放器的本教程（在Splashnology上发布）。

对于新手来说，该代码有点紧张，因为它需要高级CSS定位和一些正式的jQuery。您可以建立其他框架，这些框架已经提供了自定义播放器设计。同样，此幻灯片共享演示文稿很好地介绍了如何构建HTML5视频播放器。

构建HTML5视频播放器

10. VideoJS库

VideoJS可能是我最喜欢HTML5视频播放器解决方案。您只需要在文档中的某处包含它们的自托管JavaScript和CSS样式表即可。然后，您可以编写标准HTML5视频代码以及一些其他用于外观的类。我在下面添加了示例代码：

<video class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="my_video_poster.png" data-setup="{}"><source src="my_video.mp4" type="video/mp4"><source src="my_video.webm" type="video/webm">
</video>

如果您碰巧运行了WordPress博客，还可以尝试使用其自定义WP插件。在您显示HTML5视频的页面上，它将自动包含库js / css。您可以在任何帖子或页面编辑器中使用简码（请参见此处）进行此操作。

结论

希望本入门指南能激发您对网络视频未来的兴趣。随着越来越多的用户转向移动设备，对于这些类型的媒体采用HTML5标准非常重要。应该简化Web，以便开发人员可以更快地生成完全支持的解决方案。我们希望听到您对HTML5视频的未来的想法和建议。如果您想分享，请随时在下面的帖子讨论区中发表评论。

翻译自: https://www.hongkiat.com/blog/html5-videos-things-you-need-to-know/