ビデオH5 videoタグのベストプラクティス

cover_900x500
電話でのWiFi、4G速度の一般的かつ広範な使用は高速とHTML5ベースのビデオに十分な安定がますます一般的になっている持っていると、フレームアニメーション、ビデオ性能にもより豊かに比べて、ここでいくつかの慣行があります経験。

ビデオのプロパティ

<video
  id="video" 
  src="video.mp4" controls = "true" poster="images.jpg" /*视频封面*/ preload="auto" webkit-playsinline="true" /*这个属性是ios 10中设置可以 让视频在小窗内播放，也就是不是全屏播放*/ playsinline="true" /*IOS微信浏览器支持小窗内播放*/ x-webkit-airplay="allow" x5-video-player-type="h5" /*启用H5播放器,是wechat安卓版特性*/ x5-video-player-fullscreen="true" /*全屏设置， 设置为 true 是防止横屏*/ x5-video-orientation="portraint" //播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏 style="object-fit:fill"> </video>

SRC：住所ビデオ
コントロール：この属性を追加し、Geckoはボリューム、クロスフレーム、一時停止/レジューム再生を含め、ユーザーがビデオの再生を制御できるように、ユーザーコントロールを提供します。
ポスター：ビデオ属性は、ユーザーが再生ボタンをクリックする前に表示、ダウンロード、または画像を指定したときに画像が表示。プロパティではなく、ビデオの最初のフレームに設定されていない場合。
プリロード：ビデオ属性は、ページのロード後に負荷を指定します。
WebKitの-playsinlineとplaysinline：ローカル再生用ビデオ再生、文書の流れから逸脱することなく。しかし、そのような必要性などこのかなり特殊な性質は、allowsInlineMediaPlaybackののUIWebViewでAPP微信Webページを埋め込むために= YES webview.allowsInlineMediaPlayback = YES、有効にします。APPが設定されていない場合は、他の言葉では、あなたがこのタグを追加するページは、Androidの携帯電話は、APPがplaysinlineをサポートしていないため、常にフルスクリーンビデオ再生を微信が、微信のISOをサポートしている理由である、動作しませんでした。
この下では、それはフルスクリーンまたはフルスクリーンのユーザーエクスペリエンスのH5を生きることを望んでいる場合、IOSはあなたが偽のサポートを設定されていないので、アンドリュースは、デフォルトの全画面表示するので必須ではありませんが、WebKitの-playsinlineタグを削除設定する必要があり、追加する必要があります。しかし、この時間は、あなたがコントロールを設定していないかどうか、フルスクリーン再生コントロールがあります。便利な再生コントロール、フルスクリーンH5に来るかもしれ住んでいますが、必須ではありませんし、フルスクリーン再生時間制御を削除するには、以下の設定が必要になります。レイヤーと遊びます
X-のWebKit-オンエア=「許可」：この属性は、IOSのこのビデオサポートのAirPlay機能を作成する必要があります。使用AirPlayのはもちろん、あなたがAirPlayの機能を介してワイヤレスでオーディオファイルやビデオファイルを再生することができることを意味iOSデバイスのビデオ、音楽、写真ファイル、上の異なる場所から再生することができ、前提が端末機器を再生され、対応する機能をサポートしている必要があります
X5-ビデオプレーヤー型：同じ層H5プレーヤーを有効にし、つまり、時にフルスクリーンビデオ、divがユニークな属性のAndroid版です微信ビデオ層、上でレンダリングすることができます。「<」も臨場感あふれるプレイという別名層、一見フルスクリーン再生で遊んが、唯一の「X」とを残して、ナビゲーションコントロールとマイクロ文字を削除された二つのキー。現在、（マイクロチャネルを含む）のAndroid上の同じ層内の唯一のプレーヤーが発効し、それは、iOSをサポートしていません。AndroidはローカルISOの再生と同じではないためだけで、同じフロアアンドリュースオープンでプレーする理由については、デフォルトのフルスクリーン・インターフェースは、このような機能の集中砲火として、いくつかの操作がフルスクリーンH5が大丈夫であれば、ブロックされますが、それを住んでいますこれを達成することができないので、この時間は、同じ層に遊んの概念は、この問題を解決します。しかし、テストの過程でIOSとAndroid若干異なる結果とは異なるバージョンを見つけました
X5・ビデオ・オリエンテーション：宣言プレイヤーは方向、オプションの値の景観風景、portraint縦画面をサポートしています。デフォルト値のportraint。ライブまたはフルスクリーンH5には、一般的に垂直の脚本ですが、このプロパティはX5-ビデオプレーヤー型H5オープンモードを必要とするかどうか
X5-ビデオプレーヤー - フルスクリーン：フルスクリーンの設定。これは、2つのプロパティ値、トゥーレと偽、真のサポートフルスクリーン再生、偽のフルスクリーン再生をサポートしていません。実際には、IOSのマイクロチャネルのブラウザが同じ層のX5プレーヤーがサポートしていない理由は、クロムカーネル関連のプロパティがサポートされています。アンドリュースマイクロチャンネルブラウザX5カーネルは、そのようなplaysinlineラベルなどの一部のプロパティは、そう常にフルスクリーンをサポートしていません。

