使用 Video.js 播放器播放 MP3
在本教程中，我们将学习如何使用 video.js 播放器播放 MP3 文件或音频文件。使用 video.js 播放 MP3 文件与在标准 HTML5 中播放音频文件有些类似，但 video.js 需要一些额外的步骤才能支持 MP3 文件。
使用 video.js 播放 MP3 文件的优势
使用 video.js 构建 MP3 播放器可以让您更好地控制音频文件。所有 video.js 特有的函数都可以用于音频，从而提供更大的灵活性。
如何使用 video.js 播放器播放 MP3?
要创建音频播放器，我们需要创建一个 <audio>元素，然后向其中添加 video.js 类。之后，需要将音频文件的类型更改为文件的格式。例如，在本例中，我们将为 mp3 文件创建一个音频播放器，因此 HTML 中的文件类型将是"audio/mp3"。
现在，让我们看一个示例，创建一个播放 mp3 文件格式的播放器。
示例
请考虑以下示例 -
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <audio class="video-js vjs-default-skin" id="audio_example" data-setup='{}' controls="true" preload="auto"> > <source src="https://www.cainiaomax.com/videos/sample.mp3" type='audio/mp3' id='my_audio_file' > </audio> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
在上面的示例中，我们完成了以下操作:
在 <link> 标签的
属性中使用 CDN URL 引入 video.js。 在 <body> 部分中，创建了一个音频元素，其类名为"video-js vjs-default-skin"。这将使用 video.js 类作为视频播放器的默认皮肤。我们还将 <audio> 元素的 id 设置为"audio_example"。标签。
接下来，我们在 audio 标签上使用 data-setup='{}' 来确保如果浏览器在网页加载后没有预加载音频元素，video.js 可以稍后加载音频元素。
controls='true' 将在音频播放器上显示一些基本的播放暂停控件。
在 <source> 标签中，我们提供了音频文件"sample.mp3"的路径，并添加了该文件的 MIME 类型，即"type=audio/mp3"。执行此示例时，请确保输入音频文件的路径。
在 <script>标签中，我们添加了 video.js 文件的路径，以便将其包含在本地项目中。
执行上述代码将在浏览器中创建一个音频播放器，用于播放我们的音频文件。
注意事项
由于音频或 MP3 文件没有太多视觉效果，浏览器中只会显示音频播放器控件。因此，在 <audio> 上使用 "controls=true" 属性非常重要。元素，否则您的音频文件将隐藏在网页中。
现在，我们已经了解了如何使用 video.js 播放 mp3 文件，我将通过扩展音频播放器的功能向您展示更多示例。
向 mp3 文件添加图片/专辑封面
通常音频文件没有视觉元素，因此我们的音频播放器只显示用于在浏览器中播放和暂停音频文件的控件。
但是，我们也可以向音频播放器添加图片海报或专辑封面，使其更具吸引力。
要向音频文件添加图片元素，我们必须首先调整音频播放器的高度和宽度以适应图片。然后，我们需要在"poster"属性中传递图片文件的路径。"Poster"属性仅由 <video> 支持。如果我们使用标准 HTML，则标签会显示"poster"属性，但由于 video.js 的存在，"poster"属性也可用于音频文件，让您可以选择在 mp3 上添加专辑封面。
示例
请考虑以下示例，将图片海报添加到 mp3 文件，
<DOCTYPE html> <html> <head> <!link href="https://vjs.zencdn.net/7.19.2/video-js.css"rel="stylesheet" /> </head> <body> <audio class="video-js vjs-default-skin" id="audio_example" width="560" height="300" poster="https://www.cainiaomax.com/videos/sample.png" data-setup='{}' controls="true" autoplay="false" preload="auto" > <source src="https://www.cainiaomax.com/videos/sample.mp3" type='audio/mp3' id='my_audio_file_1' > </audio> <script src="https://vjs.zencdn.net/7.19.2/video.min.js""> </script> </body> </html>
在上面的代码片段中，我们首先添加了一个 mp3 文件，并为该文件创建了一个音频播放器。此外，我们还在 audio 元素中添加了 video.js 类。
除此之外，我们还使用了 'height'、'width' 和 'poster' 属性将图片海报添加到 mp3 文件上。'poster' 属性包含音频专辑封面的路径，其高度和宽度均为"700"，定义了图片海报的尺寸。
执行上述代码将在浏览器中创建一个音频播放器，该播放器将播放 mp3 文件，并且在音频播放器控件上方将显示一个尺寸为"700×300"的图片海报。
注意- 要运行上述示例，请将 <source> 中的"src"值替换为将 元素替换为 mp3 文件的路径，并将"poster"属性的值替换为图片文件。
总结
在本教程中，我们学习了如何使用 video.js 包播放 mp3 文件。此外，我们还学习了一些示例，演示了如何制作一个带有控件的音频播放器来播放 mp3 文件。在最后一个示例中，我们学习了如何在音频文件中添加图片海报，以使音频播放器更加用户友好。
