关于video-player视频插件修改样式问题

最近做项目运用到video-player插件,使用时候发现默认播放键在左上角,这样很影响美观问题,这几天查询了一些资料最后找到了几个解决方案

按键居中几个方法

1.修改参数

我们可以直接改变<video 标签来达到效果,可以直接在video标签中加vjs-big-play-centered类
代码如下(示例):

 <video-player
          class="video-js vjs-big-play-centered"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
         
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-video-player 是一个用于 Vue.js 应用程序的轻量级视频播放插件,它简化了在 Vue 组件中集成视频播放功能的过程。这个插件允许您快速添加视频播放器,并提供了各种自定义选项和事件处理,以满足不同场景的需求。 以下是使用 Vue-video-player 的基本步骤: 1. 安装插件: 使用 npm 或者 yarn 来安装: ```bash npm install vue-video-player # 或者 yarn add vue-video-player ``` 2. 引入并注册插件: 在 main.js 或者其他 Vue 实例的配置文件中,导入并注册插件: ```javascript import VueVideoPlayer from 'vue-video-player' Vue.use(VueVideoPlayer) ``` 3. 在组件中使用视频播放器: 在你的 Vue 组件模板中,创建一个 `<vue-video-player>` 元素,设置 `url` 属性为视频源,可选地提供其他属性,如播放器样式、控制条、预加载等: ```html <vue-video-player url="path/to/your/video.mp4" :controls="true" :preload="auto" :poster="海报图片地址" ></vue-video-player> ``` 你可以使用 `:options` 或 `v-bind="$attrs"` 来传递更多的自定义配置,如自定义事件监听等。 4. 事件处理: 视频播放器会触发一些内置事件,如 `play`, `pause`, `ended`, 等,你可以在组件内监听这些事件并执行相应的操作: ```html <vue-video-player @play="onPlay" @pause="onPause"></vue-video-player> ``` ```javascript methods: { onPlay() { console.log('Video started playing'); }, onPause() { console.log('Video paused'); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值