随着前端技术的不断发展，我们在网站建设中选择 Headless CMS 已经成为了一种趋势。Headless CMS 的一个重要特点就是支持现代化的媒体内容管理，这就包括了嵌入式（embedded）内容，例如音频、视频、互动图像和其他动态组件。如何处理这些复杂的嵌入式内容呢？
问题
传统 CMS 一般都是用特殊的媒体处理插件来处理嵌入式内容，将嵌入式内容插入到 WYSIWYG 编辑器之中，然后编辑器的用户就可以像编辑文字那样编辑嵌入的媒体内容。但是 Headless CMS 则是会将嵌入式内容当作 API 形式将其传递给前端，使得前端需要处理这些嵌入式内容。
这个问题的本质是 Headless CMS 并没有提供用户界面，导致了前端需要自行处理所有特殊媒体内容的语法与 API 调用。
解法
处理嵌入式内容的最重要的原则是需要区分不同媒体类型之间的差异。这些差异会导致我们在嵌入式内容中的编码有所不同，因此我们需要为每种嵌入式内容类型制定不同的解决方案。
处理视频和音频
处理视频和音频的方式比较简单。我们可以通过第三方媒体播放器来实现，例如 video.js 或者 plyr.js。这些播放器库的好处是可以自适应不同尺寸的屏幕，并且支持多种媒体格式。在 Headless CMS 中，我们只需要将视频和音频的 URL 像其他数据一样存储在数据库中。在前端，则可以根据需要选择特定的播放器，并将音频或视频的 URL 传递给播放器库中的播放方法。
// 使用 video.js 播放视频
var player = videojs('my-video');
player.src({ src: 'http://www.example.com/path/to/my/video.mp4', type: 'video/mp4' });
player.play();处理互动图像和动态组件
处理互动图像和动态组件的方式同样可以采用第三方库来实现，例如 interact.js 或者 snap.svg。但与视频和音频不同的是，这些库通常提供的是一个互动的可视化开发环境，例如可视化拖放组件和编辑器。同时，处理互动图像和动态组件也需要更多的开发时间，因为需要对响应式设计和交互行为有着深刻的理解。
-- -------------------- ---- -------
-- ------
--- ---- - -----------------
------------
------- --------------- -
---------------------
-
--
------------
------- --------------- -
-----------------------
-
---总结
总之，每个 Headless CMS 都可以有不同的需求和数据结构，因此需要在处理嵌入式内容的时候进行特别制定。需要在开发过程中考虑到使用到的媒体、辅助图像、布局和结构，并在这一点上做出恰当的选择。
最后，通过第三方插件和库，我们可以快速轻松地处理 Headless CMS 中的特殊媒体内容。相比之前的逐步开发和自写库而言，这是一个相对容易的解决方案，也可以提高代码质量，使其更加可维护和可伸缩。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6494159448841e989419df93