vue-video-player视频播放器配置详解

最新推荐文章于 2024-09-07 16:14:41 发布

你好鸭达可

最新推荐文章于 2024-09-07 16:14:41 发布

阅读量845

点赞数 4

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_59528719/article/details/136116294

版权

这篇文章主要介绍了vue-video-player视频播放器的使用和配置，感兴趣的小伙伴们可以参考一下！

1.npm安装（局部安装）

npm install vue-video-player -save

2.在main.js中添加

import VueVideoPlayer from 'vue-video-player' // 视频播放器
Vue.use(VueVideoPlayer)

3.创建一个VueVideoPlayer.vue组件

<!-- :options="playerOptions" 视频配置信息 -->
                       
<video-player class="vjs-custom-skin" :options="playerOptions"></video-player>

<script>
 //引入video样式
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
//引入hls.js
import 'videojs-contrib-hls.js/src/videojs.hlsjs'
export default {
  name: "Goods",
  data() {
    return {
      playerOptions: {
            playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度