Js视频播放器插件Video.js使用方法详解

简介

Video.js是一个开源的JavaScript库，用于在不同的浏览器和设备上播放HTML5视频和音频。它具有许多功能，包括自定义外观，广告插入，播放列表，字幕和音频曲目等。

在本篇教程中，我们将详细介绍Video.js的使用方法，并提供一些示例说明。

安装

首先，你需要从Video.js官网下载库文件。你可以将它作为本地文件引入，也可以使用CDN来引入。我们这里选择CDN引入方式：

<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>

创建视频播放器

接下来，我们需要在网页中创建一个视频播放器，使用Video.js可以轻松完成这个任务。以下是一个简单的示例：

<video id="my-player" class="video-js" controls preload="auto" width="640" height="264" 
poster="my_video_poster.png" data-setup="{}">
    <source src="my_video.mp4" type="video/mp4" />
    <source src="my_video.webm" type="video/webm" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

以上代码创建了一个ID为"my-player"的视频播放器，使用了默认的皮肤和控制条组件，宽度和高度分别为640和264像素，poster属性设置了视频播放前显示的图片，data-setup属性使用了一个空对象作为默认配置。我们为播放器添加了两种不同的视频格式：MP4和WebM。如果使用的浏览器无法播放某一种格式的视频，Video.js将会自动尝试使用另一种格式的视频播放。

自定义配置

Video.js提供了丰富的选项和API，可以通过配置文件或JavaScript代码来自定义播放器。以下是一些示例代码：

开启预览缩略图

如果你想在视频播放器上显示预览缩略图，可以使用videojs-thumbnails插件：

<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-thumbnails@2.2.0/thumbnails.min.js"></script>

<video id="my-player" class="video-js" controls preload="auto" width="640" height="264" 
poster="my_video_poster.png" data-setup='{"plugins":{"thumbnails":{"src":"my_video_thumbnails.jpg", "width":"240px"}}}'>
    <source src="my_video.mp4" type="video/mp4" />
    <source src="my_video.webm" type="video/webm" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

<script>
videojs('my-player', {

});
</script>

自定义控制条UI

如果你想自定义控制条UI，可以使用videojs-themes插件：

<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.10.2/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-themes@0.4.4/themes.min.js"></script>

<video id="my-player" class="video-js vjs-theme-minimal" controls preload="auto" width="640" height="264" 
poster="my_video_poster.png" data-setup="{}">
    <source src="my_video.mp4" type="video/mp4" />
    <source src="my_video.webm" type="video/webm" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>

<script>
videojs('my-player', {
    fluid: true,
    controlBar: {
        children: [
            'playToggle',
            'currentTimeDisplay',
            'timeDivider',
            'durationDisplay',
            'progressControl'
        ]
    }
});
</script>