web-dev-qa-db-ja.com

Chromeでミュートされた自動再生がまだ機能しない

ビデオを自動再生するためにchromeを取得するのに問題があります。ビデオをミュートに設定しましたが、SafariとFirefoxの両方で自動再生されますが、chromeでは再生されません。

            <video autoplay muted poster="path to video" id="bgvid">

        <source src="assets/uploads/hero/livePhotoNoSound.mp4" type="video/webm">

            <source src="assets/uploads/hero/livePhotoNoSound.mp4" type="video/mp4">

        </video>

ビデオで自動的に再生を開始したい。現在、ビデオはロードされていますが、まだです。私が読んだすべてのことは、それがミュートされている限りそれは再生されるはずだと言っていますが、それは私が得ている結果ではありません。

videohtml5-video
8
Ryan Swanson

@ richard-lindnerのソリューションは私にはうまくいきませんでしたが、それは私を正しい軌道に乗せました。

私の場合、muted属性は存在していましたが、Chromeはそれを無視し、javacriptで明示的に設定されていない限り、サイレントに失敗していました。

var video = document.getElementById("myVideo");
video.oncanplaythrough = function() {
    video.muted = true;
    video.play();
}

興味深いことに、javascriptを使用して自動再生を強制するが、video.muted = true行を省略すると、コンソールに自動再生ポリシーエラーが表示され、Chromeが実際に一部のmuted属性を無視していることを示唆していますこれは、Chromeの自動再生ポリシーのバグのように感じます。

このエラーは、ビデオがキャッシュされていない場合にのみ発生することに注意してください。キャッシュされている場合、自動再生は期待どおりに機能しました。

21
Jonny Green

動画タグにoncanplay="this.muted=true"を使用できます

<video  muted loop autoplay oncanplay="this.muted=true">
    <source src="your src" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
2
Richard Lindner

以下の例は、コードからの変更を最小限に抑えて、Mac（10.12.6）のchrome（バージョン62.0.3202.94）で再生されます。

<video autoplay muted poster="path to video" id="bgvid">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

SafariとFriefoxがmp4とchrome webm、およびHTML5コードではなくwebmビデオ自体に関連する問題を再生している可能性があります。

1
Mick

JavaScriptで要素を作成する場合、Chromeで正しく自動再生されるように要素を構成するために使用しているJavaScript関数は次のとおりです。

function configureVideoElementForAutoplay (videoElement) {
  videoElement.setAttribute('playsinline', '');
  videoElement.setAttribute('muted', '');
  videoElement.setAttribute('autoplay', '');
  videoElement.muted = true;
}

例：

let vid = document.createElement('video');
configureVideoElementForAutoplay(vid);

直接の「ミュート」プロパティ割り当ての必要性を指摘してくれた@JonnyGreenの功績です。

0
colin moock

主な答えは私と一緒に機能しました-しかし、誰かがそれをApple電話で動作させようとしている場合に備えて、それを動作させるには「playsinline」属性を使用する必要があります。例：

<video playsinline autoplay muted loop id="myVideo">
        <source src="xen.mp4" type="video/mp4">
    </video>
0
Daniel Takyi