video.js控制栏不见

Video.js 是一个流行的开源 HTML5 视频播放器，它允许开发者通过简单的配置来创建自定义的视频播放界面。如果你遇到了控制栏不见的问题，可能是由以下几个原因造成的：

基础概念

Video.js: 一个基于HTML5的JavaScript库，用于创建自定义的视频播放器界面。
控制栏: Video.js 中的一个组件，通常包含播放/暂停按钮、进度条、音量控制等。

可能的原因及解决方法

CSS 样式问题:
- 原因: 可能是由于CSS样式冲突或者覆盖导致控制栏不可见。
- 解决方法: 检查是否有其他CSS规则影响了.vjs-control-bar类，确保没有设置display: none;或者其他隐藏元素的样式。

JavaScript 初始化问题:
- 原因: Video.js可能没有被正确初始化，或者初始化代码有误。
- 解决方法: 确保你已经正确引入了Video.js的CSS和JS文件，并且在DOM元素加载完成后初始化Video.js。
- 解决方法: 确保你已经正确引入了Video.js的CSS和JS文件，并且在DOM元素加载完成后初始化Video.js。
HTML 结构问题:
- 原因: 如果HTML结构不正确，Video.js可能无法正确渲染控制栏。
- 解决方法: 确保你的<video>标签包含了正确的class属性，并且没有拼写错误。
- 解决方法: 确保你的<video>标签包含了正确的class属性，并且没有拼写错误。
配置选项问题:
- 原因: 可能在初始化时设置了错误的配置选项，导致控制栏被隐藏。
- 解决方法: 检查初始化时的配置选项，确保没有设置control: false;。
- 解决方法: 检查初始化时的配置选项，确保没有设置control: false;。
浏览器兼容性问题:
- 原因: 某些浏览器可能会有兼容性问题，导致控制栏显示异常。
- 解决方法: 尝试在不同的浏览器中测试，查看是否存在相同的问题。如果只在特定浏览器中出现，可能需要针对该浏览器进行特定的调整或修复。

应用场景

Video.js广泛应用于需要自定义视频播放界面的网站和应用中，如在线教育平台、新闻媒体网站、企业内部培训系统等。

优势

支持HTML5视频播放，兼容性好。
提供丰富的插件和扩展，易于定制。
开源，社区活跃，文档齐全。

类型

基础播放器: 提供基本的播放控制功能。
自定义播放器: 可以根据需求添加额外的功能和样式。

示例代码

以下是一个简单的Video.js初始化示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video.js Example</title>
  <link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
</head>
<body>
  <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
    data-setup='{}'>
    <source src="my-video.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
</body>
</html>

确保按照上述步骤检查和调整，通常可以解决控制栏不见的问题。如果问题依旧存在，建议查看浏览器的开发者工具中的控制台输出，可能会有关于问题的具体错误信息。

页面内容是否对你有帮助？

有帮助

没帮助

隐藏视频播放器Android phonegap中的控制栏

、、、

我想在安卓手机的onload上播放一段视频而不显示控制栏。我使用了Html5视频标签，它在所有浏览器上都可以正常工作，但在安卓手机上不起作用。<video src="myvideo.mp4" autoplay></video> 所以我试着在Phonegap中使用视频播放器插件，视频在onclick上播放，但我无法隐藏控制栏。有什么方法可以删除/隐藏视频控制栏吗？

浏览 1提问于2014-01-21得票数 1

1回答

在播放视频时隐藏控制栏

、、、

我想在android手机中播放视频，而不显示控制栏。所以我使用了Phonegap中的视频播放器插件来播放视频，视频在onclick上播放，但我无法隐藏控制栏。有什么方法可以删除/隐藏视频控制栏吗？

浏览 5提问于2014-01-24得票数 3

2回答

当宽度变窄时，VideoJS控件(CC，音频)是否应该出现在视频元素下面？

、、、、

当视频的宽度变窄时，VideoJS控制右下角(例如CC、音频等)。出现在页面中的视频元素下面。通过缩小浏览器窗口并悬停在视频上查看控件，可以在videojs.com主页上演示这一点。如果是这样的话，在CSS和/或JavaScript中是否有一种简单的方法来控制/检测/计算发生这种情况的最小宽度，这样我就可以防止视频元素的宽度变得足够小，使控件出现在视频元素下面？window.onresize = resizeVideoJS;});<script src="//vj

浏览 4提问于2015-04-24得票数 1

回答已采纳

1回答

使用video.js player时，控制栏在全屏模式下不会淡出

我用的是video.js视频播放器。进入全屏模式后，控制栏不会淡出。如何让控件在全屏模式下淡出。当未处于全绿模式时，控制栏将在几秒钟后消失。

