video タグを使用すると、ビデオが親の全画面を占めるとは限りません。当初予定していた 10 分のプロジェクトがビデオに詰まってしまったので、相互用に書き留めるつもりです。奨励。 。 。
コード (CSS コンテンツ):
<style> html,body{ height: 100%; width: 100%; } p{ height: 50px; margin: 20px; font-size: 1.5em; } .videoTime{ position: relative; height: 100%; width: 80%; border: 2px solid red; } .videoTime video{ position: absolute; height: 100%; width: 100%; } </style>
コード (本文コンテンツ)
<body> <p>视频</p> <div class="videoTime"> <video class="videoShowing" src="video/video.mp4" autoplay="autoplay">视频</video> </div> </body> </html>
いつものようにビデオタグを設定します: 高さ: 100%; 幅: 100%
結果は次のとおりです:
左の図: (Google Chrome) 高さは 100% に達しますが、幅は 100% に達しません。 (Firefox) 高さは 100% に達しません。
Safari) 高さは 100% に達しますが、幅は 100% に達しません。右の図: (Opera) 高さは 100% に達しませんが、幅は 100% に達します。 . js を使用して親の幅と高さを取得します。結果はビデオに割り当てられました。
2.:-webkit-full-screen{} メソッドの使用は機能しません。
3. 互換性のあるものを使用します...
。 。 。横になった後
、Xiaoguo はシンプルで簡単な方法を発見しました: css コード: (親の高さは 0; set padding-bottom;)<style> html,body{ height: 100%; width: 100%; } p{ height: 50px; margin: 20px; font-size: 1.5em; } .videoTime{ position: relative; height: 0; width: 80%; padding-bottom: 45%; //需要计算得到 border: 2px solid red; } .videoTime video{ position: absolute; height: 100%; width: 100%; top: 0; left: 0; } </style>
左の写真: (Safari) 右の写真: (Opera)
完璧な解決策~ それで、別の質問があります、padding-bottom の値はどのように取得されますか?videoH: ビデオの高さ
videoW: ビデオの幅
videoTiW: パーセンテージを使用した親の幅
padBotRes: パディングボトム値 式: padBotRes = (videoH / videoW) * videoTiW