html5 android compatibility for mobile video (remove play control, full screen)（モバイルビデオ用アンドロイド互換性）。

androidにおけるhtml5の動画再生は、フロントエンドの互換性で最も大きな打撃を受け、その体験の悪さが長い間批判されてきました。しかし、前回の紫禁城横断H5、呉越同舟入隊H5では、動画技術を使い、新しい風を吹かせているようです。

初めてやった企画が、たまたま似たような動画のフルスクリーンだったので、体験した落とし穴とその埋め方を紹介します。

• フルスクリーン処理。
• 自動再生
• 再生コントロール。
• 再生コントロールを非表示にする。

動画フルスクリーンの扱い

これは本当に難しいことではなく、単に webkit-playsinline このフルスクリーンは、携帯電話全体を占有するフルスクリーンではなく、ブラウザウィンドウ内のフルスクリーンですが、もちろんWeb側で必要なのはドキュメントのボディウィンドウ内のフルスクリーンです。

<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>

iosでは、動画を埋め込み、メディアのメタデータを読み込んだ後、フルスクリーンで表示するか、ポスターを付けて画面が見えるようにします。しかし、アンドロイドでは、ほとんどのマシンがビデオ画面を表示せず、黒を表示しても、フルスクリーン再生制御ではなく、ポスターカバーを追加しても、役に立ちません。ポスターは、アンドロイドと互換性がないので、それは絵を置くためにビデオの上にdivを追加することをお勧めします、これに対処するためのより良い方法は次のようになります：アンドロイドは、ビデオが上に何かを持つことを許可しないので、カバーを行うためにビデオの上にdivを追加し、最初にビデオを設定するために width: 1px 動画が再生されると、カバーの上のレイヤーが削除され width: 100% またはお好きな幅に設定してください。

<スパン 動画の自動再生

私のように、アンドロイドでページロード時に自動再生する方法を探している人もいると思いますが、現実は厳しく、アンドロイドは自動再生を許可していません。 video.play() というのも、これもうまくいかないんです。画面に触れてクリックやタッチのイベントが発生するなど、ユーザーによってトリガーされる必要があります。将来的にアンドロイドがこの点を改善するかどうかは分かりませんが、少なくとも現時点ではうまくいきません。より良い方法は、ユーザーをトリガー、スライド、画面に触れるように誘導し、video.play()を呼び出して自動再生のような錯覚を与えることです。

動画再生の制御

ビデオやオーディオなどのメディア要素には、play()、pause()などのメソッドがあり、また、以下のようなイベントがあります。 'loadstart', 'canplay', 'canplaythrough', 'ended', 'timeupdate' ......といった具合です。

モバイルで気をつけなければならない落とし穴があります。メディア要素の「ended」「timeupdate」以外のイベントイベントを安易に使わないでください。
iosでのリスニング 'canplay' and 'canplaythrough' (スムーズに再生するために十分なデータがバッファされているかどうか) は、たとえ preload="auto" でもロード時にはトリガーしませんが、PCのクロムデバッガとアンドロイドでは、ロード段階でトリガーします。

ビデオ規格は完璧ではなく、注意すべき点も多いので、使用する前に自分でテストするのが一番です。

もうひとつ、コントロールについてですが、androidでは動画再生時にコントロールの初期化処理があり、フルスクリーンの動画が動画でないことを偽装しようとしている場合、これを見たくないというのが本音です。

アンドロイドの再生コントロールバーを削除します。

