web-dev-qa-db-ja.com

Safari 11.0でミュートされた自動再生ビデオの再生が停止する

私のサイトにはこれらの動画があり、その属性は以下のとおりです。

<video width="100%" poster="poster_url.png" autoplay loop muted playsinline>
<source src="video_url.mp4" type="video/mp4">
</video>

Safari 11をインストールするまで、すべて正常に機能しました。このバージョンではポスター画像が表示され、オーディオトラックがなくてもビデオは自動再生されません。私の site を見てください。

Safariの自分のラップトップで自動再生ビデオが機能しているのを見ました 他のサイトで （ミュートされたプロパティがなくても）。

どんな助けも大歓迎です！

htmlvideosafariautoplay
9
Andrey

うん、Safariはミュートされたビデオ（音さえない）もブロックしているようです...

私は回避策を見つけましたが、それはきれいではなく、私はそれを誇りに思っていません：

var ua = navigator.userAgent.toLowerCase();
var is_safari = (ua.indexOf("safari/") > -1 && ua.indexOf("chrome") < 0);
if(is_safari) {
    var video = document.getElementById('#video-element-id');
    setTimeout(function() {
       video.play();
    }, 50);
}

タイムアウトなしでこれを試しましたが、SafariはPromise拒否をスローしてこれを拒否しています。理由がわかりません...

6
PIDZB

ウェブサイトのバックグラウンドで再生される短いmp4でもこの問題に遭遇しました。ビデオタグをcontrols="true"およびplaysinlineで修飾することにより、JSを必要とせずにiOS Safari 11で動作するソリューションを得ることができました。

例：

<video autoplay loop playsinline muted controls="true" src="~/background.mp4" type="video/mp4"></video>

注： Safariは.webmをサポートしていないので、私のようにならないでください。

2
Ben Sampica

私が見つけた最も信頼できる方法は、以下を保証することです。

  • ページ上の少なくとも1つのユーザーインタラクション（Chromeモバイル）
  • タグのミュート属性（すべて）
  • タグのplaysinline属性（safari）

これは次のようになります。

<style>
  video {
    display: none;
  }
  video.active {
    display: block;
  }
</style>
<button id="button">Show video</button>
<video id="video" muted playsinline></video>
<script>
    var button = document.getElementById('button');
    var video = document.getElementById('video');
    button.addEventListener('click', function() {
        video.className = 'active';
        video.src = url;
        video.play();
    });
</script>
1
Kim T

<source>を使用する代わりに、<video>内にsrc属性を配置します

<video src="video_url.mp4" width="100%" poster="poster_url.png" autoplay loop muted playsinline></video>

<source>を使用すると、ページの読み込み時に要素が表示されている場合にのみ機能します（safari 11.0でテスト済み）

macOSの自動再生ポリシーの変更 のリンク。

0
CharlesBoury

同様の問題に遭遇し、canplaythroughイベント（またはcanplayイベント）で解決しました。これにより、AbayobのソリューションでのsetTimeoutの必要性が解決される場合があります。

const video = document.getElementById('#video-element-id');
video.oncanplaythrough = function() {
    video.play();
}
0
Adam Kiryk