videojs-player视频播放技术学习

介绍：

videojs是一个开源的HTML5视频播放器，它可以在各种设备和浏览器上播放视频。videojs提供了丰富的API和插件，可以实现自定义的视频播放功能。

使用videojs实现视频播放的步骤：

1. 引入videojs库 在HTML文件中引入videojs库的CSS和JS文件。

```html

```

2. 创建video标签 在HTML文件中创建一个video标签，并设置视频的URL和封面图。

```html

To view this video please enable JavaScript, and consider upgrading to a web browser that

supports HTML5 video

```

3. 初始化videojs 在JS文件中初始化videojs，并设置视频的配置选项。

```javascript var player = videojs('my-video', { autoplay: true, controls: true, sources: [{ src: 'my-video.mp4', type: 'video/mp4' }] }); ```

4. 添加事件监听器 可以通过添加事件监听器来实现自定义的视频播放功能，例如：

```javascript

player.on('play', function()

{ console.log('视频开始播放'); });

player.on('pause', function()

{ console.log('视频暂停播放'); });

player.on('ended', function()

{ console.log('视频播放结束'); }); ```

通过以上步骤，就可以使用videojs实现视频播放功能了。

调试参考代码：

目标实现效果：

另外的参考学习资料：

Vue3视频播放（Video组件）

可自定义设置以下属性：  

视频文件地址（src），类型：string，必传，默认 ''，支持网络地址 https 和相对地址

视频封面地址（poster），类型：string，默认 ''，支持网络地址 https 和相对地址

在未设置封面时，自动获取视频第 second 秒指定帧作为封面图（second），类型：number，单位 s，默认 0.5s，由于不少视频第一帧为黑屏，故设置视频开始播放时间为0.5s，即取该时刻帧作为封面图

视频播放器宽度（width），类型：number，单位px，默认 800

视频播放器高度（height），类型：number，单位px，默认 450

视频就绪后是否马上播放（autoplay），优先级高于preload，类型：boolean，默认 false

是否向用户显示控件，比如是否向用户显示控件，比如进度条，全屏等（controls），类型：boolean，默认 true

视频播放完成后，是否循环播放（loop），类型：boolean，默认 false

是否静音（muted），类型：boolean，默认 false

是否在页面加载后载入视频（preload）如果设置了autoplay属性，则preload将被忽略，类型：'auto'|'metadata'|'none'，默认 auto // auto:一旦页面加载，则开始加载视频; metadata:当页面加载后仅加载视频的元数据 none:页面加载后不应加载视频

播放暂停时是否显示播放器中间的暂停图标（showPlay），类型：boolean，默认 true

video的poster默认图片和视频内容的缩放规则（fit），类型：'none'|'fill'|'contain'|'cover'，默认 'contain' // none:(默认)保存原有内容，不进行缩放; fill:不保持原有比例，内容拉伸填充整个内容容器; contain:保存原有比例，内容以包含方式缩放; cover:保存原有比例，内容以覆盖方式缩放

注：为避免与 HTML5 原生标签

在要使用的页面引入：