この問題は数え切れないほどのフロントエンド開発者を悩ませてきたと思いますが、この問題の解決策を探すと、ほとんどすべての記事で「androidではプレイヤーコントロールは削除できない」と書かれています。実際、その通りだと思うのですが、H5の紫禁城越えや、H5の呉逸煥を見てみると、アンドロイドの下では、コントロールバーもないことがわかります。当初、私は最初にどのように広く普及し、私はアンドロイドの互換性の問題をテストするために初めてだった、どのように新しい彼らのコンテンツを見に行かなかったそれらのH5のビデオを見て、コントロールバーがないことがわかった。私は半日のための私の研究で失敗したとき、私は技術的なポストで見たテンセントの独自のプロジェクトは、WeChatはテンセント独自のものであり、彼らはブラウザでいくつかの設定を行った＆quot;優遇＆quotを与えるために、そのH5製品を確実にビデオのスムーズ＆quot;偽装＆quot;を。

上記の発言は実際に検証したわけではありませんが、どうやらそのようです。幸い、私が携わっている動画プロジェクトもTencentの所有なので、実際に彼らに上記の発言を確認する機会があるのですが、それでもTencentのプロジェクトだけがこのような解決策を持っており、大多数の開発者にとってあまり公平ではないように思えます。再生制御を外すための解決策を探したところ、以下は私が苦労して見つけた解決策で、とてもシンプルで高尚なものではないように見えますが、問題を解決しているので、ご紹介しておきます。

ここではandroidのみを見ています、iosは基本的に問題ないので無視します。
テスト機アンドロイドバージョン：5.1
まず、そのH5動画のアドレスを自分のページに埋め込みます。すると、確かにプレーヤーが表示されることがわかります。次のようになります。

私は、Tencentの独自のプロジェクトが行うことはできませんが、何ができますか？私は成功せずに、より多くの情報を検索した後 I found a detail, the control bar is always at the bottom, can not let the video size to enlarge more, the control bar to the top of the browser window outside, you can not see it, so I zoomed the video width and height to 120% ----- control bar magically 'disappeared' (in fact, the top of the window outside)

考え方と実装は以下の通りです。

htmlは、videoタグを外側のレイヤーで包んでいます。

 <div class="videobox">
        <video id="mainvideo" webkit-playsinline="true" src="http://7xvl2z.com1.z0.glb.clouddn.com/nigg2.mp4" ;></video>
    </div>

初期のスタイルシートは以下のようなものである。

html,body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  -webkit-user-select: none; 
  user-select: none;
  overflow: hidden;
}

