jy-video

安装

npm i jy-video

main.js中全局引入

import jyVideo from 'jy-video'
import 'jy-video/dist/jy-video.css'
Vue.use(jyVideo);

用法

直接在组件中使用video-player组件,外层包裹div设置宽度用于控制播放器组件的宽度（播放器宽度100%）：

<div style="width:500px">
  <video-player 
    :domId="domId"
    :videoId="videoId"
    :startSecond="startSecond"
    :interval="interval"
    :videoPath="videoPath"
    :posterPath="posterPath"
    :screenScale="screenScale"
    @recordingTime="recordingTime">
  </video-player>
</div>

参数

domId: 视频元素id，String，必传;
videoId: 视频id，在recordingTime回调的第二个参数传出，String
startSecond: 视频初始播放的秒，Number，单位秒，默认值0;
interval：间隔多久请求一次，（用于记录播放进度），Number，单位秒，默认值5;
videoPath：视频地址，String，必传;
posterPath：封面图片地址，String;
isAutoplay：视频是否加载后自动播放，Boolean，默认值false;
screenScale：视频盒子宽高比，String，支持:'16/9','4/3','1/1',默认16/9;

回调

1、recordingTime：在该回调中调用记录播放进度请求;
参数:
sec：当前播放进度秒
videoId：视频id

用例：
methods:{
    recordingTime(sec,videoId){
        console.log('进度时间',sec,videoId)
    }
}

2、play：视频播放回调，在该回调中调用其他视频的暂停方法来暂停其他视频的播放;
暂停方法通过组件实例获取，以vue2为例，可通过ref获取组件实例后调用 stopPlay() 即可停止视频播放

用例：
<video-player ref="id"></video-player>
<button @click="handleStop">点击暂停播放</button>

methods:{
    handleStop(){

        //注意：在vue2中如果用v-for遍历渲染出多个播放器则 this.$refs['id'] 是一个数组，调用 stopPlay 时写法应为 this.$refs['id'][0].stopPlay() 
        console.log(this.$refs['id']) 

        //将ref名为id的视频停止播放
        this.$refs['id'].stopPlay() 
        
    }
}