ビデオプレーヤーの自動再生の問題、ビデオのスクリーンショット

最近、自動再生する必要がある 9 マスのビデオ再生関数を作成していましたが、問題が見つかりました。一部のブラウザでは、音声付きビデオの自動再生が禁止されています。一部は自動再生できても、その後ビデオは自動的に再生されませんページが更新されます。

後で調べてみると、音声付きの動画再生は禁止されているので、動画をミュートすれば良いとのこと。

ビデオには、サイレント再生するかどうかを示す属性muted があります。muted =mutedと設定すると、自動的に再生されます。ブラウザや更新に関係なく、自動的に再生されます。

もう 1 つの方法は、js を使用して play() メソッドを監視および実行することです。

サウンドを再生したい場合は、最初にサウンドをミュートしてから、音量を 500 以降に設定します。

<video
      width="100%"
      height="100%"
      :src="video.videoUrl"
      :poster="video.liveVideoThumbnail"
      autoplay
      muted
      >

添付されたレンダリング

ここにはスタイルレイアウトの問題もあります。ビデオタグには設定できる幅と高さがあります。通常、ビデオはコンテナ内にラップされます。ビデオの幅と高さが 100% に設定されている場合、ビデオは自動的に完全な状態で表示されます。 16:9 の比率のビデオコンテンツ。

ビデオには object-fit:contain という属性もあります。デフォルトは contains です。これは、ビデオがコンテナ内でアダプティブであることを意味します。object-fit:cover を設定することもできます。完全にカバーしたい場合は、object です。 -フィット:塗りつぶし。

ビデオの幅を設定してから、ビデオの高さを適応させることができます。

動画スクリーンショット機能

const myVideo=document.getElementById("video1");
  const canvas = document.getElementById('canvas')
  // can.width = myVideo.offsetWidth
  canvas.width = Math.ceil(myVideo.offsetHeight /9) * 16   // 获取视频画面的真实宽度
  canvas.height = myVideo.offsetHeight
  
  canvas.getContext('2d').drawImage(myVideo, 0, 0, can.width, can.height)
  let img = canvas.toDataURL('image/png', 1.0)
  document.getElementById("img").src = img

ビデオプレーヤーの自動再生の問題、ビデオのスクリーンショット

おすすめ