私の答えには本当の新しい答えはありません-この質問を最新のものにしようとしているだけで、私がちょうどしたように人々がこれで一日を無駄にするのを避けたいと思っています。
私が知る限り（特にこの質問は非常に古いため）、ビデオがページに動的に追加されたときに機能しなかっmutedたことがわかります。そして、動作しないので、それからも動作しません。mutedmuted autoplay
何が起こるかというと、ブラウザがページの読み込みに関して特定の決定を下すということだと思います。非常に奇妙な理由で、追加されたページの後半にあるビデオは、mutedプロパティがある場合でもミュートされません。これはChromeのバグであり、Safariでは発生していないと思いますが、今のところ問題が発生しているようです。
自動再生/ミュートに関するGoogleのブログエントリはわずか1年前のものであり、次の洞察を提供します。
Chromeの自動再生ポリシーは単純です。
- ミュートされた自動再生は常に許可されます。
- 次の場合、サウンドによる自動再生が許可されます。
- ユーザーがドメインを操作しました（クリック、タップなど）。
- デスクトップで、ユーザーのメディアエンゲージメントインデックスのしきい値を超えました。これは、ユーザーが以前に音声付きのビデオを再生したことを意味します。
- モバイルでは、ユーザーは自分のホーム画面にサイトを追加しました。
- 上位のフレームは、自動再生の許可をiframeに委任して、音声付きの自動再生を許可できます。
欠けている主要なものが1つだけあります！
- 'muted' HTML属性は、ビデオが初期ロード時にHTMLに存在する場合にのみ有効になります。これは、「ミュートされた自動再生」ビデオにも適用されます。
それで、これの影響は何ですか：
- 音声のないビデオをプログラムで再生する場合は、最初にミュートする必要があります。したがって、動的ビデオをページに追加する場合
video.muted = trueは、DOMに追加した後（または再生する直前）に明示的に設定する必要があります。
- プログラムで実行しようとする場合
video.play()（たとえば、誰かがミュートされたビデオを過ぎてスクロールダウンし、それを再生したい場合）、最初にビデオをミュートする必要があります。
私はAngularでこれに遭遇し、テンプレートを使用しているという事実、またはAngularに関連するものに関連していると想定して、あまりにも多くの時間を費やしました。
StackBlitzでテストアプリを作成しました。// video.muted = true正しく機能させるには、行のコメントを解除する必要があります。
https://stackblitz.com/edit/angular-ze4t9y
実現すべき他の重要なことは次のとおりです。
- ビデオに実際に音が出ていない場合でも、ミュートする必要があります。必要に応じて、「バニー」ビデオでテストしてください。
- ブログで概説されている新しい「メディアエンゲージメント」ルールは、ページを操作することになるため、ページをテストするときに混乱する可能性があります。このエンゲージメントルールをリセットするには、ブラウザを閉じるか、シークレットモードで新しいウィンドウを開く必要があります（ブログエントリを参照）。
ユーザーが最初にページに「エンゲージ」していないときにミュートされていないビデオを再生しようとすると、ブラウザに表示されるエラーを以下に示します。ミュートされていない動画に対してこのメッセージが表示されない場合は、ページを操作したためにChromeが動画の再生を許可している可能性があります。
そして最後に、Angular（すべてが動的に追加される）を使用している場合、以下はビデオをミュートするために機能します：
@ViewChild('bunnyVideo', { read: ElementRef }) bunnyVideo: ElementRef;
次に、それを再生したいとき：
const video: HTMLVideoElement = this.bunnyVideo.nativeElement;
// explicitly mute it...
video.muted = true;
// ...before attempting to play
video.play().catch((err) => {
alert('video error ' + err);
});
