Wordpress - 禁用和隐藏视频上的所有控件答案

【问题标题】：Wordpress - Disable and hide all controls on videoWordpress - 禁用和隐藏视频上的所有控件
【发布时间】：2017-02-16 16:15:12
【问题描述】：

如何禁用和隐藏 Wordpress 4.6.1 视频上的所有控件？

按照我在 WordPress 页面中的实际代码：

[video width="560" height="320" mp4="example.com/test.mp4" loop="true" autoplay="true" preload="auto"][/video]

【问题讨论】：

标签： javascript css wordpress

【解决方案1】：

非 CSS 方法是在您的简码输出中添加过滤器。把它放在你的functions.php 主题文件中：

add_filter( 'wp_video_shortcode', function( $output ) {
    $output = str_replace( 'controls="controls"', '', $output );
    return $output;
} );

将字符串中的controls="controls" 属性替换为空格以省略该功能。

我不认为当它们是背景视频或 2-3 秒的小循环时用户体验不好，因为 HTML5 视频正在取代 GIF，并且现在在静音时支持手机/平板电脑自动播放。

【讨论】：

【解决方案2】：

这也可能很有用，它会隐藏所有控件，直到您将视频悬停：

.mejs-controls {
  opacity: 0!important;
  transition: all 0.5s ease;
}

.mejs-container:hover .mejs-controls {
  opacity: 1!important;
}

.mejs-overlay-button{
  display: none !important;
  visibility: hidden !important;
}

【讨论】：

【解决方案3】：

您好，您需要为该视频短代码覆盖应用于 .mejs-controls div 的内联样式。你可以：

.mejs-controls {
  display: none !important;
  visibility: hidden !important;
  }

这些控件通常只在悬停时显示，除非您告诉它们不这样做。我会问你为什么要禁用这些控件，从用户那里拿走这种能力可能会导致她对这个限制感到沮丧。

我在这篇文章中找到了更多信息：https://wordpress.stackexchange.com/questions/130402/hide-default-video-shortcode-controls-on-pageload

【讨论】：