vue-video-player 显示控件

### 如何配置 `vue-video-player` 显示播放控件 为了确保 `vue-video-player` 插件能够正常显示播放控件，可以按照以下方法进行设置： #### 安装依赖包 首先，需要安装必要的依赖包来支持视频播放功能。对于 Vue 2.x 版本的应用程序来说，可以通过如下命令完成安装[^2]: ```bash npm install [email protected] [email protected] ``` #### 配置组件选项 接着，在使用该组件时通过传递特定属性来自定义其行为。为了让默认的控制条（包括播放/暂停按钮）可见，可以在初始化 player 实例的时候指定 options 参数中的 controls 属性为 true。 下面是一个简单的例子展示如何做到这一点: ```html <template> <div id="app"> <!-- 使用 v-bind 动态绑定 :options --> <video-player class="video-player-box" ref="videoPlayer" :options="playerOptions"/> </div> </template> <script> export default { name: 'App', data() { return { // 设置播放器参数 playerOptions: { playbackRates: [0.7, 1.0, 1.5, 2.0], // 可选倍速播放速度 autoplay: false, muted: false, loop: false, preload: 'auto', // 建议预加载'auto' language: 'zh-CN', aspectRatio: '16:9', // 将播放器置于流畅模式下的宽高比 fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它会按比例缩放以适应其容器。 sources: [{ type: "application/x-mpegURL", // HLS 流媒体格式 src: "https://your-stream-url.com/index.m3u8" // 替换成实际HLS源地址 }], poster: "/static/images/poster.png", // 您自己的封面图路径 notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的消息 controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true /* 是否显示全屏按钮 */ }, controls: true // **重要**: 这里设为true表示启用内置控制器** } }; } }; </script> ``` 这段代码展示了如何创建一个带有自定义样式的 HTML5 `<video>` 标签，并利用 Video.js 库增强用户体验。其中最重要的是设置了 `controls=true` 来激活标准 UI 控制栏。 如果希望进一步调整样式或隐藏某些元素，则可以根据官方文档提供的 CSS 类名来进行更细致的操作[^3]: 例如要移除大尺寸播放按钮可采用如下方式修改全局样式表： ```css /* 移除中心位置的大号播放图标 */ .vjs-custom-skin > .video-js .vjs-big-play-button { display:none; } ```