随着移动设备的普及和宽带互联网的普及，视频已经成为网络内容中不可或缺的一部分。当今互联网时代，响应式设计已经成为开发人员和网站设计师必须掌握的技能之一。因此，如何在响应式设计中使用媒体元素和 video.js 实现视频播放，成为了前端类开发人员每天所面临的问题之一。
深入理解响应式设计
在理解如何在响应式设计中使用媒体元素和 video.js 实现视频播放之前，我们需要对响应式设计有一定的理解。响应式设计是一种设计的哲学，能够让网站在不同的设备上，从桌面电脑到平板电脑、智能手机等设备上都可以自适应地展现，并且便于用户操作。这个设计理念非常重要，因为移动设备已经逐渐代替了桌面电脑成为了人们上网的主要方式。
在响应式设计中，我们需要根据不同设备的屏幕大小，来设置网站的布局和样式，以便用户获得更好的体验。将响应式设计的理念应用到视频播放中，同样需要注意一些细节问题。
使用媒体元素实现视频播放
媒体元素（<video>）是 HTML5 中专门为视频和音频设置的标记，对于视频播放来说是必不可少的。媒体元素提供了一种非常简单的方式来将视频嵌入网页中，并且支持响应式设计。我们可以使用常见的 HTML 标记来嵌入媒体元素：
<video poster="video.jpg" controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> <source src="video.webm" type="video/webm"> </video>
这段代码显示一个视频和一个海报图片（poster），用户可以使用浏览器自带的控制条（controls）来控制播放。视频插入之后，应该进行一下样式的定义来防止视频的大小超出屏幕：
video {
max-width: 100%;
height: auto;
}这样就保证了在响应式的设计中，视频的大小能够根据屏幕大小来自适应调整。
使用 video.js 实现更好的体验
虽然可以直接在媒体元素中实现视频播放，但是通过 video.js 这个开源的 JavaScript 库，能够帮助我们实现更好的体验。video.js 是一种非常强大的媒体元素控制库，支持自定义样式和控制条等功能，能够让我们更好地控制媒体元素，并且提供了良好的兼容性。
在使用 video.js 时，我们需要引入相关的 CSS 和 JavaScript 文件，并且为媒体元素添加 “video-js” 类名：
-- -------------------- ---- -------
----- ------------------------------------------------- ---------------- --
------- ----------------------------------------------------------
------ ------------- ---------------- -------- -------------- -------------------
------- --------------- ---------------- --
------- --------------- ---------------- --
------- ---------------- ----------------- --
-- ------------------
-- ---- ---- ----- ------ ------ ----------- --- -------- --------- -- - --- ------- ------ -----------------------------------------------
------------------------ ----- ---------
----
--------这里我们也可以通过 poster 属性来传入视频海报的地址。要注意的一点是，当使用 video.js 时，需要在 JavaScript 中进行初始化：
var player = videojs('my-video');在 video.js 中，提供了许多自定义配置的选项，例如自定义控制栏外观、添加自定义按钮等等。详情请参考官方 API 文档：
https://docs.videojs.com/docs/api/
总结
响应式设计是我们在实现视频播放功能时必须掌握的技能，使网站在不同的设备上都可以自适应地展现，并且便于用户操作。在实现视频播放时，我们可以使用媒体元素，通过 CSS 样式来保持响应式设计，也可以使用 video.js 以增强体验并且可以自定义控件，为用户提供更加舒适的视听体验。
附录：示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
------------ --------------
----- ------------------------------------------------- ---------------- --
-------
---------- -
---------- -------
------- - -----
-------- - -----
-
----- -
---------- -----
------- -----
-
--------
-------
------
---- ------------------
--------- -----------
------ ------------- ---------------- -------- -------------- -------------------
------- --------------- ---------------- --
------- --------------- ---------------- --
------- ---------------- ----------------- --
-- ------------------
-- ---- ---- ----- ------ ------ ----------- --- -------- --------- -- - --- ------- ----
-- ----------------------------------------------- ------------------------ ----- ---------
----
--------
------
------- ----------------------------------------------------------
--------
--- ------ - --------------------
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64de0b2af6b2d6eab3955857