如何使用 Video.js 播放器播放 .mp4 文件?
在本教程中，我们将学习如何使用 video.js 播放器库播放 mp4 文件。
Video.js 是一款非常流行且现代化的网络视频播放器，其开发理念充分考虑了 HTML5 的时代背景。它支持多种视频播放格式，例如 mp4、webm、flv 等，以及其他现代视频格式，例如 YouTube、Vimeo 和 Flash。 Video.js 还能确保视频播放器在所有显示尺寸(例如桌面、电脑和移动设备)上保持一致。
在本教程中，我们将具体了解如何为 mp4 视频文件创建视频播放器，以及如何使用 video.js 来实现。
如何使用 Video.js 播放器播放 .mp4 文件?
在本教程的这一部分，我们将创建一个用于播放 mp4 视频文件的视频播放器。使用 video.js 可以非常轻松地播放 mp4 视频文件。我们只需使用 video-js 创建一个视频元素，并在 source 标签中添加正确的视频类型即可。
创建视频播放器主要有两种方法 -
使用 <video> 创建视频元素带有 class 为 'video-js' 的 <video> 标签
使用 <video-js> 标签创建视频元素
让我们逐一了解一下这些方法。
使用 class 为 'video-js' 的 <video> 标签
示例
查看以下示例 -
<html> <head> <!-- Imported Video.js CSS using the 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-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.cainiaomax.com/videos/sample1080p.mp4" type="video/mp4" > </video> <!-- Imported Video.js using the CDN URL --> <script src="https://www.cainiaomax.com/videos/video1.mp4"></script> </body> </html>
在上面的例子中，您可以看到我们完成了以下操作:
在 <script> 中使用 CDN URL 导入"video.js"，并在 heads 部分的 <link> 标签中导入 video-js.css。
创建了一个 <video> 元素，其类名为"video-js"，ID 为"myvideo"。我们还使用了一些标准的 HTML 视频属性，例如控件、预加载、高度、宽度等，以及一些 video-js 特有的属性，例如"datasetup"。
在 video 元素内部，是我们的 <source> 标签，其中包含指向 mp4 视频文件的路径，并且 <source> 标签上的 MIME 类型属性已设置为 video/mp4。添加"video/mp4"类型非常重要，因为这会告诉视频播放器我们的视频类型是 mp4。
在浏览器中执行上述代码后，将创建一个带有 video-js 默认皮肤的视频播放器，它将播放源路径中包含的 mp4 视频文件。
现在，我们已经使用 <video> 标签创建了一个 video.js 播放器来播放我们的 mp4 文件，让我们也来看看 <video-js> 标签。
使用 <video-js> 标签
或者，您可以使用 <video-js> 标签代替 <video>标签，然后将类设置为"video-js"。
示例
请考虑以下使用 <video-js> 标签创建 mp4 视频播放器的代码示例。
<html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js id="my-video" class="vjs-default-skin" controls preload="auto" width="560" height="300" data-setup='{}' > <source src="https://www.cainiaomax.com/videos/sample1080p.mp4" type="video/mp4" size="1080" > </video-js> <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script> </body> </html>
在上面的例子中，您会注意到代码与前一个示例几乎相同。同样，我们在 <script> 标签中使用 CDN URL 导入了 video.js，并在 head 部分中的 <link> 标签中导入了 video.js CSS。
之后，为了创建视频元素，我们用 <video-js> 标签替换了 <video> 标签，并且还从视频元素中删除了 'video-js' 类。此外，我们还为视频元素设置了一些标准 HTML5 属性，例如控件、高度、宽度等。
此外，请注意我们如何在 <source> 标签中设置 mp4 视频的路径，并将 MIME 类型设置为 'video/mp4'。设置源标签的类型非常重要，因为它会根据视频文件的类型更新 video-js。
但是，当您在浏览器中执行此示例时，您会注意到这个示例与前一个示例完全相同，两者之间没有明显的区别。这个示例还将创建一个视频播放器，该播放器将使用视频默认皮肤播放我们的 mp4 视频文件。
因此，我们可以使用上面解释的任何方法，因为它不会改变任何东西。只有两种方法可以使用 video.js 库创建视频播放器来播放我们的 mp4 视频文件。
注意- 要运行上述代码，您需要更新 <source> 中的"src"值。标签，并添加 mp4 视频文件的路径
总结
在本教程中，我们学习了如何使用 video.js 库创建一个视频播放器来播放 mp4 视频文件。首先，我们通过几个示例了解了如何使用带有"videojs"类的 <video> 元素，然后我们学习了另一种创建视频播放器来播放 mp4 视频文件的方法，即使用 <video-js> 标签。
