vue-video-player使用

本文介绍了在vue项目中使用vue-video-player播放视频的方法

1、安装vue-video-player拓展

使用npm安装vue-video-player，也可以使用yarn、cnpm

npm install vue-video-player --save

2、全局注册组件vue-video-player

import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)

3、使用vue-video-player

3.1 html 代码

<video-player  v-if="$utils.isVideo(item)"
    class="video-player vjs-custom-skin"
    ref="'videoPlayer"
    :playsinline="true"
    style="width: 100%;"
    :options="getPlayerOptions(item)"
    @play="($event) => onPlayerPlay($event)"
>
 </video-player>

3.2 js代码播放配置playerOptions

data(){
    return {
        playerOptions: {
          //controls: false,
          //播放速度
          //playbackRates: [0.5, 1.0, 1.5, 2.0],
          //如果true,浏览器准备好时开始回放。
          autoplay: false,
          // 默认情况下将会消除任何音频。
          muted: false,
          // 导致视频一结束就重新开始。
          loop: false,
          // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          preload: 'auto',
          language: 'zh-CN',
          // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
         // aspectRatio: '16:9',
          // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          fluid: true,
          sources: [{
            //类型
            type: "video/mp4",
            //url地址
            src: ''
          }],
          //你的封面地址
          poster: '',
          //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          notSupportedMessage: 'Error',
          controlBar: {
            timeDivider: false,
            durationDisplay: false,
            remainingTimeDisplay: false,
            volumeMenuButton: false,
            //全屏按钮
            fullscreenToggle: true,
            playToggle: true,
            volumePanel: true,
            currentTimeDisplay: false,
            progressControl: false,
            //'liveDisplay', 'seekToLive', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subsCapsButton', 'audioTrackButton', 'fullscreenToggle'
          }
        }
    }
}
 getPlayerOptions(src){
     let temp = {...this.playerOptions} //深拷贝
     temp.sources[0].src = src //自定义src
     return temp
},

3.3 配置注意

注意：controlBar为底部控制栏显示配置，这个是通过video.js找到的配置项目

timeDivider //时间
durationDisplay //时长
remainingTimeDisplay //剩余时间
volumeMenuButton //音量
fullscreenToggle //全屏
playToggle //暂停/播放
volumePanel //音量面板
currentTimeDisplay //当前时间
progressControl //进度条
liveDisplay 
seekToLive
customControlSpacer
playbackRateMenuButton
chaptersButton
descriptionsButton
subsCapsButton
audioTrackButton