Vue-custom-video NPM

vue-custom-video

Setup

npm i vue-custom-video --save

API

配置项

属性名	说明	类型	默认值
wrapper	用于装载播放器的dom元素	String	必填项
url	用于播放的视频地址，支持m3u8和mp4格式	String	必填项
poster	视频播放前的封面图	String	null
isShowSpeed	是否展示倍速按钮	Boolean	true
isCanDrag	是否允许拖拽进度条(限制往当前播放时间点之后拖动，不限制往前拖动)	Boolean	true
dragMaxTime	允许拖拽的最大播放进度(需配合isCanDrag)	Number	0
isShowAirPlay	IOS设备是否显示投屏按钮(前提是设备本身支持AirPlay)	Boolean	false
type	播放器模式。可选值为：`pull-拉流模式`	String	null
playerStyle	播放器风格。可选值为：`1-竖屏直播播放器` `2-普通播放器`	Number	2

回调函数

函数名	说明	返回值
onTimeupdate	视频播放位置改变时触发	currentTime(视频当前播放进度，单位：秒)、 duration(视频总时长，单位：秒)
onPlay	视频开始播放时触发	-
onPause	视频暂停时触发	-
onEnded	视频播放结束时触发	-
onError	视频加载错误时触发	errorCode 详细说明
onHlsError	Hls错误回调(Hls.Events.ERROR)	errorType
onChangeSpeed	视频播放倍速改变时触发	视频当前播放倍速
onFullScreen	视频全屏/退出全屏时触发	此时是否处于全屏状态(Boolean)
onNowPull	拉流/断流时触发	此时是否处于拉流状态(Boolean)
onMoveSlider	视频进度条拖动时触发	视频当前播放进度(单位：秒)
onStopSlider	视频进度条拖动停止后触发	视频当前播放进度(单位：秒)
onRestrictDrag	视频进度拖拽被禁止时触发	拖拽类型(`1-滑动`, `2-点击`)、当前允许最大拖拽到的秒数

实例方法

方法名	说明	返回值
getVideoEle	返回该组件的video元素	Video DOM
destroy	销毁组件	-
getCurrentMaxTime	返回当前视频播放过的最大时长	最大时长(单位：秒)

Example

注意：务必要在引用该组件页面的 destroyed 或 beforeDestroy 钩子中，调用该组件的 destroy 方法
<template>
    <div class="container">
        <div id="videoWrapper"></div>
    </div>
</template>

import CustomVideo from 'vue-custom-video' // 根据配置项中，你设置的播放器风格(playerStyle)，引入不同的样式 import 'vue-custom-video/dist/css/index_normal.css'; // 普通播放器 // import 'vue-custom-video/dist/css/index.css'; // 竖屏直播播放器

let myVideo = new CustomVideo({ wrapper: '#videoWrapper', poster: 'http://xxxxx.png', url: 'http://xxxx.mp4', isCanDrag: true, isShowSpeed: true, isShowAirPlay: false, playerStyle: 2, type: null, onTimeupdate: (currentTime, duration) => { console.log('=====>timeupdate', currentTime, duration); }, onPlay: () => { console.log('=====>play'); }, onPause: () => { console.log('=====>pause'); }, onEnded: () => { console.log('=====>ended'); }, onError: errorCode => { console.log(=====>errorCode = ${errorCode}); }, onHlsError: errorType => { console.log(=====>Hls errorType = ${errorType}); }, onChangeSpeed: speed => { console.log(=====>Set speed: ${speed}); }, onOpenSpeed: type => { console.log(=====>${type ? '打开' : '关闭'}倍速弹窗);
}, onFullScreen: isFull => { console.log(=====>${isFull ? '打开' : '关闭'}全屏); }, onNowPull: isPull => { console.log(=====>此时处于${isPull ? '拉流': '断流'}状态); }, onMoveSlider: time => { console.log(=====>拖动进度条，视频当前进度：${time}); }, onStopSlider: time => { console.log(=====>进度条拖动完毕，视频当前进度：${time}); }, onRestrictDrag: (type, currentMaxTime) => { // isCanDrag 为 false 时，此回调才会生效 console.log(=====>${type === 1 ? '滑动' : '点击'}进度条被限制！当前允许最大拖拽到第${currentMaxTime}秒); } });