html5 videoタグにより携帯電話での動画再生の全画面表示を実現

<video preload='auto' id='my-video'  
src='cuplayer.mp4'  webkit-playsinline='true' 
playsinline='true'x-webkit-airplay='true' 
x5-video-player-type='h5' 
x5-video-player-fullscreen='true'
x5-video-ignore-metadata='true'  
width='100%' height='100%'>
<p> 不支持video</p> 
</video>
.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

 

fill: 「fill」の中国語解釈。デフォルト。置換コンテンツはコンテンツ ボックス全体を埋めるように拡大されるため、元の比率は保証されません。
含む:中国語の言い換え「含む」。元のサイズ比率を維持します。置換コンテンツのサイズがコンテナー内に収まるようにしてください。したがって、このパラメータによりコンテナ内に空白が残る場合があります。
cover: 「カバー」の中国語解釈。元のサイズ比率を維持します。置換コンテンツのサイズがコンテナのサイズより大きくなければならず、幅と高さの少なくとも 1 つがコンテナと一致していることを確認してください。したがって、このパラメータにより、置き換えられたコンテンツ (画像など) の一部が非表示になる場合があります。
none: 「何もない」の中国語の解釈。元のサイズ比率を維持します。置き換えられたコンテンツの元のサイズを維持しながら。
スケールダウン: 「下」の中国語の解釈。noneまたはcontainが順番に設定され、最終的にサイズの小さいものが提示されるようなものです


 

私の人気記事のおすすめ

私のおすすめビデオ記事

おすすめ

転載: blog.csdn.net/suny2020/article/details/120021983#comments_24339903