乐趣区

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

jiezi

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

退出移动版