フルスクリーン治療

IOS
IOSプラスplaysinlineプロパティは、前ios10後だけWebKitの接頭辞で、システムはプレーヤーに付属している、と2つのプロパティは、基本的なIOSのendいるブラウザ内のWebViewを確保するために抑制することができる持ち上げます。残っている場合は、IOSの個々のバージョンも、ライブラリiphone-インラインビデオを参照することができ、プレイヤーを持ち上げます（ここでは紹介しない、言葉だけのjs、cssのプラスポイントを追加し、具体的な使用方法は非常に簡単なことのgithubのです参照）、GitHubのアドレスプラスplaysinlineのWebKit-playsinlineこれら二つの性質およびライブラリは、基本的なIOSは何ら問題は終わらない（しかし、プロのテストを保証することができ、唯一のこれら二つの属性の増加ライブラリーを導入していないにも、これまでのエンドIOSマイクロ手紙に問題がない、[OK]を見えましたあなたは互換性やQQ UCのブラウザにする場合）ライブラリを持参することをお勧めします。
アンドロイドの
X5-ビデオプレーヤー-の内蔵のカーネルでブラウザのブラウザのWebViewのタイプ=「H5」プロパティ、テンセントX5コアシステムアンドロイドマイクロ手紙と手-Qは、マイクロ手紙の中で、異なる性質のビデオ振る舞いを使用して、フルスクリーンが表示されます一見少なくとも上部ビデオプロパティを加えた後、再生コントロールの剥離状態は、他のDOM要素は、（非テンセント対策ホワイトリスト機構を処理するために）表示することができます。

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

自動再生

アンドロイドは、自動的言っても過言ではないを再生することはできません。（ちなみに、音声が自動的に再生することはできません）サファリとマイクロ手紙のios10バージョンを測定することにより、今後、自動的に動画再生をさせないことを言及する価値があるが、マイクロチャネルは、イベントWeixinJSBridgeReadyを提供し、組み込みWebViewのグローバルマイクロは、このイベントがトリガされると信じて再生すると、ビデオはまだ自動的に、これは現在、自動的にビデオIOSで再生、より信頼性の高い方法であるべきことができ、より良いユーザの行動開始の操作をガイドするマイクロ手紙を終了、またはそのような手のQ他のブラウザのように他の人が、私たちは、タッチスクリーン上で起動をお勧めします。

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

再生コントロール

ビデオやオーディオの要素などのメディアの場合は、一般的にプレーして使用される方法の数は、そこにある（）、一時停止（）;このような「loadstart」、「canplay」、などいくつかのイベントがある、「終了」「canplaythrough」、「timeupdate」は... ...というように。
モバイルエンドでは、いくつかのピットが注目されるべきである、例えば、生成するために、さまざまな状況があり、別のマシン上の「終了」、「timeupdate」外のイベントのイベントに加えて、メディア要素を使用しないでください：IOSの下で「canplay」と「canplaythroughリスニングを「（十分なデータをスムーズに再生緩衝されているかどうか）、負荷がトリガされていない、予圧= 『オート』は無用であるが、場合でも、クロムデバッガPCとAndroidの場合は、意志負荷の相それはトリガします。IOSはプレーする必要性をトリガします。とにかく、今のビデオ規格は完璧ではない、注意すべき多くのピットがあり、あなたがあなた自身の最高のプロのテストを使用する前に、それが再び
初めてのビデオのiOSエンドを再生するとき、ネットワークが遅い場合、最初からビデオ放送が画像を表示できるようにするには、あります短い黒（映像データ・ソースを処理するための時間）は、この空白を避けるために、あなたがビデオで（偽のは、ビデオの最初のフレームであってもよい）ブランケットdiv要素を追加することができ、その後、timeupdate方法をリッスンし、画面やビデオの再生がそこにあるさ時間は、その後、浮動層を除去します

video.addEventListener('timeupdate',function (){
    //当视频的currentTime大于0.1时表示黑屏时间已过，已有视频画面，可以移除浮层（.pagestart的div元素） if ( !video.isPlayed && this.currentTime>0.1 ){ $('.pagestart').fadeOut(500); video.isPlayed = !0; } })

再生コントロールを非表示にします

これは、ビデオの再生に制限のTencentのチームX5アンドロイドコアチームは、ビデオはあまりビデオプレーヤー、X5・ビデオ・プレーヤー型=「H5」を批判していること、それらを呼び出すことはできませんと言われ、このプロパティはその少しのようです経験が少ない...（ナビゲーションバーもクリーンアップされます）が、少なくとも何のプレイヤーがコントロールはありませんが、あなたは、上のdivまたは他の要素をフロートことができることを意味し、これはまだ言及する価値があります。また、言っては、プレーヤーのコントロールに隠されている価値があります。

<div class="videobox" ontouchmove="return false;"> <video id="mainvideo" src="test.mp4" x5-video-player-type="h5" playsinline webkit-playsinline></video> </div>

この例では、アンドロイドvideobox隠された、唯一の表示：なし一見、まだ動作しますが、Zインデックスを追加していない：-1、-1プレイヤーがコントロールを隠すの目的を達成するために配置することができます。

オリジナル：https://segmentfault.com/a/1190000009395289