背景

時間が経つのは早いもので、そろそろ年末ですね。年末年始といえば、忘年会や新年会などのイベントが多いです。新型コロナはまだ続くと思いますが、感染者数は少なくなり、ようやく居酒屋で一緒に楽しめるようになりました。懇親会を盛り上げるよう、面白い余興を行いますね。その中でもビンゴゲームは定番です。ビンゴカード配り、番号抽選、当選チェック、景品渡し等、幹事さんは大変ですね。特にオンラインの場合、もっと大変です。最近Angularを勉強し始めて、何か作れるかと思って、幹事さん向けのオンラインビンゴゲーム（bingome.net）を作成しました。一般のビンゴ機能以外、受付終了/再開、参加一覧、ビンゴチェック、参加者削除、景品渡しチェック等の機能もあります。ビンゴをやる場合、オンライン、オフラインに関わらず、ぜひご活用ください。

環境

$ng --version
v16.13.0
noriharuishi@rgsis bingo % ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.2.13
Node: 16.13.0 (Unsupported)
Package Manager: npm 8.1.0
OS: darwin x64

Angular: 12.2.13
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, platform-browser-dynamic
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.13
@angular-devkit/build-angular   12.2.13
@angular-devkit/core            12.2.13
@angular-devkit/schematics      12.2.13
@schematics/angular             12.2.13
rxjs                            6.6.7
typescript                      4.3.5

課題

ホームページには説明動画（mp4）があります、ごく普通のvideoタグを使っていますが、chromeでビデオが自動再生されないです。Angularのソースコードは下記の通りです。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'sample';
}

app.component.html

<video muted autoplay playsinline loop>
  <source src="/assets/bingome.net.mp4" type="video/mp4">
</video>

対策

色々調べてみましたが、原因がわからず、最終的に下記のように修正しましたら、自動的に再生できました。

app.component.html

<video [muted]="true" autoplay playsinline loop>
  <source src="/assets/bingome.net.mp4" type="video/mp4">
</video>