2

HTML ページに HTML5 ビデオを実装し、twitter ブートストラップ 2.3.2 を使用しています。問題は、Android デバイスで HTML ページを参照すると、HTML5 ビデオは表示されますが、再生、一時停止、フルスクリーンなどのビデオ コントロールが表示されないことです。他のモバイル プラットフォームやデスクトップ ブラウザーでもスムーズに動作します。私は例を実装しました。問題は、任意の Android デバイスでこの 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 が原因でビデオ コントロールが壊れる

上記のコードを使用した Android 4.2.2 のストック ブラウザのスクリーン ショットですが、Twitter Bootstrap 2.3.2 は使用していません。

通常のビデオ コントロール

4

2 に答える 2

1

Web サイトに要素がない場合は<input type="button">、Bootstrap 2.3.2 CSS の後にこれを追加するだけで安全だと思います。

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

サイトで<input type="submit">、<button type="button">、またはのみを使用している場合<button type="submit">、上記の CSS はこれら 3 種類の要素のいずれにも影響しません。Bootstrap 3のドキュメントが指摘しているように（これはBootstrap 2.3.2にも当てはまります） 、おそらく<input type="button">または<input type="submit">とにかく使用するべきではありません：

ベスト プラクティスとして、可能な限りこの要素を使用して、クロスブラウザー レンダリングを確実に一致させることを強くお勧めします。<button>

とりわけ、 ofベースのボタンの設定を妨げるFirefox のバグがあり、Firefoxの他のボタンの高さと正確に一致しません。line-height<input>

于 2014-03-06T17:34:16.563 に答える