web-dev-qa-db-ja.com

Chromeビデオの自動再生

次のChrome＆Firefoxの最近のアップデートの自動再生動画はサポートされなくなりました-起動時にこれを再生するコードを追加しようとしましたが、動作しないようです？

    var vid = document.getElementById("attractor"); 

    function playVid() { 
        vid.play(); 
    }

誰かがこれの回避策を見つけましたか？

私たちは多くのタッチスクリーンインタラクティブを行っており、この方法をアトラクタビデオに依存しています。

google-chromeautoplay
4
alib0ng0

autoplayは、このように、デフォルトでmutedと指定した場合にのみ機能します。

    <video autoplay muted>
      <source src="video.mp4" type="video/mp4"></source>
   </video>

心配しないでください。ユーザーは、html5ビデオ要素の一部としてビデオのミュートを解除できます。

14
Sabba Keynejad

ビデオを自動再生し、コンソールでのjsエラーを回避する方法を見つけました。

const myVideo = document.getElementById('my-video');

// Not all browsers return promise from .play().
const playPromise = myVideo.play() || Promise.reject('');
playPromise.then(() => {
  // Video could be autoplayed, do nothing.
}).catch(err => {
  // Video couldn't be autoplayed because of autoplay policy. Mute it and play.
  myVideo.muted = true;
  myVideo.play();
});
<video id="my-video" src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_2mb.mp4">

このコードは、音声付きの自動再生を開始しようとします。それができない場合は、ビデオをミュートし、音声なしでビデオを自動再生します。私はそれが最適な方法だと思い、JSエラーを防ぎます。

4
Eugene

私自身の観察と this one などの多くの記事によれば、Chromeは、ミュートされていない限り、動画の自動再生をブロックします。サウンドが有効になっている動画は、マウスクリックやタッチタップなどのユーザー操作。JavaScriptでは開始できません。

これを行うことで、Googleは「ユーザーの期待に合わせて自動再生をより一貫性のあるものに（[]]し、[...]ユーザーがオーディオをより詳細に制御できるように」したいと考えています [1]

3
Tom Doodler
  1. このようにallow="autoplay;"をiframeに追加します<iframe allow="autoplay;" ... >
  2. Html5 videoタグを使用しているとき、自動再生するには動画をミュートにする必要があることに気付きました。音声付きの動画は再生したくありませんでした。 html5ビデオを埋め込む方法は次のとおりです https://www.w3schools.com/html/html5_video.asp 。この方法を使用する場合は、Miro Video Converterをダウンロードできます http://www.mirovideoconverter.com/ これを使用して、ビデオをエンコードします。ビデオのダウンサイジングですばらしい仕事をします！
  3. Youtubeまたはvimeoを埋め込むときは、?autoplay=1を追加し、vimeoでもautopause=0を次のようなURLに追加します：https://player.vimeo.com/video/{video_id}?autoplay=1&loop=1&autopause=0、
  4. YouTubeを使用しているにもかかわらず問題が発生する場合は、iframe API https://developers.google.com/youtube/iframe_api_reference を使用し、javascriptを使用して動画を再生します。
function onPlayerReady(event) {
   event.target.playVideo();
}
  1. Iframeおよびyoutubeビデオを使用する場合は、標準のビデオURLではなく、埋め込みURLを使用してくださいhttps://www.youtube.com/embed/{video_id}
  2. Youtubeビデオマネージャーはこちら： https://www.youtube.com/my_videos （YouTubeのビデオマネージャーは、常に変化するインターフェイスで見つけることはできません！）

推奨されるソリューション：

  1. vimeoに登録して動画をアップロード
  2. 動画の設定に移動し、[埋め込み]タブhttps://vimeo.com/manage/{video_id}/embedを見つけて、埋め込み動画を設定します
  3. iframeを埋め込む：
<iframe frameborder="0"
  height="100%"
  width="100%"
  id="background-video"
  src="https://player.vimeo.com/video/356828095?autoplay=1&loop=1&autopause=0"
  allow="autoplay; fullscreen">
</iframe>

これは自動再生とループを行います。 4. CSSを使用してビデオのサイズを設定します。 width: 100%。 5.これで、ビデオの周りに黒いフレームが不要になるので、iframeのサイズを変更して、高さを幅に比例させましょう。私の場合、ビデオは1920x1080pxです。

<script type="text/javascript">
var width = window.innerWidth;
var height = (width * 1080) / 1920

document.getElementsByTagName('iframe')[0].style.height = height + 'px';
</script>

ページの背景としてビデオがループ再生されています。次のようなマウスイベントを無効にしました（CSSスタイルで）。

#background-video {
  pointer-events: none;
}

何かを見逃した場合はお知らせください。これらの手順を更新します！

1
mate.gwozdz

私はそれを理解しました...これをアドレスバーに入力してください：

chrome://flags/#autoplay-policy

[ユーザージェスチャーは必要ありません]を選択します

...これは明らかにあなたのコンピュータでのみ機能するでしょう！

0
alib0ng0