この記事では、HTML5 ビデオモバイル端末の落とし穴を紹介し、皆さんと共有します。詳細は次のとおりです。
<video id=video style=object-fit:fill autoplay webkit-playsinline playsinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=portraint src=video.mp4 />< /video><!-- object-fit: fill ビデオ コンテンツがビデオ コンテナ全体に表示されます。poster:img.jpg ビデオ カバーの自動再生: 自動再生自動 -ページがメタをロードするときにビデオ全体をロードします - ページが何もロードしない場合にのみメタデータをロードします - ページがロードされるときはビデオをロードしません ミュート: この属性が設定されている場合、ビデオのオーディオ出力をミュートする WebKit を指定します。 -playsinline placesinline : インライン再生 x5-video-player-type=h5 : x5 コア H5 プレーヤーを有効にします x5-video-player-fullscreen=true フルスクリーン設定。 true と false の設定により、異なるレイアウトが生成されます。x5-video-orientation=portraint: プレーヤーがサポートする方向を宣言します。オプションの値は、横向きの水平画面と縦向きの垂直画面です。 デフォルト値のポートレート。ライブ ブロードキャストであっても全画面 H5 であっても、通常は垂直方向に再生されますが、この属性では H5 モードを有効にするために x5-video-player-type が必要です -->自動再生自動再生属性を設定する
<ビデオの自動再生></video>モバイルブラウザで
ただし、多くのモバイル ブラウザでは、オーディオとビデオを自動的に再生するために、ユーザーの実際の操作 (タッチエンド、クリック、ダブルクリック、キーダウン イベントなどの標準イベント) が video.play() の呼び出しをトリガーする必要があります。
dom.addEventListener('クリック', function () { video.play()}) WeChatでVideo.play() は wx.ready() でトリガーすることもできます
wx.ready(function() { video.play()})インラインでプレイするwebkit-playsinline プロパティを設定します。
<video id=video webkit-playsinline プレイズインライン /></video>
iOS Safari および一部の Android ブラウザでビデオを再生する場合、h5 ページではビデオを再生できず、システムが自動的にビデオを引き継ぎます。
h5 ページでビデオを再生する必要がある場合は、video タグに webkit-playsinline を追加する必要があります。これら 2 つの属性を同時に追加することをお勧めします。アプリもこのモードをサポートする必要があります。
webview.allowsInlineMediaPlayback = YES;
iOS Mobile QQ と WeChat は両方ともこのモードをサポートしていますが、Android WeChat はハングアップします。
アンドロイド微信Android WeChat の内蔵ブラウザは Tencent X5 カーネルを使用しており、X5web 標準に準拠していません。そのうちの 1 つは強制フルスクリーン ビデオです。動画の再生後、QQ 独自のおすすめ動画が表示されます。
ホワイトリストがあり、ホワイトリスト内のビデオリソースはフルスクリーンにはならないとのこと。しかし、テンセントはホワイトリストに追加できなくなりました。尿が出ても解決策なし。 。 。 。 。 。
現時点では、h5 Canvas を使用してビデオを再生するという解決策があります。
キャンバスプレイビデオCanvas を使用するときに遭遇する落とし穴: ビデオには x5-video-player-type=h5 属性を追加する必要があります。そうしないと、ビデオがモバイル端末上で動かなくなり、再生できなくなります。個人的には、ビデオが乗っ取られるためだと思います。
<div class=wrapper> <video id=video style=display: none autoplay src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <スクリプト> var video = document.querySelector('#video') var Canvas = document.querySelector('#canvas') var Wrapper = Canvas.parentNode var width = Wrapper.offsetWidth var height =wrapper.offsetHeight var ctx = c.getContext('2d') var time = null Canvas.width = 幅 Canvas.height = 高さ Canvas.addEventListener('click', function () { video.play( ) }) video.addEventListener('play', function () { time = window.setInterval(function () { ctx.drawImage(v, 0, 0, 幅, 高さ); }, 20); }, false); video.addEventListener('pause', function () { window.clearInterval(time); }, false); 、関数 () { window.clearInterval(time) }、 false); </script>最後に、キャンバスはビデオの再生に使用されますが、全画面ビデオ再生後の推奨ビデオが Android WeChat でブロックされる可能性があることが判明しました。ただし、ビデオ再生時の全画面表示の問題を無効にする方法はありません。まだ邪悪なホワイトリストを取得しています。苦情を言ってください。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。
さらに厄介なのは、js 経由で全画面終了をトリガーする方法が見つからないことです。
iOSの黒い画面の問題iOS でビデオを再生すると、黒い画面が一瞬表示され、その後正常に表示されます。
解決：
ビデオの上に div を追加し、それを画像で埋めると、再生前にロードしているかのような錯覚が生まれます。次に、timeupdate イベントをリッスンし、ビデオの再生中にこの div ブロックを削除します。
video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){posterImg.hidden(); }})メディアのメソッドとプロパティHTMLVideoElement と HTMLAudioElement はどちらも HTMLMediaElement を継承します。
//メディア エラー MediaObj.error; //null: 正常な MediaObj.error.code; //1. ユーザーの終了 2. ネットワーク エラー 3. デコード エラー 4. メディアの現在の状態 MediaObj.currentSrc; //現在のリソースに戻る URLMediaObj.src = value; //現在のリソースを返すか設定します。 URLMediaObj.canPlayType(type); //特定の形式のリソースを再生できるかどうか MediaObj.networkState; //0。この要素は初期化されていません。 1. 通常ですが、ネットワークを使用していません。 2. データがダウンロードされています。 3. リソース MediaObj.load() が見つかりません。 // src MediaObj.buffered で指定されたリソースを再ロードします。バッファ領域に戻ります。TimeRangesMediaObj.preload; //none: メタデータをプリロードしません: リソース情報をプリロードします auto://ready state MediaObj.readyState; //1:HAVE_NOTHING //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; //シーク中かどうか//再生ステータス MediaObj.currentTime = value; //現在の再生位置、割り当てにより変更される可能性があります。位置 MediaObj .startTime; //通常は 0、ストリーミング メディアまたは 0 から始まらないリソースの場合、0MediaObj.duration ではありません。 //現在のリソース長ストリームは無限を返します MediaObj.paused; //一時停止するかどうか MediaObj.defaultPlaybackRate = value; ; //デフォルトの再生速度については、MediaObj.playbackRate = value を設定できます。 //現在の再生速度は、MediaObj.played を設定した直後に変更します。 // 再生された領域を返します。TimeRanges、このオブジェクトについては以下を参照してください MediaObj.seekable; // シーク可能な領域を返します TimeRangesMediaObj.ended; // MediaObj.autoPlay を終了するかどうか; .loop; //はい、ループ再生 MediaObj.play() //MediaObj.pause(); //一時停止//ビデオ コントロール MediaObj.controls;//デフォルト コントロール バーの有無 MediaObj.volume = value; //Mute//TimeRanges (領域) オブジェクト TimeRanges.length; / /Region セグメント数 TimeRanges.start(index) //インデックスセグメント領域の開始位置 TimeRanges.end(index) //インデックスセクションの終了位置 //[★★★**関連イベント**★★★]//イベント配信 varevenTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//イベント監視eventTester(loadstart) //クライアントはデータのリクエストを開始しますeventTester(progress); //クライアントはデータを要求していますeventTester(suspend); //ダウンロードを遅延しましたeventTester(abort)//クライアントはダウンロードを積極的に終了します(エラーが原因ではありません)eventTester(loadstart); progress) ; //クライアントはデータを要求していますeventTester(suspend); //ダウンロードを遅延しましたeventTester(abort); //クライアントはダウンロードを積極的に終了します(エラーのためではありません)。 //データのリクエスト中にエラーが発生しましたeventTester(stalled); //ネットワーク速度が停止しましたeventTester(play); //play() と autoplay が再生を開始すると、EventTester(pause) がトリガーされます。 ); //リソース長の取得に成功しました。eventTester(loadeddata); //データを待機しています。エラーではありません。eventTester(playing); //再生を開始します。eventTester(canplay); //再生できますが、ロード中のため一時停止する可能性があります。eventTester(canplaythrough) //再生できます。すべての曲がロードされています。eventTester(seeked); // //再生時間が変更されましたeventTester(ratechange); //再生時間が変更されましたeventTester(durationchange); //リソースの長さの変更eventTester(volumechange) //ボリュームの変更以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。