BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

携帯電話におけるHTML5によるフルスクリーン動画表示方式を実現

2022-01-11 20:30:05

最近、あるプロジェクトに取り組んでいて、ある問題にぶつかりました。携帯電話にフルスクリーンのビデオ再生機能を実装したいのです。長い間テストした後、私は最終的に解決策を見つけました。

1つ目：動画をズームして操作する。

ビデオが再生されているとき、フルスクリーンは高さに基づいて、あなたがビデオのビデオタグの幅を設定した場合、100％の高さは110％であり、あなたはその上に隠されたオーバーフローであるよりも、フルスクリーンを達成することができます。

決定：携帯電話の画面サイズは固定されていない、この高さ110％を決定することは良いことではありません。

2つ目：オブジェクトフィットを使って解決する

ダイレクトコード 

<video preload='auto' id='video' src='' 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 not supported</p> </video >

コンパイル後、システム・プレーヤーを使ってフルスクリーンで動画を再生するためにポップアップすることなく、ページ内で動画が再生されます。また、z-index 属性を適切に定義することで、他の要素で動画をオーバーライドできるようになります。

css: 元の画面の縮尺を維持する 

#my-video{
    object-fit: cover;
    object-position: center center;

簡単なデモの実装です。 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no " />
<title>Video Player</title>
<style type="text/css">
*{margin:0px; padding:0px;}
.app{width: 100%; height:100%; position: absolute; top:0px; right:0px; bottom: 0px; left:0px; overflow: hidden;}
.video{width: 100%; height: 100%;}
#my-video{object-fit: cover; object-position: center center;}
</style>
</head>
<body>
<div id="app" class="app">
    <video preload='auto' id='my-video' ref="video" :src="videoUrl" @click="player" loop autoplay=" autoplay" 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 not supported</p> </video>
</div>
</body>
<script type="text/javascript" src=". /js/vue.min.js"></script>
<script type="text/javascript">
// vue parsing
var Application = new Vue({
    el: "#app",
    data: {
        videoUrl:'',
        video:null,
    },
    mounted: function(){
        this.videoUrl = "http://gamaru.wpgcms.com/media/file/movie/dkSdfdqur5uQKV5p.mp4";
        this.video = this.$refs.video;
    },
    methods: {
        player:function(){
            console.log(this.video.clientWidth);
            console.log(this.video.clientHeight);
            if(this.video.pused){
                // play
                this.video.play();
            }else{
                // pause
                this.video.pause()
            };            
        }
    }
});
</script>
</html>

説明：オブジェクトフィット

  • fill: 中国語で「埋める」という意味。デフォルトの値。元の比率を保証することなく、コンテンツボックス全体を埋めるようにコンテンツを伸縮して置き換えます。
  • 含む。意味は「含む」。元のサイズの比率を維持する。置換されたコンテンツがコンテナ内に収まることを保証する。したがって、このパラメータはコンテナ内に余白を残すことがある。
  • カバーです。中国語で「カバー」の意味。元のサイズの比率を維持する。置き換えられるコンテンツのサイズはコンテナサイズより大きくなければならず、幅と高さの少なくとも一方はコンテナと同じであることを確認する。したがって、このパラメータによって、置換コンテンツの一部（画像など）が見えなくなることがある。
  • なし。中国語で「なし」という意味。元のサイズの縮尺を維持する。また、置換されたコンテンツも元のサイズを維持する。
    • {を使用します。 スケールダウンする。縮小」という意味。noneやcontainを設定して、小さいサイズでレンダリングするようなものです

オブジェクトフィットの詳細はこちら https://www.cnblogs.com/e0yu/p/10670990.html

この記事は、携帯電話のHTML5で全画面動画表示方式を実現するために導入され、より関連するHTML5動画全画面コンテンツは、スクリプトホームの過去の記事を検索するか、次の関連記事を閲覧を続けて、私はあなたが将来的にスクリプトホームをよりサポートすることを願って！.

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します