为啥我用手机访问一个html5的视频播放器是全空白的

Posted 2023-04-03

我是html5的前端开发工程师
显示空白大部分原因是浏览器的问题吧，最好还是尝试换市面上主流的手机浏览器了，uc之流你应该知道 参考技术A 手机浏览器大多数不支持html5追问

我查了说2.2.x以上的原生浏览器都支持

追答

w3c新标准都是逐个出台的，只有2020年标准才可以真正的指定完整

手机上出现 html 视频标签的大播放按钮

【中文标题】手机上出现 html 视频标签的大播放按钮

【英文标题】：Big play buttons appears on phone for html video tag

【发布时间】：2016-07-20 13:36:16

【问题描述】：

在我的网站中添加了 html 视频标签，并根据我处理播放暂停的需要在外部放置了播放按钮。在所有设备上都可以正常工作，但除了 iphone，当我们使用 iphone safari http://www.snoozeal.com/987654321@

打开视频时，视频中心会出现一个大播放按钮

尝试了许多堆栈和其他解决方案，但没有奏效

这是我尝试过的一些 css

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

video::-webkit-media-controls-play-button 
   background: red; 

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-time-remaining-display 
video::-webkit-media-controls-mute-button 








video::-webkit-media-controls 
    display:none !important;


.overlay-video video pointer-events: none
.overlay-video video::-webkit-media-controls display: none !important


*::-webkit-media-controls-panel 
   display: none!important;
  -webkit-appearance: none;


/* Old shadow dom for play button */

*::--webkit-media-controls-play-button 
  display: none!important;
 -webkit-appearance: none;


/* New shadow dom for play button */

/* This one works */

*::-webkit-media-controls-start-playback-button 
  display: none!important;
  -webkit-appearance: none;

【问题讨论】：

看来您解决了播放按钮大小的问题。仅供参考，请查看视频默认图像的 HTML 视频海报属性 - 在我的 iPhone 中，它现在显示为一个空白框。

否，请在任何桌面上检查它是如何工作的，并在 iphone 上检查该问题。即使在 iphone 上也需要像桌面播放图标一样

我在 iPhone 上看不到 video poster - 我只看到视频所在的空白区域。所以你的白色播放按钮不会出现。它就在那里（虽然我看到它现在有一个style=display: none）。添加视频海报并取消这种风格。

【参考方案1】：

试试这个隐藏 iOS 上的播放按钮

video::-webkit-media-controlsdisplay: none !important;