Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @bwrong/v-video with all npm packages installed. Try it out:

var vVideo = require("@bwrong/v-video")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@bwrong/v-video v0.0.2

Based on the Vue directive by videojs, the creation process of videojs is simplified

v-video

基于videojs封装的Vue指令,简化videojs创建流程

使用方法

  1. 组件注册
import videojs from 'video.js'; // 需要依赖video.js
import myVideo from 'v-video';
Vue.use(myVideo,{
    // options...
})
  1. 使用组件

为了兼容原生video标签,在原生video标签上加上v-video指令即可,然后通过props传入参数

 <video v-video controls src="./assets/media/demo.mp4" poster="./assets/img/img1.jpg"></video>

API

Directive

名称说明
v-video将元素初始化为videojs播放器

Props

属性必须说明类型默认值
srcyes视频文件的路径,路径相对与根目录String
posterno封面文件的路径,路径相对与根目录String视频第一帧
widthno播放器宽度String100%
heightno播放器高度String100%
controlsno是否显示播放器控件Booleanfalse
autoplayno自动播放Booleanfalse
preloadno预加载,可选项:'auto'、'metadata'、'none'String'auto'
mutedno静音Booleanfalse

Methods

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

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

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

// 播放
this.videoPlayer.play();
// 暂停
this.videoPlayer.pause();
// 销毁
this.videoPlayer.dispose();
// 事件监听
this.videoPlayer.on(eventName,fn);
// 触发事件
this.videoPlayer.trigger(eventName);
// 更多用法见官方文档
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free