v-videojs
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

v-videojs

npm npm NPM GitHub stars

基于video.js封装的Vue指令,用于创建一个视频播放器。

使用方法

video上添加v-video指令,部分参数可以通过props传入,也可以全局配置,props拥有更高优先级。

import videojs from 'video.js'; // 需要依赖video.js
import 'video.js/dist/video-js.css'
import video from 'v-videojs';
import lang from 'video.js/dist/lang'
videojs.addLanguage('zh-CN', lang); // 添加语言
Vue.use(video, {
    onlyOnePlay: true, // 是否同时只允许一个播放
    // options... 还可以接收video.js配置项
})
<video v-video controls poster="./assets/img/img1.jpg">
    <source  src="/demo.mp4" type="video/mp4">
</video>

API

Directive

名称 说明
v-video 创建video.js播放器

Props

属性 必须 说明 类型 默认值
src yes 视频文件地址 String -
poster no 封面文件地址 String 视频第一帧
width no 宽度 String 100%
height no 高度 String 100%
controls no 是否显示控件 Boolean false
autoplay no 自动播放 Boolean false
preload no 预加载,可选项:'auto'、'metadata'、'none' String 'auto'
muted no 静音 Boolean false

Events

支持video元素所有事件

<video class="" controls v-video @play="play" @pause="pause">
    <source  src="/demo.mp4" type="video/mp4">
</video>

Methods

正常来说,上述API能够满足日常使用,如果需要使用video.js的方法及其他高级用法,可采用如下方式:

  1. 使用ref标识元素,名字可以自定义
<!-- html -->
<video v-video controls poster="./assets/img/img1.jpg" ref="video">
    <source src="/demo.mp4" type="video/mp4">
</video>
  1. 获取video.js实例
// js
// 这里的例子使用计算属性computed,也可直接使用 this.$refs.video.videoPlayer
computed: {
    videoPlayer () {
        return this.$refs.video.videoPlayer;
    }
},
  1. 使用video.js实例上的属性和方法,在mounted生命周期使用

所有官方的方法均可使用,具体用法见官方文档

// 播放
this.videoPlayer.play();
// 暂停
this.videoPlayer.pause();
// 销毁
this.videoPlayer.dispose();
// 事件监听
this.videoPlayer.on(eventName,fn);
// 触发事件
this.videoPlayer.trigger(eventName);
// ....
// 更多用法见官方文档

Readme

Keywords

Package Sidebar

Install

npm i v-videojs

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

24.5 kB

Total Files

9

Last publish

Collaborators

  • bwrong