浏览 8提问于2013-01-08得票数 0

1回答

移动项目控制栏视频bar

、

我正在使用video.js 4.12库，我希望替换控制条项。例如，将我的一个自定义按钮移动到控制栏的第二个槽。如何更改任务栏上项目的顺序？，我在谷歌上没有运气。

浏览 1提问于2015-08-18得票数 1

回答已采纳

1回答

如何在jQuery中暂时禁用video-js的控制栏？

、、

如何使用按钮禁用或隐藏video-js播放器的控制栏？有谁有建议吗？

浏览 3提问于2012-09-13得票数 1

2回答

如何在reacttjs中修复video.js包的css

、

我在react中使用video.js来构建视频播放器，但是当我使用npm pacakage安装它时，它没有提供内置的css如何添加video.js的内置css，而不是控制栏。import videojs from 'video.js'; class Video360Player e

浏览 2提问于2020-11-25得票数 2

1回答

[video.js]使用自动播放隐藏开头的控制栏

我使用的是video.js 4.0.3版。我可以在代码中进行哪些更改，以隐藏自动播放开始时的控制栏？

浏览 2提问于2013-06-06得票数 0

2回答

视频js永久移除控制棒

我正在使用video.js在一个离子应用程序中播放一个飞溅屏幕视频。是否可以将控制栏从播放器中完全移除？

浏览 5提问于2017-06-10得票数 0

回答已采纳

2回答

如何使html5播放器在没有源的情况下播放

、、、、

我正在构建一个多媒体播放器，需要控制一个页面上的多个、其他多媒体播放器。为了做到这一点，我希望在页面底部有一个区域，其中包含一个媒体播放控制器(，包括一个查找栏)，它将控制页面上的所有其他播放器。我想使用一个常规的视频/音频播放器，但我不想播放真正的内容，我想要的是有控制，特别是一个搜索栏前进。不单独实现播放控件的原因是因为我想使用video.js插件的功能(比如时间线上的事件标记)。我成功地显示了带有播放控件的video.js player

浏览 4提问于2018-07-28得票数 2

回答已采纳

1回答

在video.js中设置垂直音量控制

、

在那里，我一直在使用HTML5 video.js视频播放器组件。而且player绝对很棒，几乎满足了我所有的要求。我遇到的唯一问题是它有一个水平的音量控制栏，我想把音量控制栏垂直放置，就像它在闪回模式下设置的一样。谢谢

浏览 7提问于2014-03-11得票数 0

1回答

video.js:力控制栏淡出

唯一的问题是控制条仍然是可见的。如何强制控件条与视频播放时相似，并且用户没有移动鼠标，除非使用fadeOut 问题是，如果我使用fadeOut()，我需要再次将css的显示属性设置为可见，否则我无法再次播放视频，因为控制棒是不可见的。

浏览 4提问于2014-07-08得票数 1

回答已采纳

1回答

如何隐藏video.js播放器

、

我正在使用video.js播放器，但遇到了一些问题。谢谢。

浏览 0提问于2013-07-08得票数 1

回答已采纳

2回答

如何将自定义文本按钮添加到VideoJS Player v.7的控制栏？

、

我已经尝试过在网上找到的各种代码片段，但我不能让它们中的任何一个与当前版本的VideoJS一起工作，这是版本7。我对javascript编程非常陌生，文档中没有给出如何实现这一点的示例代码。这里有一个可用于试验自定义播放器的代码：https://codepen.io/heff/pen/EarCt这是有关向播放器添加按钮的VideoJS播放器文档的链接：https://docs.videojs.com/button 我试过在StackExchange上插入来自不同网页和5-6个不同讨论的代码，但都没有一个按钮出现在视频进度条旁边。我只是想创建一个带有“退出课程”文本的按钮，它将出现在视频进度

浏览 69提问于2019-04-24得票数 3

1回答

在IE8或IE9中未显示控制栏

、

我在video.js和video-js.css中都使用4.1.0。我可以在chrome中看到控制栏，但看不到IE8或IE9。我看到一个进度条和时间，但没有播放/暂停、音量控制或全屏图标。

浏览 3提问于2013-08-09得票数 0

1回答

Video.js:通过插件将菜单添加到控制栏

、、

我试图通过一个插件将一个菜单放到一个video.js播放器的控制栏上。这是我最终目标的。问题是，演示是在video.js本身中将一个菜单添加到控制栏中，而我想要一个插件来添加菜单。到目前为止，我已经能够创建一个插件，将一个MenuButton添加到控制栏中，但是我无法用任何菜单项填充菜单。Uncaught TypeError: Cannot read

浏览 2提问于2014-03-20得票数 2

回答已采纳

2回答