H5 ビデオ開発で遭遇する問題と解決策-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

H5 ビデオ開発で遭遇する問題と解決策

小云云

Feb 28, 2018 pm 02:18 PM

html5 解決質問

最近、私はビデオを埋め込むいくつかの活動を行い、ビデオを点在させる経験を積みました。以下に、他の人や私自身が遭遇した落とし穴と、それに対応する解決策を記録します。
1. 発生した問題と解決策
1.1. iOS Web ページでのビデオ再生はデフォルトで全画面表示になります (ビデオをクリックすると、全画面再生用のプレーヤーがポップアップ表示されます)。
全画面再生が不十分である問題を解決するには、次の属性 webkit-playsinline='true' および playsinline='true' を追加できます。上記の属性を設定しても効果がない場合は、次のプラグインを試してください。 -で。 iphone-inline-video
注: iOS で Weibo で Web ページを開いてビデオを再生すると、playsinline 属性の設定は無効になります。また、上記の個人テストも使用する必要があります。効果的です。
1.2. Android での動画再生後におすすめの動画が表示されます
モバイルブラウザーのビデオ要素は非常に特殊で、初期の頃は、iOS ブラウザでも Android ブラウザでもページの上部に配置されていました。カバー。その後、この問題は iOS では解決されましたが、Android ブラウザでは問題が残りました。 X5 は、Webkit に基づいて Tencent によって開発されたレンダリングエンジンであり、カバー問題を解決するために「同一レイヤープレーヤー」と呼ばれる特別なビデオ要素を提供します。

x5-video-player-type="h5" 可以开启同层播放器，来避免播放后显示推荐视频的问题。
x5-video-player-fullscreen="true" //视频全屏播放
x5-video-orientation="portrait"//视频竖屏模式播放

ログイン後にコピー

1.3を設定することで、ビデオ適応
現在、デザイナーは通常、iPhone5またはiPhone7の標準に従ってビデオをデザインしますが、ビデオが100%の幅と高さで再生されることがわかっています。機能しない場合は、実際の状況に基づいて行う必要があります。この状況は、object-fit 属性を設定することで解決されます。詳細については、CSS3 の object-position/object-fit プロパティについてのある程度の理解を参照してください
注: Webkit カーネルブラウザでは、デフォルトは object-fit:contain です。
1.4. JS はビデオの再生を制御します
iOS では、通常、ユーザーが積極的にクリックしない限り、ビデオとオーディオは積極的に再生されないため、ビデオの再生を制御するには、js を介してインターフェイスの対話を監視する必要があります。
ビデオの再生と一時停止には、主に play メソッドとpause メソッドの呼び出しが含まれます。ビデオの再生中にユーザーの操作が必要な場合、現在の再生時間は主に timeupdate メソッドを通じて監視されます。次のコードを見てください:

var isStop = false;
    videoElem.on('timeupdate', function () {
        var curTime = parseInt(videoElem[0].currentTime);
        if (curTime == 152) {//该时间点展示交互蒙层
            $('.js_first_stop').removeClass('hide');
        } else if (curTime > 152 && curTime == 153) {
            if (!isStop) {//解决ios暂停后再次点击播放不了问题，因为该处触发了多次，但是andriod没有该问题。
                isStop = true;
                videoElem[0].pause();
            }
        } else if (curTime == 248) {
            $('.js_second_stop').removeClass('hide');
        }
    });

ログイン後にコピー

iOS で timeupdate イベントをリッスンしてビデオを一時停止するときは、次のことを行う必要があります。グローバルな isStop 変数を導入します。そうしないと、次回再生を続けるためにクリックしたときに応答がありません (timeupdate 中に複数の一時停止がトリガーされます)。ただし、Android にはこの問題はありません。ビデオの終わりを判断するには、ビデオの終了イベント

videoElem.on('ended',function(){});

ログイン後にコピー

を監視するか、ビデオの timeupdate イベントを監視して、end 属性を決定します。それが true の場合は終了を意味し、false の場合は終了を意味します。まだ終わっていないという意味です。

videoElem.on('timeupdate',function(){
   if(videoElem[0].ended){
    //播放结束
   }
}

ログイン後にコピー

さらに、Android側では同層プレイヤーが有効になっており、WeChat側でも同層プレイヤーへの出入りの監視イベントが2つ提供されています。同じレイヤーのプレーヤーイベントに入ります（ビデオの再生を開始します）。

videoElem.on("x5videoenterfullscreen", function(){}

ログイン後にコピー

同じレイヤーのプレーヤーを終了するには、左上の戻るボタンをクリックしてください。

videoElem.on('x5videoexitfullscreen',function(){}

ログイン後にコピー

最後に注意すべきことは、Android でビデオを再生した後、同じレイヤー上のプレーヤーを積極的に終了しないことです。将来的にディスプレイインターフェイスがあれば、それがプレーヤーにも表示されることになるので、非常に奇妙に感じます。これはリンクジャンプで解決できます。
1.5、Canvas はビデオを再生します
Canvas はビデオを再生できますが、一部の Android マシンでは深刻なエイリアシングが発生し、一部の Android ブラウザでは再生時に音声のみが表示され画像が表示されません。
1.6. ビデオエンコード
mp4 形式のビデオは h.264 でエンコードする必要があります。そうしないと、一部の iOS では音声のみが表示され、画像が表示されません。
最後に、完全なビデオ構成は次のとおりです (参考のみ)

<video class="js_video" style="object-fit: cover; width: 100%; height: 100%;" preload="load" 
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
 x5-video-orientation="portrait"src="https://video.mdcdn.cn/friend2018.mp4"></video>

ログイン後にコピー