web视频播放器videojs

￡神魔★判官ぃ 2022-09-05 12:39 320阅读 0赞

### VideoJS ###

*  下载
 *   *  Video.js CDN
     *  npm安装
 *  创建播放器
 *  设置
 *   *  自动设置
     *  手动设置
 *  配置选项
 *  播放器就绪回调
 *  常用方法
 *  监听事件

Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。当前版本 `7.15.0`， [点击前往官方文档][Link 1]。

# 下载 #

## Video.js CDN ##

引入video.js和video-js.css，下例为官方示例：

<head>
      <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
    
      
      
    </head>
    
    <body>
      <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" 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 src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
    </body>

## npm安装 ##

> npm install --save-dev video.js

在vue页面引入js和css

import videojs from 'video.js'
    import 'video.js/dist/video-js.css'

# 创建播放器 #

# 设置 #

## 自动设置 ##

默认情况下，当您的网页完成加载时，Video.js 将扫描具有该data-setup属性的媒体元素。该data-setup属性用于将`选项`传递给 Video.js

此时已经成功创建并设置了播放器  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70]

## 手动设置 ##

在现代网络上，<video>当页面完成加载时，元素通常不存在。在这些情况下，自动设置是不可能的，可以通过videojs功能进行手动设置。

videojs(id, options, function onPlayerReady() { })

其中id是播放器的id，options是播放器的配置选项对象，function是播放器就绪后的回调函数

以上面**自动配置**的内容为例

<video id="video" class="video-js"></video>

// script
    videojs(
        'video',
        { 
        	sources: [{ 
            	src: 'https://v-cdn.zjol.com.cn/280443.mp4',
            	type: 'video/mp4'
    		}],
            controls: true,
            autoplay: false,
            preload: 'auto',
            width: '800px'
        }
    )

> 注意：不要同时使用`data-setup属性`和`选项对象`

# 配置选项 #

videojs(
        'video',
        { 
            sources: [{ 
            	src: 'https://v-cdn.zjol.com.cn/280443.mp4',
            	type: 'video/mp4'
    		}, { 
            	src: 'https://v2.szjal.cn/20190408/0YnHrnOM/index.m3u8',
            	type: 'application/x-mpegURL'
    		}],
            autoplay: 'muted',
            controls: true,
            width: 600,
            height: 400,
            loop: true,
            muted: true,
            poster: 'https://bpic.588ku.com/back_list_pic/21/07/09/a5a928351f9b645e95414663d7ec376f.jpg!/fw/630/quality/90/unsharp/true/compress/true',
            preload: 'auto'
        }
    )

以下为常用配置选项：

**`autoplay`**

> 类型：`boolean|string` 注意1：此时，自动播放属性和选项不能保证您的视频会自动播放。注意2：如果媒体元素上有一个属性，该选项将被忽略。注意3：不能在属性中传递字符串值，必须在 videojs 选项中传递

建议向videojs传递配置选项，以下为有效值：

*  布尔值 `false` ：与在视频元素上没有属性相同，不会自动播放
 *  布尔值 `true` ：与在视频元素上具有属性相同，将使用浏览器自动播放
 *  字符串 `'muted'` ：将使视频元素静音，然后在加载启动时手动调用play()。这很可能奏效。
 *  字符串 `'play'` ：将在加载启动时调用play()，类似于浏览器的自动播放
 *  字符串 `'any'` ：将在加载启动时调用play()，如果promise被拒绝，它将使视频元素静音，然后调用play()

通常情况下使用 `'muted'` ，它可以静音自动播放。

**`controls`**

> 类型： `boolean`

确定播放器是否具有用户可以与之交互的控件。如果没有控件，启动视频播放的唯一方法是使用`autoplay属性`或通过`播放器 API`

**`width`**

> 类型： `string|number`

设置视频播放器的显示宽度（以像素为单位）

**`height`**

> 类型： `string|number`

设置视频播放器的显示高度（以像素为单位）

**`loop`**

> 类型： `boolean`

使视频一结束就重新开始

**`muted`**

> 类型： `boolean`

默认情况下将静音任何音频

**`poster`**

> 类型： `string`

在视频开始播放之前显示的图像的 URL。这通常是视频的一帧或自定义标题屏幕。一旦用户点击“播放”，图像就会消失。

**`preload`**

> 类型： `string`

是否在<video>加载元素后立即开始下载视频数据，以下为有效值：

*  `'auto'`：立即开始加载视频（如果浏览器支持），一些移动设备不会预加载视频以保护其用户的带宽/数据使用
 *  `'metadata'`：仅加载视频的元数据，其中包括视频的时长和尺寸等信息
 *  `'none'`：不要预加载任何数据，浏览器将等到用户点击“播放”开始下载

推荐使用`'auto'`，因为它允许浏览器选择最佳行为

**`src`**

> 类型： `string`

要嵌入的视频源的源 URL

> 注意：当提供字符串作为源时，Video.js 将尝试从文件扩展名推断视频类型，但此推断不适用于所有情况，例如m3u8格式文件。建议使用`source`选项。

**`source`**

> 类型： `Array`

一个对象数组，它反映了本机元素拥有一系列子元素的能力。这应该是具有`src`和`type`属性的对象数组，例如：

# 播放器就绪回调 #

因为Video.js的技术有可能被异步加载，所以在设置后立即与播放器交互并不总是安全的。出于这个原因，Video.js播放器有一个“就绪”的概念，任何以前使用过jQuery的人都会熟悉这个概念。有三种方法可以传递这些回调：

将回调作为第三个参数传递给Videojs()函数：

videojs('video', null, function onPlayerReady() { 
    	console.log(this)
    });

将回调传递给播放器的`ready()`方法：

var player = videojs('video');
    
    player.ready(function() { 
    	console.log(this)
    });

监听播放器的`"ready"`事件：

var player = videojs('my-player');
    
    player.on('ready', function() { 
    	console.log(this)
    });

# 常用方法 #

# 监听事件 #

[Link 1]: https://docs.videojs.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70]: /images/20220829/b56d1a3963e84347a875777f4079305b.png