2

我已经在我的 HTML 页面中实现了 HTML5 视频，并使用了 twitter bootstrap 2.3.2。问题是当我在 android 设备中浏览 html 页面时，显示 HTML5 视频，但未显示播放、暂停、全屏等视频控件。它可以在其他移动平台和桌面浏览器上流畅运行。我已经实现了这个例子，可以通过在任何安卓设备中浏览这个 URL 来跟踪问题：http: //jsbin.com/AVuNEDa/1/edit

谢谢，贡扬

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>
        <video src="http://video-js.zencoder.com/oceans-clip.mp4" controls width="200" height="200"></video>
    </body>
</html>

使用上述代码从 Android 4.2.2 的股票浏览器截屏：

Twitter Bootstrap 2.3.2 导致的视频控件损坏

使用上面的代码，但没有 Twitter Bootstrap 2.3.2 的 Android 4.2.2 的股票浏览器的屏幕截图：

普通视频控制

4

2 回答 2

1

如果您的网站没有任何<input type="button">元素，我相信在 Bootstrap 2.3.2 CSS 之后的某处添加它是安全的：

input[type="button"] {
    width: 48px;
}

如果您的网站仅使用<input type="submit">、<button type="button">或<button type="submit">，则上述 CSS 不会影响这三种元素中的任何一种。您可能不应该使用<input type="button">或<input type="submit">无论如何，因为正如Bootstrap 3 文档所指出的那样（这也适用于 Bootstrap 2.3.2）：

作为最佳实践，我们强烈建议<button>尽可能使用该元素以确保匹配的跨浏览器呈现。

除此之外，还有一个 Firefox 错误阻止我们设置基于line-heightof<input>的按钮，导致它们与 Firefox 上其他按钮的高度不完全匹配。

于 2014-03-06T17:34:16.563 回答
1

在引导 github 问题页面上有关于这个问题的讨论，其中包括一个可能的解决方案。建议您将以下代码添加到引导后加载的 CSS 文件中：

input[type="button"]{cursor:default;-webkit-appearance:media-play-button}
input[type="button"]{cursor:default}
input{width:auto}
input[type="button"]{width:50px}

html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}
html input[type="button"],input[type="reset"],input[type="submit"],input[type="radio"],input[type="checkbox"]{cursor:pointer}
html input,textarea,.uneditable-input{width:206px}
html input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto}
于 2014-03-04T01:05:40.203 回答