Html5 video タグ 動画のベストプラクティス

4Gの普及やWiFiの普及により、携帯電話のインターネット速度は安定して高く、動画を使ったHTML5が一般的になりつつあり、フレームアニメーションよりも動画の方が表現力が豊かになっています。

ビデオの属性

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg" /*video cover*/
  preload="auto" 
  webkit-playsinline="true" /*This property is set in ios 10 can
                     let the video play in a small window, that is, not full-screen playback */  
  playsinline="true" /*IOS WeChat browser supports in-window playback*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5" /*Enable H5 player, a feature of wechat Android version*/
  x5-video-player-fullscreen="true" /*Full screen setting.
                     set to true is to prevent landscape */
  x5-video-orientation="portraint" //player pay direction, landscape landscape, portraint vertical, default is vertical
  style="object-fit:fill">
</video>

src: 動画のアドレス

controls: この属性により、Gecko はユーザコントロールを提供し、ユーザは音量、フレームスパン、再生の一時停止/再開など、動画の再生を制御できるようになります。

poster: 属性は、動画がダウンロードされるとき、またはユーザーが再生ボタンをクリックする前に表示される画像を指定します。このプロパティが設定されていない場合、ビデオの最初のフレームが代わりに使用されます。

preload: 属性は、ページが読み込まれた後に動画が読み込まれることを指定します。

webkit-playsinlineとplaysinline。動画は、ドキュメント ストリームからではなく、ローカルに再生されます。しかし、このプロパティは特殊で、WeChat の UIwebview のような埋め込みウェブ アプリを有効にするには、allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES とする必要があります。つまり、APPが設定しなければ、ページ内でこのタグを追加しても有効にはなりません。Android版WeChatが常にフルスクリーンでビデオを再生するのはそのためで、APPはplaysinlineをサポートしていませんが、ISO版WeChatはサポートしています。
ここで、我々はあなたがフルスクリーンライブまたはフルスクリーンH5体験をしたい場合は、iosはあなたがfalseを設定するため、削除webkit - playsinlineタグを設定する必要があることを追加する必要がサポートされていませんが、Androidはデフォルトのフルスクリーンのでそれを必要としないことです。しかし、今回はフルスクリーン用の再生コントロールがあり、コントロールの設定の有無にかかわらず、フルスクリーンで再生することができます。ライブストリーミングでは再生制御が必要でも、フルスクリーンのH5では必要ないので、フルスクリーン再生の制御を外すには、以下の設定が必要です。同じレベルで再生する

x-webkit-airplay="allow" : このプロパティは、この動画が ios の AirPlay をサポートするようにする必要があります。AirPlay は、iOS デバイスの異なる場所にある動画、音楽、写真ファイルを直接再生することができます。つまり、再生するデバイスも AirPlay に対応していれば、音声や動画ファイルをワイヤレスで再生することができるのです。

x5-video-player-type。同一レイヤーの H5 プレーヤーを有効にします。これは、動画がフルスクリーンのときに div を動画レイヤーにレンダリングできる、WeChat Android 独自のプロパティです。同じレイヤのプレーヤの別名は没入型プレーとも呼ばれ、再生するとフルスクリーンのように見えますが、コントロールと WeChat のナビゲーション バーが削除され、"X" と "<" の 2 つのキーだけが残っています。現在の同じ層のプレーヤーは、Android（WeChatを含む）でのみ有効であり、当分の間、iOSをサポートしていません。同じ層のプレーヤーは、Androidにのみ開放されている理由については、それはAndroidがISOのようにローカルで再生することはできませんので、デフォルトのフルスクリーンは、それが大丈夫、フルスクリーンH5であれば、いくつかのインタフェース操作をブロックされますが、ポップアップ機能などをライブ行うには達成できない、この時間は同じ層 同じ層の再生の概念はこの問題を解決しています。しかし、テスト中に、IOSとAndroidのバージョンが異なると、動作が若干異なることが判明しました

x5-video-orientation: プレーヤーがサポートする方向を宣言し、任意でlandscape、portraintを指定します。デフォルト値は portraint で、これは一般にライブとフルスクリーン H5 の両方で使用されますが、このプロパティには H5 モードを有効にする x5-video-player-type が必要です。

