关于vue.js:视频组件vuevideoplayer的使用

1.开发环境 vue2
2.电脑系统 windows11专业版
3.在开发的过程中,咱们可能会须要应用到视频的查看,上面我来分享一个视频组件vue-video-player
4.废话不多说,间接上操作:

npm i vue-video-player

5.在main.js中增加如下代码:

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

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

6.在应用的文件中增加如下代码:

<video-player  class="video-player vjs-custom-skin"
  ref="videoPlayer" 
  :playsinline="true" 
  :options="playerOptions"
></video-player>

6-1.配置数据:

playerOptions : {
    playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
    autoplay: false, //如果true,浏览器筹备好时开始回放。
    muted: false, // 默认状况下将会打消任何音频。
    loop: false, // 导致视频一完结就从新开始。
    preload: 'auto', // 倡议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器抉择最佳行为,立刻开始加载视频（如果浏览器反对）
    language: 'zh-CN',
    aspectRatio: '16:9', // 将播放器置于晦涩模式，并在计算播放器的动静大小时应用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将领有流体大小。换句话说，它将按比例缩放以适应其容器。
    sources: [{
      type: "", //这里的品种反对很多种:根本视频格式、直播、流媒体等
      src: ""  //url地址
    }],
    poster: "", //你的封面地址
    // width: document.documentElement.clientWidth, //播放器宽度
    notSupportedMessage: '此视频暂无奈播放，请稍后再试', //容许笼罩Video.js无奈播放媒体源时显示的默认信息。
    controlBar: {
      timeDivider: true, //以后工夫和持续时间的分隔符
      durationDisplay: true, //显示持续时间
      remainingTimeDisplay: true, //是否显示剩余时间性能
      fullscreenToggle: true  //全屏按钮
    }
}

7.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。