如何使用 Video.js 播放器播放 QuickTime MOV 文件?
Video.js 是一款开源的 HTML5 网络视频播放器。它支持各种 HTML5 媒体源扩展，并通过插件支持 YouTube、HLS Stream 等现代视频播放技术。Video.js 支持在各种显示器尺寸上播放视频，包括桌面设备和移动设备。
在本教程中，我们将学习如何使用 video.js 在网络浏览器中播放 QuickTime MOV 文件。MOV 是 Apple QuickTime 播放器中用于存储电影和视频文件的常用视频容器。这些容器使用 Apple Computer 设计的压缩算法，并且兼容 Windows 和 Mac 设备。 MOV(QuickTime 容器文件类型)容器可以容纳多种视频数据格式，例如 MPEG-4 和 OGG。
现在我们了解了 video.js 和 MOV 文件类型，让我们在本文的下一部分中创建一个视频播放器来播放 MOV 文件。
如何使用 Video.js 播放器播放 QuickTime MOV 文件?
要使用 video.js 播放 QuickTime MOV 文件，我们需要创建一个视频播放器，然后将源文件传递给我们的 MOV 文件。
让我们开始创建一个视频播放器。要创建视频播放器，您可以使用两种方法:使用带有 class="video-js" 的 <video> 标签，或者直接使用 <video-js> 标签。我们将逐一介绍这两种方法。
<video>带有 video.js 类的标签
示例
请参考以下示例，使用 video.js 类创建一个视频播放器来播放 QuickTime MOV 视频 -
<!DOCTYPE html> <html> <head> <!-- Importing Video.js CSS using url --> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video id="my-video" class="video-js vjs-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" height="264" width="560" poster="https://www.cainiaomax.com/videos/sample.png" data-setup='{}' > <!-- Source the QuickTime MOV File --> <source src="https://www.cainiaomax.com/videos/sample.mov" type="video/mp4" > </video> <!-- Importing Video.js using url --> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <!--Creating video player reference using video.js interface--> <script> var player = videojs('my-video'); </script> </body> </html>
在上面的代码示例中，我们完成了以下操作:
分别在 <link> 和 <script> 标签中使用 CDN URL 导入 Video.js CSS 和 JS。
使用 <video> 标签创建了一个视频元素，类名为"video-js"，自定义 VJS 皮肤名为"vjs-theme-sea"。我们还添加了一些标准的 HTML5 视频选项，例如控件、预加载、高度和宽度，以及一些 video.js 特有的选项，例如 fluid 和 data-setup。
请注意视频元素上的"data-setup"属性。此属性非常重要，它指示 video.js 在网页加载完成后加载视频元素。
在 source 标签中，我们将源添加到 QuickTime MOV 文件中，该文件需要在视频播放器中播放。此外，MOV 文件的视频 MIME 类型与 mp4 视频相同，即"video/mp4"。
执行上述代码后，将创建一个使用 video.js 控件播放".MOV"视频文件的视频播放器。
现在，我们已经了解了一种创建 QuickTime MOV 视频播放器的方法。我们将在视频的下一部分中看看另一种方法。
使用 <video-js> 标签
示例
在本节中，我们将直接使用 <video-js> 标签，而不是使用 <video> 标签。这也是推荐的使用 video.js 的方法。
使用 <video-js> 标签更新上述示例。请参考以下 HTML 代码 -
<!DOCTYPE html> <html> <head> <!-- Importing Video.js CSS using url --> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js id="my-video" class="vjs-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" height="264" width="560" poster="https://www.cainiaomax.com/videos/sample.png" data-setup='{}' > <!-- Source the QuickTime MOV File --> <source src="https://www.cainiaomax.com/videos/sample.mov" type="video/mp4" > </video-js> <!-- Importing Video.js using url --> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"> </script> <!--Creating video player reference using video.js interface--> <script> var player = videojs('my-video'); </script> </body> </html>
在上面的例子中，我们用 <video-js> 标签替换了 <video> 标签。另请注意，我们从 <video> 元素的 class 属性中删除了 'video-js' 类。除此之外，上面的示例没有任何变化，但是当您在浏览器中运行这两段代码时，您会发现两个示例之间没有任何区别。
注意- 要在项目中运行上面的示例，您需要将 <source> 标签内的"src"值更新为 MOV 文件的路径。
结论
在本教程中，我们快速概述了 video.js 和 QuickTime MOV 容器文件。之后，我们先使用 <video> 标签，然后使用 <video-js> 标签，使用 video.js 创建了可播放 MOV 视频的播放器。我们还研究了每种方法的工作示例。
