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

最新推荐文章于 2023-06-02 16:36:24 发布

奋斗的小赛

最新推荐文章于 2023-06-02 16:36:24 发布

阅读量1.5k

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_36962155/article/details/115461807

版权

在项目中使用video-player插件时，遇到默认播放键位置不佳的问题。通过研究，提供了两种解决办法：一是直接在<video>标签中添加vjs-big-play-centered类；二是通过修改CSS实现，但需注意避免对其他页面造成影响，可以创建新的style来针对性地设置video属性并结合!important使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

按键居中几个方法

1.修改参数

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

 <video-player
          class="video-js vjs-big-play-centered"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          >
            ></video-player>

2.修改CSS

组件默认样式是这样的，但是我们在CSS中直接改的话是行不通需要加个穿透
代码如下（示例）：

/deep/. video-js .vjs-big-play-button{

}

这里需要把style里面的scoped去掉，但是去掉的话，对其他页面也会有影响了，所以这里不建议在这里去掉，最后找到了一个比较优化的方案,我们可以再添加一个style 这个style里面不写scoped只写一个video属性，就能很好的解决这个问题了，结合!important使用
代码如下（示例）：

<style scoped lang="less">
..........
..........
</style>
<style>
/deep/. video-js .vjs-big-play-button{
........
}
</style>

总结

第一次发文章，本人也是小白，也算是慢慢学习中记录一下经历，大家共同加油吧