在移动设备和电脑上浏览网页是非常普遍的，但是在不同屏幕大小的设备上，页面的布局和内容可能会产生很大的变化，特别是在视频播放器中。如何使视频播放器在不同屏幕大小的设备上都有良好的用户体验呢？这时候 Media Query 就能派上用场了。
在本文中，我们将探讨如何使用 Media Query 实现响应式视频播放器。
什么是 Media Query？
Media Query 是一个 CSS3 模块，可根据设备的属性（如屏幕宽度、高度、屏幕方向、显示分辨率等）来自适应地渲染网页。Media Query 使得 Web 设计师可以根据不同设备的属性来提供不同的样式，并在不同设备上获得更好的用户体验。
响应式视频播放器的实现
我们将以 HTML5 视频标签和 CSS3 Media Query 为基础，实现一个响应式视频播放器，这个视频播放器在不同设备上的显示效果将会有所不同。
首先，我们需要一个 HTML5 视频标签。
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> Your browser does not support the video tag. </video>
然后，我们可以根据设备的屏幕大小来对视频尺寸进行调整。我们将使用 CSS3 Media Query 来实现。以下是一个根据不同屏幕大小设置视频尺寸的示例代码：
-- -------------------- ---- -------
-- ----- --
------ ------ --- ----------- ------ -
----- -
------ ----
------- -----
-
-
-- ----- --
------ ------ --- ----------- ------ -
----- -
------ -----
------- -----
-
-在这个示例代码中，我们使用了两个 Media Query，一个是适用于大屏幕设备（屏幕宽度大于等于 768px），另一个是适用于小屏幕设备（屏幕宽度小于 768px）。在大屏幕设备上，我们设置了视频的宽度为 50%，高度自适应；在小屏幕设备上，我们设置了视频的宽度为 100%。这样，无论在何种设备上，视频都能根据屏幕大小来适应。
使用 JavaScript 对视频进行控制
除了使用 CSS3 Media Query 设置视频播放器的样式之外，我们还可以使用 JavaScript 对视频进行控制。以下是一个简单的视频控制的示例代码：
-- -------------------- ---- -------
------ -------- -----------
------- --------------- -----------------
------- ---------------- ------------------
---- ------- ---- --- ------- --- ----- ----
--------
--------
--- ----- - ---------------------------------
-- -------
------------------------------- ---------- -
-- -------------- -
-------------
- ---- -
--------------
-
---
-- ----
---------------------------------- ---------- -
-- ------------------------- -
--------------------------
- ---- -- ------------------------------- -
--------------------------------
- ---- -- --------------------------- -
----------------------------
-
---
---------在这个简单的示例代码中，我们对视频进行了两个控制：点击视频暂停/播放切换，双击视频全屏切换。这样，用户可以更加方便地控制视频播放器。
结论
在本文中我们介绍了如何使用 Media Query 实现响应式视频播放器。我们使用 HTML5 视频标签和 CSS3 Media Query 为基础，实现了一个可以根据设备屏幕大小来自适应的视频播放器，并利用 JavaScript 对视频进行了控制。通过这个示例，我们可以看到使用 Media Query 可以使得 Web 设计在不同设备上的呈现效果更加合适，从而提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770e932e9a7045d0d8307fa