html5動画モバイル端末の詳細説明-H5 チュートリアル-php.cn

html5動画モバイル端末の詳細説明

小云云

リリース： 2018-05-24 11:16:11

オリジナル

7115 人が閲覧しました

この記事は、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>

ログイン後にコピー

WeChat

では、wx.ready()のvideo.play()をトリガーすることもできます

 dom.addEventListener(&#39;click&#39;, function () {
   video.play()
})

ログイン後にコピー

インラインプレイ

iOS Safariと一部のAndroidでwebkit-playsinline playsinline

wx.ready(function () {
  video.play()
})

ログイン後にコピー

属性を設定します一部のブラウザでビデオを再生すると、システムが自動的にビデオを引き継ぎます。h5 ページでビデオを再生する必要がある場合は、video タグに webkit-playsinline を追加する必要があります。 iOS10では追加が必要です playsinlineでは、これら2つの属性を同時に追加することをお勧めします。同時に、アプリはこのモードをサポートする必要があります

<video id="video" webkit-playsinline playsinline /></video>

ログイン後にコピー

iOSモバイルQQとWeChatは両方ともこのモードをサポートしていますが、Android WeChatはダウンしています

Android WeChat

Android 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(&#39;#video&#39;)
  var canvas = document.querySelector(&#39;#canvas&#39;)
  var wrapper = canvas.parentNode
  var width = wrapper.offsetWidth
  var height = wrapper.offsetHeight
  var ctx = c.getContext(&#39;2d&#39;)
  var time = null
  canvas.width = width
  canvas.height = height

  canvas.addEventListener(&#39;click&#39;, function () {
    video.play()
  })

  video.addEventListener(&#39;play&#39;, function () {
      time = window.setInterval(function () {
        ctx.drawImage(v, 0, 0, width, height);
      }, 20);
  }, false);

  video.addEventListener(&#39;pause&#39;, function () {
      window.clearInterval(time);
  }, false);

  video.addEventListener(&#39;ended&#39;, function () {
      window.clearInterval(time);
  }, false);
</script>

ログイン後にコピー

メディアのメソッドとプロパティ

HTMLVideoElement と HTMLAudioElement はどちらも HTMLMediaElement から継承されます

video.addEventListener(&#39;timeupdate&#39;, function(){
  if(video.currentTime > 0.1){
      posterImg.hidden();
  }
})

ログイン後にコピー