Nacho Pace Maker

    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);
    // ....
    // 更多用法见官方文档

    Install

    npm i v-videojs

    DownloadsWeekly Downloads

    5

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    24.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • bwrong