22

我需要在 HTML5 中隐藏视频标签的全屏按钮。有什么办法可以实现吗？

全屏按钮

谢谢。

4

5 回答 5

46

我认为您可以通过更改 的 css 来实现这一点#document fragments，这些是 DOM1 规范并受所有浏览器支持，但关于样式，我不确定。

简单webkit浏览器（windows上的chrome）具体解决方案

以下解决方案webkit具体

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-current-time-display{}
video::-webkit-media-controls-time-remaining-display {}
video::-webkit-media-controls-mute-button {}
video::-webkit-media-controls-toggle-closed-captions-button {}
video::-webkit-media-controls-volume-slider {}

这是它的小提琴。

警告：

  1. 这不适用于具有除webkitFirefox 或 Internet Explorer 之外的渲染引擎的浏览器，或具有 Blink/Presto 的过时版本的 Opera。
  2. 这可能不适用于webkitWindows 以外的操作系统中的浏览器实现，例如 macOS 上的 Safari。

更新：

在多名读者抱怨上述解决方案不适用于某些浏览器后，我正在更新答案。

照顾供应商特定的实现：

  • 上述解决方案是-webkit-特定于浏览器的，并在 Windows 上的 Chrome 中进行了测试。
  • shadow DOM 的实现尚未标准化，因此可能因浏览器供应商而异。
  • 今天几乎所有的浏览器都有很棒的开发工具，但有些功能是故意锁定的，但可以稍微费力就能打开，例如，在 Firefox 中，大多数此类配置都可以在about:config页面中访问。
  • 建议开发人员在浏览器中解锁 shadow DOM 功能。
  • 然后，他们可以检查<video>组件

如何在 Chrome 中启用 shadow DOM 选择

  • 转到 Chrome > 开发人员工具 > 设置（齿轮图标）
  • 在Elements寻找显示用户代理影子 DOM选项
  • 选中（选择）该框
  • 您将能够检查底层的影子 DOM
  • 观察他们各自的造型
  • 你会注意到它们类似于伪类选择器

一些不请自来的免费建议Hiding the full screen button of the video tag in HTML5

  • 找到解决方案就像使用伪类选择器编写 CSS 一样简单
  • 但就像其他所有 CSS 一样，它可能需要大量的反复试验
  • 你可能会经历很多挫折才能让它发挥作用
  • 但永远记住，这是值得的。

此外，正如@paulitto 建议的那样，可以在从元素中删除controls属性后实现 DOM 方法。<video>有关更多信息，请参阅本教程。

于 2014-02-10T05:42:33.553 回答
4

你只需要在你的css中写下这段代码：

video::-webkit-media-controls-fullscreen-button {
    display: none;
}

并且全屏按钮将隐藏

于 2015-12-15T14:41:01.137 回答
2

我认为如果不隐藏所有控件，您将无法做到这一点。您可以使用它的dom 方法来实现您自己的控件并将它们设计为与内置控件完全相同

或者你也可以使用外部 html5 视频插件来实现这个

于 2013-07-16T14:09:13.917 回答
1

controlsList="nofullscreen"您可以使用该属性禁用全屏按钮

支持的浏览器：Chrome、Edge、Edge Beta。它不适用于 Firefox。

参考小提琴

属性值： controlsList="nodownload nofullscreen noremoteplayback"

您必须在标签中具有controls属性才能获取.<video>controlsList

参考页

于 2021-02-16T06:16:29.940 回答
0

您可以为控件编写自定义代码

例如。要更改视频时间，请使用以下代码

document.getElementsByTagName('video')[0].currentTime=10;

下面的链接提供了使用 javascript 对视频进行手动控制的所有必要示例

HTML5 视频事件和 API

于 2019-03-07T14:00:46.370 回答