vue利用videojs-player实现视频播放

Posted 2023-04-12 有梦想的刺儿

前言：之前插入视频我一直想要使用的是网上比较火的vue-video-player，但是出现了找不到

'vue-video-player/src/custom-theme.css'

等问题，以及视频组件串位等问题，也有可能是vue3兼容性的问题，因此，后来采用了这个videojs-player。

流程：首先下载对应的包

npm install video.js @videojs-player/vue --save

然后去官网可以找到自己想要实现的案例效果所对应的代码并使用到自己的项目中来。

videojs-player | Homepage (surmon.me)

可能需要稍作修改，如没有scss，可以去除style标签上对应的lang；去除script上的lang并删掉ts相关的代码或用不到的方法等等。

可以拿我这里改过的实例代码试一试↓

<template>
  <video-player
    class="video-player vjs-big-play-centered"
    src="https://vjs.zencdn.net/v/oceans.mp4"
    poster="https://vjs.zencdn.net/v/oceans.png"
    crossorigin="anonymous"
    playsinline
    controls
    :volume="0.6"        
    :height="320"        
    :playback-rates="[0.7, 1.0, 1.5, 2.0]"        
    @mounted="handleMounted"
    @ready="handleEvent($event)"
    @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="handleEvent(player?.currentTime())"
  />
</template>

<script>
  import  defineComponent, shallowRef  from 'vue'
  import  VideoJsPlayer  from 'video.js'
  import  VideoPlayer  from '@videojs-player/vue'
  import 'video.js/dist/video-js.css'

  export default 
    name: 'vue-basic-player-example',
    title: 'Basic player (Vue)',
    components: 
      VideoPlayer
    ,
    setup() 
      //可打印出当前所触发的事件
      const handleEvent = (log) => 
        console.log('Basic player event', log)
      

      return  handleEvent 
    
  
</script>

<style scoped>
  .video-player 
    background-color: black;
    width: 100%;
  
</style>

可以看到页面实现了对应的效果，基本的播放功能可以实现： 

使用本地文件也是可以的，如require('@/assets/video/test.mp4')，不同项目路径可能会有些许差别。

附加：弹窗关闭视频依旧运行的问题

可以实现在弹窗中播放视频的效果，但是会出现弹窗关闭视频依旧运行的问题。页面虽然关掉了，依旧在播放，可听到声音。

解决方案：可以使用v-if，根据当前弹窗框的显示状态决定video-player是否存在即可实现。

如下例中，通过dialogVisible决定。

<video-player v-if="dialogVisible" class="video-player vjs-big-play-centered" :src="totalsrc"
        poster="https://vjs.zencdn.net/v/oceans.png" crossorigin="anonymous" playsinline controls :volume="0.6"
        height="500%" :playback-rates="[0.7, 1.0, 1.5, 2.0]"
        @mounted="handleMounted"
        @ready="handleEvent($event)"
        @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="handleEvent(player?.currentTime())"
        />

希望本文会对您有所帮助^_^

web前端培训分享：使用Dplayer实现Vue3中的视频及弹幕播放

Dplayer是一款上手简单，功能强大的HTML5视频播放器，我们可以使用它，快速在普通HTML、Vue、React中实现视频播放的功能需求。Dplayer同时也提供了目前各大视频站都在使用的弹幕功能，让我们的视频功能更加丰富有趣。下面小千分享如何使用Dplayer在Vue3中实现视频播放及弹幕功能。

一、安装

使用npm

npm i dplayer -S

使用yarn

yarn add dplayer

二、在Vue3组件中，准备一个ref容器

< div ref=“videoRef” class=“player” />

三、在setup中获取绑定ref

这里我们需要用到vue3提供的ref方法

< script lang=“ts”>import { defineComponent,ref } from 'vue’export default defineComponent({ setup () { const videoRef = ref() // 获取视频容器 //此处我们可以进行播放器的初始化 return { videoRef } }})

四、使用Dplayer做视频对象的初始化

当我们在setup中采用ref拿到视频容器节点之后，就可以调用Dplayer来实例化一个视频播放对象

< script lang=“ts”>import { defineComponent,ref } from 'vue’import Dplayer from 'dplayer’export default defineComponent({ setup () { const videoRef = ref() // 获取视频容器 new Dplayer({ //初始化视频对象 container:videoRef.value, //指定视频容器节点 video:{ url:video.url, // 指定视频播放链接 pic:video.cover // 指定视频封面图 } }) return { videoRef } }})</ script>

五、为视频加入弹幕

Dplayer提供了很多的配置及事件，允许我们按需对视频作出相应的控制，例如:

hotkey 开启热键，支持快进、快退、音量控制、播放暂停

preload 视频预加载控制

playbackSpeed 可选播放速度

subtitle 外挂字幕

subtitle.url 字母链接

danmuku 弹幕配置
…
可以通过调整Dplayer实例配置的方式，为其增加弹幕功能

new Dplayer({ //初始化视频对象 container:videoRef.value, //指定视频容器节点 video:{ url:video.url, // 指定视频播放链接 pic:video.cover // 指定视频封面图 }, danmuku:{ addition:video.danmuurl //配置弹幕接口路径 }})

六、呈现最终效果

本文来自千锋教育，转载请注明出处。