.videobox {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

video {width: 1px;display: blcok;}

/*
Note: html, overflow: hidden in body, very important, can not be omitted.
Because the player of microsoft android is out of DOM structure, also will not respond to events such as click, touch, etc..
If the video size is large, it will generate scrollbars, you must add overflow:hidden in html and body.
It's useless to add in videobox.
*/

ビデオを再生するときの幅を変更します（高さは等尺性でスケーリングされます。）

  var video = document.querySelector('#mainvideo');
  var videobox = document.querySelector('.videobox');

  //change the width of the outer wrap when playing, so that the video width increases
  //the corresponding height also increased, the player control is squeezed down, with overflow: hidden
  //the control can't be seen or touched anymore
  var setVideoStyle = function (){
    videobox.style.width = '120%';
    videobox.style.left = '-10%';
    video.style.width = '100%';
  }

もちろん、上記はいくつかの要件ロジックで書かれていますが、単にテーブルをwidth:120%、またはそれ以上のサイズでスタイルすることもできます。これは、ニーズに応じて、あなた次第です。

But the basic idea is to 'remove' and 'disappear' the player control from the viewport

対応する問題に対する解決策をいくつか紹介します。

1, 動画を拡大すると、画面の一部が切れてしまう場合は？

これは、ビデオ出力の側面と底面にいくつかの白いスペースを残すことができます、つまり、白いスペースは、画面の黒い底を使用することはできませんが、また、ビデオサイズの一部は、ビデオを置くズームイン、メイン画像はフルウィンドウになりますが、白いスペースの外側に絞られましたすることができます。

2、再生コントロールボタンは自動的にビデオが再生された後、真ん中に表示されます

どうしても再生終了時にボタンを表示させたくない、ほんの一瞬でもいいから動画を削除してほしい、という場合は timeupdate を使って、動画の再生を聴くことができます。 video.duration-video.currentTime を使用して、終了間際かどうかを判断し、終了の数秒前に削除します。

3、フルスクリーンの動画でない場合はどうする？

はい、アイデアは同じです、ビデオ コントロールを外側のラッパー レイヤーの外に、overflow: hidden を使用して、トップします。

そうか、やっとフルスクリーン・ビデオ・アーティファクトのことができるようになったんだ。

2017-03-21 パッチ
時代の変化、機器や技術の更新に伴い、仲間を傷つけないという精神で、責任あるアップデートがやはり必要です
まずは上記4点から、iOsとAndroidsについて

• フルスクリーンの取り扱い。
• 自動再生
• 再生コントロール。
• 再生コントロールを非表示にする。

補足-全画面処理

ios plus playsinlineプロパティは、ios10以降のwebkit接頭辞のみで、システムがプレーヤーに付属してハングアップする前に、2つのプロパティが基本的なios側に追加され、内部のブラウザWebviewに収束を確保することができます。まだiosの個々のバージョンがある場合は、プレーヤーをハングアップします、あなたはまた、ライブラリiphone -インラインビデオ（具体的な使用方法は、それがgithub、ここで紹介されていない、ちょうどjs文を追加し、CSSは一部を追加して参照することは非常に簡単です）、その。
githubアドレスは https://github.com/fregante/iphone-inline-video この2つの属性とライブラリで基本的にios側で問題がないことを確認できます（ただし、個人的にはライブラリを導入せずにこの2つの属性だけを追加しても大丈夫そうです、今のところios側のWeChatに問題はありません、ucやqqブラウザに対応させたい場合はこのライブラリを持ってくることが推奨されます）。
最後に、新しいx5 -ビデオプレーヤータイプ="h5"属性を導入し、ブラウザのウェブビューカーネルとアンドロイドWeChatと手のQ組み込みブラウザのTencent x5のカーネルシステムは、WeChatビデオでこの属性を使用する別のパフォーマンスを持って、フルスクリーン状態を提示します、少なくともこれを加えた後、剥奪制御を再生するようだ 少なくとも、他のドム要素は（非テンセントホワイトリスト機構）ビデオの上に表示できますこの属性で、この属性。

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

補足 - 自動再生

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

// You can also play this event once after it fires and then pause it (so that the video will be in a loading state later, preparing for smooth playback later)
document.addEventListener("WeixinJSBridgeReady", function (){ 
    video.play();
    video.pause();
}, false)

補足 - 再生コントロール

制御については、ここで少し追加するだけで、ネットワークが遅い場合、ビデオ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;
    }
})

追加 - 再生コントロールの非表示

それは、Tencentのアンドロイドチームのx5カーネルチームは、ビデオ再生の制限を解放したと言われている、ビデオは必ずしも彼らの多くの批判されたビデオプレーヤー、x5-video-player-type="h5"この属性がその意味のビットと思われる、経験はまだ少しですが...。(ナビゲーションバーもきれいになります）しかし、少なくともプレーヤーコントロールがなくなり、上のレイヤーがdivや他の要素をフロートできるようになったことは、まだ特筆に値すると思います。
もう一つ特筆すべきは、プレーヤーコントロールを非表示にした状態では

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

例えば、このビデオボックスがアンドロイドの下で隠されている場合、単に display:none だけではうまくいかないようですが、z-index:-1 を追加して設定すれば、プレーヤーコントロールを隠すという目的を達成することができます。これはテストしてうまくいったので、試してみてください。

html5携帯動画のアンドロイド対応（プレイヤーコントロールの削除、フルスクリーン）についての記事は以上です、もっと関連するhtml5アンドロイド対応動画コンテンツはスクリプトハウスの過去記事を検索するか、次の関連記事を引き続きご覧ください、今後ともスクリプトハウスをよろしくお願いします