ホームページ > 記事 > ウェブフロントエンド > HTML5に基づいて、親ブロックにビデオを追加すると全画面で再生できない問題が解決されます。

HTML5に基づいて、親ブロックにビデオを追加すると全画面で再生できない問題が解決されます。

高洛峰オリジナル: 2016-10-14 15:03:532070ブラウズ

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% に達しません。

HTML5に基づいて、親ブロックにビデオを追加すると全画面で再生できない問題が解決されます。

Safari) 高さは 100% に達しますが、幅は 100% に達しません。右の図: (Opera) 高さは 100% に達しませんが、幅は 100% に達します。 . js を使用して親の幅と高さを取得します。結果はビデオに割り当てられました。

2.:-webkit-full-screen{} メソッドの使用は機能しません。

3. 互換性のあるものを使用します...

。。。横になった後 HTML5に基づいて、親ブロックにビデオを追加すると全画面で再生できない問題が解決されます。

、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>

結果は次のとおりです:

左の写真: (Google Chrome) 右写真: (Firefox)

左の写真: (Safari) 右の写真: (Opera)

完璧な解決策~

それで、別の質問があります、padding-bottom の値はどのように取得されますか?

HTML5に基づいて、親ブロックにビデオを追加すると全画面で再生できない問題が解決されます。 videoH: ビデオの高さ