iOS 8+ 上的播放按钮未居中

Posted 2023-03-11

【中文标题】iOS 8+ 上的播放按钮未居中

【英文标题】：Play button on iOS 8+ not centering

【发布时间】：2015-03-10 14:51:31

【问题描述】：

我一直在寻找这个问题的解决方案，但直到现在我还没有找到任何解决方案。

我需要给视频一个绝对位置，它的大小会根据这个位置而改变（通过给出顶部、右侧、底部和左侧的值）。当我这样做时，运行 ios 8+ 的 iPhone 上的播放按钮停止居中。

这是正在发生的事情的打印：

Print screen from iPhone 5c

我已经能够在此处的 JSFiddle 上重现此错误：https://jsfiddle.net/hwgnzwzf/2/ - 它似乎在我设置“左”属性时开始发生。

<div class="video-holder">
    <div class="video">
        <div class="video-wrapper video-wide">
            <video controls poster="http://placehold.it/200x200">
                <source src="" type="video/mp4"/>
            </video>
        </div>
    </div>
</div>


.video
    position: absolute;
    top:0;
    left:40%;
    right:20%;
    bottom:0;

/edit：在Doml的输入之后，我尝试只设置'right'值和'max-width'，但最终结果是一样的。

【参考方案1】：

问题是，iOS 需要两个属性，要么 top / left |底部/右侧，您只需将其设置为 40% 将绝对容器“居中”的更好解决方案是将其放在屏幕的中心，然后将其放在宽度的一半处：

left:50%;
transform: translateX(-50%);

我没有 iPhone，所以请告诉我这是否适合你

edit:// 哦，如果您想“调整大小”，只需为其添加一个最大宽度并删除“正确”属性

【讨论】：

嗨，Doml。我需要将所有坐标提供给“.video” div，这样我就可以将该 div 定位在“笔记本屏幕”内，正如我试图在上面的打印中显示的那样。由于一切都是响应式的，我需要设置百分比，所以它总是完全适合里面。而且，无论如何，即使使用您的建议，播放按钮仍然放错了位置。 :-/ 非常感谢，不管怎样！ :)

这是使用您建议的解决方案的 JSFiddle 更新：jsfiddle.net/hwgnzwzf/4 - 它仍然使播放按钮覆盖在 iPhone 浏览器上定位到右侧 [i.imgur.com/750omCf.png]（打印屏幕）。

真正困难的问题 - 似乎是那里 IOS 上的常见问题。 ***.com/questions/28405684/…

【参考方案2】：

这是一个 iOS 问题，我的解决方案是删除视频控件属性，因此我们删除 iOS 样式，然后使用 css 再次添加它。

使用js我们可以再次点击添加控件并使用html5 api播放视频。

那么，解决方案可能类似于https://jsfiddle.net/99eanxjr/1/

$('video').on('click', function(e)
    var video = this;
    $(video).attr('controls', true).parent().addClass('started');
    video.play();
);

显然，您可能会记住，这是一种 hacky 解决方案，应该以您的需求为条件，例如仅在 iOS 上执行此操作，并在发布真正的修复程序后放弃此 hack。 CSS前缀也需要。 =P

我刚刚写了，需要测试！ =)

祝你好运！

【参考方案3】：

至少对我来说（在iphone6 plus上测试）问题是由

引起的

div[pseudo="-webkit-media-controls"] 
  min-width: 260px;

在 ios 创建的#document-fragment 的用户代理样式表中。我正在浏览器堆栈中进行测试，当我检查元素时，我可以看到这是原因。

我进行了一些搜索，但找不到使用 css 或 javascript 定位 #document-fragments 的方法。所以......我被困住了，但我觉得这是正确的方向。