wechatVideoExample
1.0.0
WeChat でビデオを再生するためのソース コードをテストする: WeChat は X5 ブラウザを使用するため、video タグを使用してビデオを再生すると、さまざまな奇妙な問題が発生します。このソースコードは、この問題を解決する過程で作成された暫定的なソースコードです。 これには、キャンバスを使用したビデオの再生、画像を使用したビデオの再生、x5 タグの使用など、さまざまなテスト ケースが含まれています。 この利用可能なソース コード ライブラリは保持でき、興味のある学生は自分でダウンロードできます。
###イントロダクションをダウンロードした後、ホスト上に新しいディレクトリを作成し、すべてのソース コードをこのディレクトリにコピーします。 WeChat ブラウザを使用して、内部の HTML ページにアクセスしてテストします。
著者 chenjsh36 Ant 金融データ エクスペリエンス テクノロジー チーム
トラフィック時代の到来とハードウェア技術の向上により、PC やモバイル端末で独自のビデオを再生することを希望する Web サイトがますます増えており、<video> の互換性が徐々に向上しているため、開発者はビデオを実装することに積極的になっています。再生シナリオ。
この記事では、主にビデオ再生の一般的なシナリオと各シナリオで発生する落とし穴をリストします。これにより、開発者がより迅速に適切な技術的ソリューションを選択し、需要の開発に遭遇する際の落とし穴を減らすことができることが期待されます。
autoPlayブール属性。指定すると、ビデオはすぐに自動的に再生を開始し、データがロードされるまで待機しません。
ビデオの自動再生は、ページが開いていてリソースが十分に読み込まれているときにビデオを自動的に再生し、ユーザーの 1 回のクリックによる操作を軽減し、動的な背景や H5 模倣ビデオ通話機能にも適用できます。ただし、さまざまな理由により、自動再生には PC とモバイル端末の両方でさまざまな程度の制限があります。
初期の頃、再生にはユーザー ジェスチャ ビデオ タグが必要でしたが、バージョン 10 からビデオ ルールが変更され、 Apple はインラインと自動再生を緩和しました(Safari ブラウザにのみ適用されます)。
<video>要素は、ソース メディアにオーディオ トラックが含まれていない場合、ユーザーのジェスチャなしでautoplayを許可されます (オーディオ ソースのないビデオ要素は自動再生を許可します)。<video muted>要素は、ユーザーのジェスチャーなしで自動再生することもできます。<video>要素がオーディオ トラックを取得するか、ユーザーのジェスチャなしでミュートが解除されると、再生は一時停止します。<video autoplay>要素は、ビューポートにスクロールされたとき、CSS を通じて表示されたとき、DOM に挿入されたときなど、画面上に表示されている場合にのみ再生を開始します (ビデオ要素は画面上に表示されている場合にのみ再生を開始します)。<video autoplay>要素は、ビューポートからスクロールアウトされるなどして表示されなくなると一時停止します。 __Early__ では再生するためにユーザーのジェスチャーも必要でしたが、 Android のChrome 53 ではその後自動再生ポリシーが緩和されました。自動再生を許可するには、ビデオの自動再生とミュート(音声がミュートされるかどうか) を同時に設定する必要があります。再生; __Android の FireFox と UC Browser__ は、いかなる状況でも自動再生をサポートします。他の Android ブラウザの状況は現時点では不明です。
初期の頃は自動再生がサポートされていましたが、最近では Safari と Chrome が次々と自動再生戦略を変更しています...
__Safari 10以降__ビデオおよび音声付きオーディオは、デフォルトで自動再生から無効になっています。詳細については、この記事を参照してください。
Chrome (古いバージョン) での自動再生:
Safari (10 以降) は自動的に再生されません:
音声がミュートされたビデオも引き続き再生できます。音声付きのビデオは、__メディア参加インデックス__に基づいて自動的に再生されます。公式の説明と関連する寸法は次のとおりです。
MEI は、現在のサイトでのユーザーのメディア参加を評価する指標であり、次の要素によって異なります。
- ユーザーがメディアを 7 秒以上視聴した
- 音声は表示され、ミュートされてはなりません
- ビデオとのインタラクション
- メディアのサイズは 200x140 以上である必要があります。
これを読んだ開発者の感想は次のとおりです。
幸いなことに、Safari と Chrome はどちらも自動再生を制限しながら、ビデオが自動的に再生できるかどうかを検出するメカニズムを提供しているため、開発者は自動再生ができないことがわかった場合に代替手段を利用できます。
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.catch(error => {
// Auto-play was prevented
// Show a UI element to let the user manually start playback
}).then(() => {
// Auto-play started
});
}
なぜなら、それは破壊的でデータを大量に消費する可能性があり、多くのユーザーがそれを好まないからです。
自動再生される H5 は WeChat でよく見られることがわかりましたが、著者が作成した autoplay と playsInline を使用したビデオ再生の例は、WeChat ではまだ自動再生できませんが、DingTalk では自動再生できます。
| システムブラウザ | 音付き | 音なしで |
|---|---|---|
| IOS ディントーク | サポート | サポート |
| iOSサファリ | 禁止する | 自動再生 |
| IOS WeChat | 禁止する | 禁止する |
情報のクエリを通じて、 IOS WebAPP の開発は IOS が提供するブラウザ カーネルに基づいているため、WebAPP の Web ビューで自動再生のパフォーマンスを変更できます。一方、WeChat は自動再生を禁止していますが、組み込みの機能を提供しています。自動再生をサポートするイベント:
WeChat でのWeixinJSBridgeReadyイベントによる自動再生:
document . addEventListener (
'WeixinJSBridgeReady' ,
function ( ) {
video . play ( ) ;
} ,
false
) ; モバイル ブラウザでは、ユーザーがクリックして再生するか、API video.play() を通じて再生をトリガーすると、ビデオは強制的に最上部の全画面で再生されます。ユーザー エクスペリエンスは向上しますが、開発者は他のニーズを満たすために全画面表示にするかどうかを制御できるようにしたい場合があります。
非全画面再生を実現したい場合は、 playsinline属性を video タグに追加するだけです。この属性は、webkit カーネルに基づくモバイル ブラウザーでは基本的に問題ありません。機能しない場合は、 webkit-playsinlineを追加するだけです。
< video
src = {videoUrl}
webkit-playsinline =" true "
playsinline =" true "
/>では、他のカーネルを搭載したブラウザにはどのように対処すればよいのでしょうか?現時点では、現在市場にどのようなブラウザが存在するかを理解する必要があります。
まず第一に、現在世界中で 4 つのブラウザ コアを知る必要があります。
で：
UC Browser、QQ Browser、Baidu Mobile Browser、360 Secure Browser、Google Chrome、Sogou Mobile Browser、Cheetah Browser、およびモバイル UC、QQ、Baidu などのモバイル ブラウザなどの一般的な国内 PC ブラウザは、基本的に Webkit に基づいて修正されたカーネルを備えています。市場のモバイル ユーザーは基本的に Webkit カーネル、または Webkit カーネルに基づいて修正されたブラウザを使用していると考えられるため、playsinline の互換性は非常に優れています。
video 要素は、開発者がビデオ再生を制御するための複数の動作イベントを提供します。互換性の高いイベントには、 onended 、 __ontimeupdate、onplay、onplayingなどが含まれます。 __一部のイベントは、ブラウザーやデバイスが異なると一貫性なく動作します。
例: iOS での「 canplay 」の監視 (スムーズな再生のために十分なデータがバッファリングされているかどうか) は、 __preload="auto" __ が役に立たない場合でもロード時にトリガーされませんが、PC 上の Chrome デバッガーでは次のようになります。ロードフェーズ中にトリガーされます。 ios はトリガーされる前に再生する必要があります。
読み込みが完了しました:
クリックして再生:
読み込みが完了しました:
クリックして再生
読み込みが完了しました:
クリックして再生:
一部のイベントは、システム、デバイス、ブラウザーが異なると表示特性に一貫性がないため、使用する場合は注意してください。
この属性にコントロールを追加すると、Gecko はユーザー コントロールを提供し、ユーザーが音量、フレーム クロス、再生の一時停止/再開などのビデオ再生を制御できるようになります。
Controls 属性は、ブラウザーがビデオの再生コントロールを提供する必要があることを指定します。そうでない場合、再生コントロールは非表示になるため、開発者は独自の再生コントロールをカスタマイズできます。再生コントロールの非表示は、PC および IOS モバイル端末では良好な互換性がありますが、Android モバイル端末ではサポートされていませんが、いくつかの方法で実現できます。
よりハックな方法は、ビデオを拡大し、コントロール バーを視野の外に移動して、隠し効果を実現することです。実際、ビデオ要素は親コンテナよりも大きくされているため、下部のコントロール バーは親コンテナの外側になり、親コンテナは次のように設定されています。 overflow: hidden、再生コントロールを非表示にするメソッドです。 欠点は、ビデオが拡大されるため、拡大するために事前に空白スペースを確保する必要があることです。
Tencent の Android チームの x5 カーネル チームは、ビデオ再生の制限を緩和しました。ビデオは、必ずしも批判の多いビデオ プレーヤーを呼び出すわけではありません。コントロール要素を非表示にするために __x5-video-player-type="h5" 属性が使用されます。同時に __ビデオは最上部に表示されなくなり、他の要素が最上部に表示されるようになります。
ビデオ再生の一般的なシナリオと一般的な落とし穴を理解した後、さまざまなシナリオに対応するソリューションを提供することで、ユーザー エクスペリエンスを向上させることができます。たとえば、モバイル端末で自動的に再生される H5 ページは、ユーザーがクリックまたはスライドするように誘導することで間接的にビデオ再生をトリガーできます。これは最も保守的なアプローチであり、バグはありません。より良い解決策は、デフォルトで自動的に再生し、再生が禁止されている状況をキャプチャし、ユーザーが操作してビデオを再生できるようにガイドすることです。
ビデオを使用する初期の頃、モバイル端末でのビデオ再生は、高パフォーマンス、高トラフィック、ユーザー エクスペリエンスへの配慮から厳しく制限されていましたが、携帯電話のパフォーマンスが向上し、トラフィック時代が到来し、シーンが強化されました。要件、制限は段階的に緩和され、PC 側も段階的に緩和されています。 「ルーズ世代」から「タイト世代」へと段階的に移行し、どちらもユーザーにより良いエクスペリエンスを提供することを目的として常に戦略を更新しており、将来的には統合され、開発者は基礎となる互換性の適応から始めることができるようになります。より高いレベルの作業を行うためのより多くのエネルギーが得られるように、それを解放します。
私たちのチームに興味がある場合は、コラムをフォローするか、github をフォローするか、履歴書を 'tao.qit####alibaba-inc.com'.replace('####', '@') に送ってください。高い理想をお持ちの方ならどなたでもご参加いただけます〜
元のアドレス: https://github.com/ProtoTeam/blog/blob/master/201806/1.md