x5-video-player-fullscreen:フルスクリーンの設定です。tureとfalseの2つの値があり、trueはフルスクリーン再生に対応、falseはフルスクリーン再生に非対応です。実は、IOSのWeChatブラウザはChromeのカーネルで、関連するプロパティがサポートされており、X5同一階層再生がサポートされていない理由である。AndroidのWeChatブラウザはX5カーネルで、playsinlineなどの一部のプロパティタグがサポートされていないため、常にフルスクリーンとなります。

フルスクリーン対応

アイオス
ios plus playsinline属性は、ios10以降でwebkit接頭辞のみで、システムがハングアップする前に、プレーヤーに付属する、基本的なios側に追加される2つの属性は、内部のブラウザWebviewに収束を確保することができます。まだiosの個々のバージョンがある場合は、プレーヤーをハングアップします、また、ライブラリiphone-inline-videoを参照することができます（具体的な使用方法は、ここで紹介していない、それをgithubを見て非常に簡単ですが、ちょうどjsの文を追加し、CSSはいくつかの追加）、その githubアドレス プラスplaysinline webkit - playsinlineこれら2つの属性とこのライブラリは基本的にios側の問題はないことを確認することができます（ただし、プロテストは、これらの2つの属性は、ライブラリを導入しない追加OKに思える、これまでWeChatのios側で何の問題も発生しなかった、あなたがucまたはqqブラウザとの互換性になりたい場合はこのライブラリをもたらすことが推奨されます）。

x5-video-player-type="h5"属性、ブラウザWebviewカーネルとAndroid WeChatと手Q内蔵ブラウザのTencent x5のカーネルシステムは、WeChatのビデオでこの属性を使用すると、別のパフォーマンスを持っているでしょうフルスクリーン状態を提示し、コントロールが剥奪再生するようだ、少なくともこの属性ビデオ上層を加えた後にビデオが他のDom要素が（これを処理するための非テンセントホワイトリスト機構）を表示させることができる。

<video id="video" src="xx.mp4" playsinline webkit-playsinline></video>

オートプレイ

Androidはいつも自動再生ができないので、あまり言うことはないです。それはテストの後に今サファリとWeixinのios10バージョンが自動的にビデオを再生することはできません（ちなみに、オーディオが自動的に再生することはできません）が、WeixinはWeixinJSBridgeReadyイベント、Weixinでグローバルイベントをトリガ埋め込み提供して言及する価値があるWebviewの。ビデオはまだ自動的に再生することができます、これはWeixinのios側で今する必要がありますこれはWeixinのios側でビデオの自動再生のより信頼性の高い方法でなければならない、手qや他のブラウザ以外の、それはタッチスクリーン動作から出発するユーザーを導くことをお勧めします操作は良くなります。

document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

再生コントロール

ビデオやオーディオなどのメディア要素には、play() や pause() などのメソッドがあり、また 'loadstart', 'canplay', 'canplaythrough', 'ended', 'timeupdate' ... などのイベントも存在します。
モバイルで注意すべき落とし穴は、メディア要素の「end」「timeupdate」以外のイベントイベントを安易に使わないこと、マシンによって状況が異なる場合がある、例えばiosで「canplay」「canplaythrough」を聞く場合（スムーズに再生するために十分なデータがバッファされているか）、たとえ preload="auto" でもロード時には発動しないがPCやAndroidのクロムデバッグではロード時に発動すること、です。iosは再生後のみトリガーされます。要するに、現在のビデオ規格は完璧ではありませんが、一度自分自身をテストするために最高の前に使用するために、注意を払うために多くのピットがあります。
ios側では、ネットワークが遅い場合、ビデオは最初から画面（ビデオソースデータを処理する時間）を表示するために短い黒い画面を持つことになり、この黒い画面を避けるために、あなたはビデオ（偽のビデオの最初のフレームすることができます）にdivフローティング層を追加し、聞くためにtimeupdateメソッドを使用して、ビデオ画面を再生し、画面があるときにフローティング層を削除することができます

video.addEventListener('timeupdate',function (){
    //When the video's currentTime is greater than 0.1, it means that the black screen time has passed and there is already a video screen, you can remove the floating layer (.pagestart's div element)
    if ( !video.isPlayed && this.currentTime>0.1 ){
        $('.pagestart').fadeOut(500);
        video.isPlayed = !0;
    }
})