web-dev-qa-db-ja.com

HTML 5ビデオ「自動再生」がCHROMEで自動的に開始されない

私は次のコードを持っています：

<video controls autoplay>
  <source src="video/myVideo.mp4" type="video/mp4"> 
  <source src="video/myVideo.webm" type="video/webm">
  <source src="video/myVideo.ogv" type="video/ogg">   </video>

ビデオ：

  1. ChromeとFirefoxの両方で適切に表示されます
  2. Firefoxでは期待どおりに再生されます
  3. Chromeでは、「autostarts」ではなく表示されます。これが問題です。
  4. クリックすると（Chromeで）正常に再生されます

試した

<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>

Chromeでは何も機能しませんでした

次に、 https://en.wikipedia.org/wiki/HTML5_video で推奨されているようにコーデックを変更しようとしましたが、動作しませんでした：

<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

だから今、私は行き詰まっています。ポインターをありがとう！とても有難い。

google-chromehtml5-video
33
jon

playsinline autoplay muted loop、chromeを追加する必要があります。動画がミュートされていない場合、自動開始を許可しません。また、今のところ、すべてで機能しない理由がわからないAndroidデバイス、バージョン固有かどうかを調べようとしています。何か見つかった場合はお知らせします

Chromeの問題：いくつかの調査の結果、chromeで動作しないことがわかった

76
sebas sierra

this の記事を読んでいたところ、

重要：ビデオファイルの順序は重要です。 Chromeには現在、.webmビデオが他の何かの後に来ると自動再生しないというバグがあります。

したがって、ソースのリストで.webmを最初に配置すると、問題は解決されるようです。お役に立てば幸いです。

5
ahutch

質問された時点ではそうではなかったかもしれませんが、Chrome 66現在、自動再生はブロックされています。

http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/

5
extremeandy

Mutedを試したときにこれを試してみてください codpen でこのデモを確認してください

    <video width="320" height="240" controls autoplay muted id="videoId">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

脚本

function toggleMute() {

  var video=document.getElementById("videoId");

  if(video.muted){
    video.muted = false;
  } else {
    debugger;
    video.muted = true;
    video.play()
  }

}

$(document).ready(function(){
  setTimeout(toggleMute,3000);
})

編集された属性コンテンツ

autoplay muted playsinline

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

3
Vaibhav Kumar

この質問はここで大きく説明されています
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

TL; DR muted動画を常に自動再生できます

また、iOSで動画を自動再生する場合は、デフォルトでiOSが動画を全画面表示しようとするため、playsInline属性を追加します
https://webkit.org/blog/6784/new-video-policies-for-ios/

2
Dmitry Naumov

これを試して：

<video src="{{ asset('path/to/your_video.mp4' )}}" muted autoplay loop playsinline></video>

そして、このjsをその後に置きます：

window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});
2
Yahya

Extremeandyは、Chrome 66の時点で、自動再生ビデオが無効になっていると述べています。

これを調べたところ、ミュートされたビデオはまだ自動再生できることがわかりました。私の場合、動画には音声がありませんでしたが、動画タグにミュートを追加すると修正されました：

これが他の人にも役立つことを願っています。

1
skawars

これらは、Chrome-onloadedmetadata="this.muted = true"、playsinline、autoplay、muted、loopで自動再生するビデオを取得するために使用した属性です

例：

<video src="path/to/video.mp4" onloadedmetadata="this.muted = true" playsinline autoplay muted loop></video>
0
Darryl Mendonez