この記事は、HTML5 ビデオ モバイル端末の落とし穴を埋める簡単な議論を主に紹介します。これが非常に優れていると思いますので、共有して参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
この記事では、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 视频内容充满整个video容器 poster:"img.jpg" 视频封面 autoplay: 自动播放 auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频 muted:当设置该属性后,它规定视频的音频输出应该被静音 webkit-playsinline playsinline: 内联播放 x5-video-player-type="h5" : 启用x5内核H5播放器 x5-video-player-fullscreen="true" 全屏设置。ture和false的设置会导致布局上的不一样 x5-video-orientation="portraint" :声明播放器支持的方向,可选值landscape 横屏,portraint竖屏。 默认值portraint。无论是直播还是全屏H5一般都是竖屏播放, 但是这个属性需要x5-video-player-type开启H5模式 -->
Autoplay
モバイルブラウザで自動再生属性を設定します
。多くのモバイル ブラウザ ブラウザでは、オーディオとビデオを自動的に再生するために、ユーザーの実際の操作 (タッチエンド、クリック、ダブルクリック、キーダウン イベントなどの標準イベント) が video.play() の呼び出しをトリガーする必要があります。 <video autoplay></video>
では、wx.ready()のvideo.play()をトリガーすることもできます dom.addEventListener('click', function () {
video.play()
})
iOS Safariと一部のAndroidでwebkit-playsinline playsinlinewx.ready(function () {
video.play()
})
<video id="video" webkit-playsinline playsinline /></video>
iOSモバイルQQとWeChatは両方ともこのモードをサポートしていますが、Android WeChatはダウンしています
Android WeChatAndroid WeChatの内蔵ブラウザはTencent X5カーネルを使用しており、 X5web 標準に従っていないため、ビデオを強制的に全画面表示にすることもその 1 つです。ビデオが再生されると、QQ 独自のビデオ推奨が表示されます。ホワイトリストがあり、ホワイトリスト内のビデオ リソースは全画面表示されません。しかし、テンセントはホワイトリストに追加できなくなりました。尿が出ても解決策なし。 。 。 。 。 。
現時点では、h5 Canvas を使用してビデオを再生するという解決策があります
canvas を使用してビデオを再生することですCanvas を使用するときに遭遇する落とし穴: ビデオには x5-video-player-type="h5" 属性を追加する必要があります, そうしないと、携帯端末がフリーズして動画が再生できなくなります、個人的には動画が乗っ取られているのが原因だと思います。
webview.allowsInlineMediaPlayback = YES;
最後に、ビデオの再生にはキャンバスが使用されますが、Android WeChat は全画面ビデオの再生後に推奨ビデオをブロックできることがわかりました。しかし、ビデオ再生中の全画面表示の問題を防ぐ方法はありません。まだ邪悪なホワイトリストを取得しています。苦情を言ってください。 。 。 。 。 。 。 。 。 。 。 。 。 。 。 。
さらに厄介なのは、js 経由で全画面終了をトリガーする方法が見つからないことです。iosの黒い画面の問題
ios ビデオを再生すると、黒い画面が一瞬表示され、その後正常に表示されます。
解決策:
ビデオの上にあるpを覆い、画像を塗りつぶして、再生前にロードしているかのような錯覚を作り出します。次に、イベント timeupdate をリッスンし、ビデオ再生に画像がある場合はこの「p ブロック」を削除します<p class="wrapper">
<video id="video" style="display: none" autoplay src="video.mp4" x5-video-player-type="h5"></video>
<canvas id="canvas"></canvas>
</p>
<script>
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 = width
canvas.height = height
canvas.addEventListener('click', function () {
video.play()
})
video.addEventListener('play', function () {
time = window.setInterval(function () {
ctx.drawImage(v, 0, 0, width, height);
}, 20);
}, false);
video.addEventListener('pause', function () {
window.clearInterval(time);
}, false);
video.addEventListener('ended', function () {
window.clearInterval(time);
}, false);
</script>
HTMLVideoElement と HTMLAudioElement はどちらも HTMLMediaElement から継承されます
video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ posterImg.hidden(); } })
関連する推奨事項:
HTML5ビデオ実装ブラウザ 互換性のあるメソッド
モバイルビデオ再生の問題の概要
以上がhtml5動画モバイル端末の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。