Question

我在html页面上为某些视频使用带有自定义皮肤的video.js。除Safari Mobile iOS 7外，一切正常，因为它不会隐藏视频的默认播放按钮。我使用了所有这些css规则

.video-js video::-webkit-media-controls {
    display:none !important;
}
.video-js video::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}
.video-js video::--webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}
.video-js video::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

实际上我可以在检查员身上看到这些规则，但它们根本就不起作用。有没有办法隐藏按钮或是一个safari bug？

Answer 1

注意：此答案适用于控制面板播放按钮，而不适用于视频元素上的大播放按钮

不同iOS版本的阴影元素有不同的CSS样式。

对于iOS 7而不是

let s = CGSize(width: w, height: h) UIGraphicsBeginImageContextWithOptions(s, false, 0.0); image.draw(in: CGRect(x: 0, y: 0, width: w, height: h)) let newImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext(); let data2 = UIImageJPEGRepresentation(newImage!, 1.0)! let image3 = UIImage(data: data2)

应该是

.video-js video::--webkit-media-controls-play-button

以下是iOS 7上HTML 视频元素中所有影子子元素的列表（我已在我的设备上对其进行了检查）：

.video-js video::-webkit-media-controls-play-button：

视频:: - WebKit的媒体控制
视频:: - WebKit的媒体控制面板
视频:: - WebKit的媒体控制 - 时间轴的容器
视频:: - WebKit的媒体控制电流 - 时间 - 显示
视频:: - WebKit的媒体控制 - 剩余时间显示
视频:: - WebKit的媒体控制面板

<div>：

视频:: - WebKit的媒体控制倒带按钮
视频:: - WebKit的媒体控制播放按钮
视频:: - WebKit的媒体控制返回到实时按钮
视频:: - WebKit的媒体控制 - 寻求-后退按钮
视频:: - WebKit的媒体控制 - 寻求个前进按钮
视频:: - WebKit的媒体控制静音按钮
视频:: - WebKit的媒体控制体积滑块静音按钮
视频:: - WebKit的媒体控制全屏按钮
视频:: - WebKit的媒体控制全屏积分钟按钮
视频:: - WebKit的媒体控制全屏体积-MAX-按钮

<input type="button">：

视频:: - WebKit的媒体控制-时间轴
视频:: - WebKit的媒体控制体积滑块
视频:: - WebKit的媒体控制全屏体积滑块

隐藏Safari Mobile上的播放按钮 - iOS 7

1 个答案: