@neosjs/videojs-player

Vue Videojs 播放器

示例

<NeosPlayer
id="VideoPlayer"
:class="['neosjs-player']"
:sources="sources"
:poster="poster"
v-model:volume="1"
v-model:muted="false"
:playbackRates="[0.5, 1, 1.5, 2, 2.5, 3]"
@ready="handlePlayerReady"
@dispose="handlePlayerDispose"
@mounted="handleMounted"
@unmounted="handleUnmounted"
@play="handleEvent($event)"
@pause="handleEvent($event)"
@ended="handleEvent($event)"
@loadeddata="handleEvent($event)"
@waiting="handleEvent($event)"
@playing="handleEvent($event)"
@canplay="handleEvent($event)"
@canplaythrough="handleEvent($event)"
@timeupdate="handleTimeupdateEvent(player?.currentTime())"
>    
</NeosPlayer>

const sources =  [
    // mp4格式
    { src: 'https://xxxxxxx.mp4', type: 'video/mp4' },
    // m3u8格式
    {
      src: 'https:/xxxxxxxx.m3u8',
      type: 'application/x-mpegurl'
    },
    // 音频
    {
      src: 'https:/xxxxxxxx.mp3',
      type: 'audio/mp3'
    }
]

const handleMounted = (payload: any) => {
    console.log('----播放器挂载完成', payload)
    state.value = payload.state // 播放器状态
    player.value = payload.player // 播放器实例
  }

  const handleUnmounted = () => {
    console.log('---播放器卸载')
  }

  const handlePlayerReady = (event: any) => {
    // player.value.currentTime(11) // 设置当前播放时长
    // player.value.poster('xxxxxxx') // 设置封面图
    console.log('---播放器准备完成', event)
  }

  const handlePlayerDispose = (event: any) => {
    console.log('---清除播放器', event)
  }
  const handleEvent = (event: any) => {
    console.log('---执行事件', event)
  }
  const handleTimeupdateEvent = (time?: number) => {
    console.log(`播放时长：${time}`)
  }