内联修改td内容自适应_通过内联媒体查询使HTML5视频具有自适应性

内联修改td内容自适应

Sadly, the media attribute shown in this article has been removed from implementation in source for the video element in Blink, and appears destined for excision from the official HTML5 specification. While this code will continue to work for Firefox, at least as of now, it is probably not a good long-term implementation for adaptive video. DASH streaming currently appears to be a viable alternative; I'll write about the technology soon.

遗憾的是，本文中显示的media属性已从Blink中的video元素的source实现中删除，并且似乎已从官方HTML5规范中删除。 尽管此代码将继续在Firefox上运行，至少到现在为止，但对于自适应视频来说，它可能不是一个好的长期实现。 目前， DASH流似乎是一种可行的替代方法。 我将很快写有关该技术的文章。

While many web developers have focused on the progress of the <picture> element for adaptive images, the very similar capabilities <source> tag for HTML5 video are largely unknown, and often overlooked. If your responsive site uses self-hosted video, customizing your movies for different screen sizes not only optimizes visitor's viewing experience, but can also add significant savings in bandwidth costs.

尽管许多Web开发人员已将重点放在自适应图像的<picture>元素的进度上，但HTML5视频的非常相似的功能<source>标签却鲜为人知，并且经常被忽略。 如果您的响应式网站使用自托管视频，则为不同的屏幕尺寸自定义影片不仅可以优化访问者的观看体验，还可以显着节省带宽成本。

制作查询 (Crafting The Queries)

First, you’ll need to compress at least two versions of the same video in different sizes: in the example above, I’ve created a 720 × 1280 HD version and a 640 × 360 SD copy. Naturally, you would also have to save these videos in at least two different formats, to cover all browser requirements.

首先，您需要压缩至少两个不同大小的同一视频版本：在上面的示例中，我创建了720×1280 HD版本和640×360 SD复制。 当然，您还必须将这些视频至少保存为两种不同的格式，才能满足所有浏览器的要求。

The <video> tag is inserted into the page as usual. Both versions of the movie are added inside it, with media queries written inline to distinguish between the sources:

<video>标记照常插入到页面中。 电影的两个版本均添加在其中，并内联编写了媒体查询以区分来源：

<video controls>
	<source src="the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
	<source src="the-sky-is-calling-large.webm" media="screen and (min-width:800px)">
	<source src="the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
	<source src="the-sky-is-calling-small.webm" media="screen and (max-width:799px)">
</video>

Of course none of this is terribly useful unless the <video> element itself is responsive. I’ve covered that in a previous article; the CSS is the same as that applied to responsive bitmap images:

当然，除非<video>元素本身具有响应能力，否则所有这些都不是非常有用的。 我已经在上一篇文章中进行了介绍； CSS与应用于响应式位图图像CSS相同：

video { width: 80%; }
video source { width: 100%; height: auto; }

改善查询 (Improving The Queries)

While this works, it only does so on initial load: that is, when the HTML page is first visited, the appropriate video is used for the current window size. This selection will be in effect thereafter, no matter how the window is resized. The choice of video isn’t reconsidered unless the page itself is reloaded.

在此方法有效的同时，它仅在初始加载时才这样做：也就是说，当首次访问HTML页面时，将适当的视频用于当前窗口大小。 无论窗口如何调整大小，此选择都将在此之后生效。 除非重新加载页面本身，否则不会重新考虑视频的选择。

To that end, a better solution is to use a media query to inspect the width of the device, rather than the current window, and choose the appropriate video based on the result:

为此，更好的解决方案是使用媒体查询来检查设备的宽度，而不是当前窗口，然后根据结果选择合适的视频：

<video controls>
	<source src="the-sky-is-calling-large.mp4" media="screen and (min-device-width:801px)">
	<source src="the-sky-is-calling-large.webm" media="screen and (min-device-width:801px)">
	<source src="the-sky-is-calling-small.mp4" media="screen and (max-device-width:800px)">
	<source src="the-sky-is-calling-small.webm" media="screen and (max-device-width:800px)">
</video>

These new rules set up the following conditions:

这些新规则设置了以下条件：

• If the physical screen of the device is no more than 800 pixels wide, then it will receive the small video version.
  如果设备的物理屏幕宽度不超过800像素，则它将收到小视频版本。
• If the physical device has a horizontal resolution of 801 pixels or greater, it will receive the large video, without regard to the initial browser window size.
  如果物理设备的水平分辨率为801像素或更高，它将接收大视频，而不考虑初始浏览器窗口的大小。

In theory it would be possible to use JavaScript matchMedia conditions to switch between versions as the browser window is resized, but I would consider the potential interruptions in the video stream to make the effort valueless.

从理论上讲，可以在调整浏览器窗口大小时使用JavaScript matchMedia条件在版本之间进行切换，但是我会考虑视频流中的潜在中断，从而使工作量毫无价值。

结论 (Conclusion)

While it takes a little more work to get there, the potential savings and improved user experience from adding inline media queries to video makes the effort very worthwhile. Right now, all modern browsers support these techniques; over time, I would expect that HTML5 and video codecs will integrate adaptive playback algorithms into themselves, gaining the ability to stream different resolution of the same video from a single source in response to both screen size, network performance, and device capability. For now, this solution is what we have, and it’s not a bad one.

虽然要花一些时间才能达到目标，但通过向视频添加内联媒体查询来潜在节省成本并改善用户体验，这使得这项工作非常值得。 目前，所有现代浏览器都支持这些技术。 随着时间的流逝，我希望HTML5和视频编解码器能够将自适应播放算法集成到自身中，从而能够响应屏幕大小，网络性能和设备功能，从单一来源流式传输同一视频的不同分辨率。 目前，此解决方案就是我们所拥有的，而且还不错。

翻译自: https://thenewcode.com/820/Make-HTML5-Video-Adaptive-With-Inline-Media-Queries

内联修改td内容自适应