如何使用 Video.js 播放器播放 FLV 视频?
Video.js 是一个非常流行的用于创建 Web 视频播放器的库，它完全基于 HTML5 构建。Video.js 支持所有基本视频格式，例如 mp4、WebM、Flv 等。使用 video.js 为这些不同类型的视频创建现代化的 Web 视频播放器非常简单直接。
但是，对于 flv 类型的视频格式，步骤略有不同。在本文中，我们将学习如何使用 video.js Web 播放器播放 flv 视频。
首先，让我们从如何在 video.js 中创建一个支持 mp4 和 WebM 视频格式的基本 Web 播放器开始。
如何创建视频播放器?
示例
请参考以下代码，了解如何使用 video.js 创建基本 Web 视频播放器 -
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video class="video-js" id="my-videos" width="560" height="264" data-setup='{}' controls="true" autoplay="true" muted preload="auto"> > <source src="https://www.cainiaomax.com/videos/sample480.mp4" type="video/mp4" id="my-video1" > <source src="https://www.cainiaomax.com/videos/sample720.webm" type="video/webm" id="my-video2" > </video> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> const player = videojs(document.querySelector('.video-js')); </script> </body> </html>
在上面的代码片段中 - 我们完成了以下操作 -
我们使用 <href> 标签(包含在 <link> 标签内)中的 CDN URL 导入了 video.js。
此外，我们使用了 <video> 标签，其类名为 video-js，id 为 myvideos。这是为了确保 video.js 为我们的视频创建视频。
在 video 标签上使用 data-setup='{}' 是为了确保如果在网页加载时未创建 video 元素，video-js 可以稍后加载它。
在第一个 <source> 标签中，我们提供了视频文件的路径。由于第一个视频文件的格式是 mp4 文件，因此类型也是 'video/mp4';而第二个视频的格式是 webm，因此类型为'video/webm'。
最后，我们使用了 <script> 标签，在其中创建了一个 video-js 函数，类名为".video-js"。这将使我们能够更好地控制我们的网页播放器。
注意 − 要运行上述代码，您需要更新 <source> 中的"src"值。标签，并添加 mp4 或 webm 文件的路径。
现在，我们已经了解了如何使用 mp4 和 webm 文件创建一个简单的视频播放器，接下来我们将在视频的下一部分中为 FLV 格式的视频创建一个播放器。
使用 Video.js 为"flv"视频创建播放器
为 FLV 格式的视频创建播放器并不像其他类型的视频那样简单。我们需要执行一些额外的步骤来播放 VLV 视频。首先，我们需要在项目中添加 videojs-flash，以便为 FLV 视频创建一个 Flash 播放器。
请参考以下命令，将 videojs-flash 添加到项目中。
<script src="https://unpkg.com/videojs-flash/dist/videojsflash.min.js"></script>
基本上，我们在 <script> 的 src 属性中包含了 videojs-flash 的 URL。标签。
将 videojs-flash 包含到我们的项目中后，我们现在需要在 <source> 中将视频的 MIME 类型更改为"video/flv"。标签。
以下代码用于更改 flv 视频的类型 -
<source src="https://www.cainiaomax.com/videos/my_flv_video.flv" type="video/flv">
因此，我们将视频的类型更改为"video/flv"，并将源更改为 FLV 格式的视频。
示例
创建 flv 视频播放器的完整示例视频。
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video class="video-js" id="my-video" width="560" height="300" data-setup='{}' controls="true" autoplay="true", preload="auto"> > <source src="https://www.cainiaomax.com/videos/sample720.flv" type="video/flv" id="my-flv-video" > </video> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> const player = videojs(document.querySelector('.video-js')); </script> <script src="https://unpkg.com/videojs-flash/dist/videojsflash.min.js"></script> </body> </html>
在上面的例子中，我们为一个 flv 格式的视频创建了一个播放器。
注意事项
我们使用了 include videojs-flash 来创建一个 flash 播放器，用于播放 flv 视频。
我们将视频类型设置为 video/flv，并将 src 路径设置为 flv 视频路径。
最后，请确保视频播放器的尺寸足够大，因为如果尺寸小于 400x300，大多数浏览器都会阻止 flash 播放器。因此，请至少将视频播放器的高度和宽度更改为视频的尺寸。就像我们在示例中将高度设置为 720，宽度设置为 1280 一样。
您可能已经注意到，我们使用了 <video>用于创建 flv 视频播放器的 <video-js> 标签。或者，也可以使用 <video> 标签代替 <video> 标签来创建播放器。
示例
请参考以下使用 <video-js> 标签创建 flv 视频播放器的示例 -
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js id="my-video" width="560" height="300" data-setup='{}' controls="true" autoplay="true" preload="auto"> <source src="https://www.cainiaomax.com/videos/sample720.flv" type="video/flv" id="my-flv-video" > </video> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> const player = videojs('my-video'); </script> <script src="https://unpkg.com/videojs-flash/dist/videojsflash.min.js"></script> </body> </html>
在上面的例子中，我们将 <video class="video-js"> 标签替换为 video-js。
同样，对于 FLV 视频，我们 -
在 <script>> 标签中导入了 videojs-flash。
将视频 MIME 类型更改为"video/flv"
注意 - 要执行上面的示例，您需要将 <source> 标签内的"src"值更新为 FLV 视频文件的路径。
总结
在本教程中，我们了解了如何使用 video.js 创建一个基本的视频播放器。接下来，我们通过两个示例了解了如何为 FLV 视频创建视频播放器以及所需的更改，第一个示例分别使用 <video> 标签和 <video-js> 标签。
