Remove autoplay attribute from video element (#634)

chvmvd · web-flow · commit 8e81e0074d31 · 2023-12-08T10:50:15.000+09:00
diff --git a/docs/1-trial-session/02-html/index.mdx b/docs/1-trial-session/02-html/index.mdx
@@ -90,7 +90,7 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
 
 保存したら、ブラウザの更新ボタンを押して、ページを再読み込みします。
 
-<video src={reloadBrowserVideo} autoPlay muted loop controls />
+<video src={reloadBrowserVideo} muted controls />
 
 `<a href="https://www.google.com/">～</a>` は **`a` <Term>要素</Term>** です。<Term>開始タグ</Term>の中に `href="https://www.google.com/"` という部分があります。これが<Term>**属性**</Term>です。<Term>属性</Term>は、<Term>開始タグ</Term> の中に `属性名="値"` のように記述され、<Term>要素</Term>の特徴を表します。`a` <Term>要素</Term>の **`href` <Term>属性</Term>**は、ハイパーリンクのリンク先を表す<Term>属性</Term>です。
 
diff --git a/docs/1-trial-session/08-loop/index.mdx b/docs/1-trial-session/08-loop/index.mdx
@@ -19,7 +19,7 @@ document.write("終了");
 
 プログラムの実行の流れを確認してみましょう。
 
-<video src={whileLoopVideo} controls muted autoPlay loop />
+<video src={whileLoopVideo} controls muted />
 
 while 文は、次のように記述します。
 
diff --git a/docs/1-trial-session/09-functions/index.mdx b/docs/1-trial-session/09-functions/index.mdx
@@ -71,7 +71,7 @@ document.write(add(3, 4));
 次の行 `return sum;` で `add` <Term>関数</Term>は<Term>変数</Term> `sum` を<Term>評価</Term>した結果である、`7` を<Term>返し</Term>ます。
 そして<Term>式</Term> `add(3, 4)` の<Term>評価</Term>結果が `7` となります。
 
-<video src={returnValueVideo} controls autoPlay muted loop />
+<video src={returnValueVideo} controls muted />
 
 :::tip
 **return 文** が実行された時点で<Term>関数</Term>の処理が終了するため、次のように書くことで [if ~ else 文](../if-statement/#if--else) や [&& (AND) 演算子](../boolean/#論理演算子)の繰り返しを避けつつ、複数の条件のついた処理を実行することができます。
diff --git a/docs/1-trial-session/14-events/index.mdx b/docs/1-trial-session/14-events/index.mdx
@@ -46,7 +46,7 @@ greetButton.onclick = clicked;
 
 この例では、<Term>HTML 要素</Term>の `id` <Term>属性</Term>に `greet-button` が指定されている <Term>HTML 要素</Term>を表す<Term>オブジェクト</Term>の `onclick` <Term>プロパティ</Term>に対し、<Term>関数</Term> `clicked` を<Term>代入</Term>しています。これにより、ボタンがクリックされたとき、`clicked` <Term>関数</Term>が実行されるようになります。
 
-<video src={handleClickVideo} autoPlay muted loop controls />
+<video src={handleClickVideo} muted controls />
 
 :::info
 
@@ -81,7 +81,7 @@ greetButton.onclick = clicked();
 
 押すと大きく赤文字が表示される「びっくり箱」のようなボタンを作ってみましょう。
 
-<video src={projectMovieForDom} autoPlay muted loop controls />
+<video src={projectMovieForDom} muted controls />
 
 <Details summary={<summary>ヒント1：文字列の表示</summary>}>
 
diff --git a/docs/2-browser-apps/01-inspector/index.mdx b/docs/2-browser-apps/01-inspector/index.mdx
@@ -25,7 +25,7 @@ Google Chrome 以外のブラウザにも開発者ツールは搭載されてい
 
 また、表示中の HTML 要素を右クリックして `検証` メニューをクリックするか、開発者ツールの中のインスペクトボタン (<GrSelect style={{ verticalAlign: "middle" }} />) をクリックすることにより、要素を直接選択することができます。この方法を用いることで、HTML の木構造を根から辿る必要がなくなります。
 
-<video src={inspectElementsVideo} muted autoPlay loop controls />
+<video src={inspectElementsVideo} muted controls />
 
 ### 課題
 
diff --git a/docs/2-browser-apps/06-project/index.mdx b/docs/2-browser-apps/06-project/index.mdx
@@ -13,7 +13,7 @@ import todoVideo from "./todo.mp4";
 - ToDo の編集ができます。
 - 入力欄が空欄だと ToDo の追加ができなくなります。
 
-<video src={todoVideo} controls loop autoPlay muted />
+<video src={todoVideo} controls muted />
 
 ## ヒント
 
diff --git a/docs/3-web-servers/03-module/index.mdx b/docs/3-web-servers/03-module/index.mdx
@@ -193,7 +193,7 @@ Node.js における**パッケージ**とは、主に JavaScript ファイル
 
 npm を用いて開発を行うには、まず `npm init` コマンドを実行します。いくつか質問をされるので、Enter キーを押し続けて質問をスキップしましょう。完了すると、フォルダの中に `package.json` という名前のファイルが作成されます。このファイルは、npm によって管理されるフォルダに必ず 1 つ必要になるものです。
 
-<video src={npmInitVideo} controls muted autoPlay loop />
+<video src={npmInitVideo} controls muted />
 
 続いて、npm のパッケージをインストールします。`npm install` に続けて、インストールしたいパッケージの名前を入力します。
 
@@ -203,7 +203,7 @@ npm install date-fns
 
 これにより、フォルダの中に `package-lock.json` ファイルと、`node_modules` フォルダが作成され、内部にパッケージ本体がダウンロードされます。
 
-<video src={npmInstallVideo} controls muted autoPlay loop />
+<video src={npmInstallVideo} controls muted />
 
 :::tip[JSON]
 
diff --git a/docs/3-web-servers/07-database/index.mdx b/docs/3-web-servers/07-database/index.mdx
@@ -84,7 +84,7 @@ npx prisma init
 
 コマンドを実行します。パッケージを実行しても良いか尋ねられる場合は、`y` を入力して許可しましょう。
 
-<video src={prismaInitVideo} controls muted autoPlay loop />
+<video src={prismaInitVideo} controls muted />
 
 :::tip[<Term>`npx` コマンド</Term>]
 
@@ -96,7 +96,7 @@ npx prisma init
 
 続いて、ElephantSQL からデータベースへの接続情報を `.env` ファイルにコピーします。これにより、Prisma は ElephantSQL 上の PostgreSQL サーバーと接続できるようになります。
 
-<video src={copySecretValuesVideo} controls muted autoPlay loop />
+<video src={copySecretValuesVideo} controls muted />
 
 `prisma/schema.prisma` ファイルを、次のように編集し、データベースのテーブルとカラムを定義します。
 
diff --git a/docs/3-web-servers/08-cookie/index.mdx b/docs/3-web-servers/08-cookie/index.mdx
@@ -57,7 +57,7 @@ app.listen(3000);
 
 [`express.Request#cookies` プロパティ](https://expressjs.com/ja/api.html#req.cookies) には、ブラウザから送信されていた Cookie がオブジェクト形式で保存されています。ブラウザで表示させると、更新ボタンが押されるたびに数値が増えていることがわかります。
 
-<video src={cookieCounterVideo} controls muted autoPlay loop />
+<video src={cookieCounterVideo} controls muted />
 
 プログラムの流れを整理すると、次の図のようになります。
 
diff --git a/docs/3-web-servers/10-git-github/index.mdx b/docs/3-web-servers/10-git-github/index.mdx
@@ -22,7 +22,7 @@ Git では、**リポジトリ**と呼ばれる単位でソースコードを管
 
 まずは Git で管理するためのディレクトリを作成し、VS Code で開きます。左側のアクティビティバーの `Source Control` パネル内の `Initialize Repository` ボタンを押してください。これで、カレントディレクトリを Git の管理下に置く (カレントディレクトリを Git リポジトリにする) ことができます。
 
-<video src={gitInitVideo} controls autoPlay muted loop />
+<video src={gitInitVideo} controls muted />
 
 :::info[`git init` コマンド]
 
@@ -32,7 +32,7 @@ Git の操作は、コマンドからも行うことが出来ます。カレン
 git init
 ```
 
-<video src={gitInitWithCliVideo} controls autoPlay muted loop />
+<video src={gitInitWithCliVideo} controls muted />
 
 :::
 
@@ -58,7 +58,7 @@ branches  config  description  HEAD  hooks  info  objects  refs
 
 コミットを作成する前に、変更を**ステージ**する必要があります。ステージとはコミットの直前の状態で、Git に対して該当ファイルをコミットする意思があることを伝えるためのものです。`Source Control` パネル内の変更したファイルの横の `+` ボタンを押します。ファイルが `Changes` から `Staged Changes` に移ったら成功です。
 
-<video src={stageChangesVideo} loop muted autoPlay controls />
+<video src={stageChangesVideo} muted controls />
 
 :::info[`git status` コマンド]
 
@@ -85,13 +85,13 @@ $ git add -A # リポジトリ内部のすべてのファイルをステージ
 
 `git add` コマンドを使う前後で `git status` コマンドの結果が変化していることを確認しましょう。
 
-<video src={stageChangesWithCliVideo} loop muted autoPlay controls />
+<video src={stageChangesWithCliVideo} muted controls />
 
 :::
 
 ステージされた変更からコミットを作成するには、**コミットメッセージ**を入力して `Commit` ボタンを押します。コミットメッセージには、そのコミットで行われた変更を説明する簡潔なメッセージを入力してください。(日本語も使うことが出来ます。)
 
-<video src={commitChangesVideo} muted autoPlay loop controls />
+<video src={commitChangesVideo} muted controls />
 
 変更がコミットとして記録されました。
 
@@ -103,7 +103,7 @@ $ git add -A # リポジトリ内部のすべてのファイルをステージ
 git commit -m "コミットメッセージ"
 ```
 
-<video src={commitChangesWithCliVideo} muted autoPlay loop controls />
+<video src={commitChangesWithCliVideo} muted controls />
 
 :::
 
@@ -119,17 +119,17 @@ git commit -m "コミットメッセージ"
 
 先ほど作成したファイルを変更し、ステージした後、もう一度コミットを作ってみましょう。
 
-<video src={secondCommitVideo} muted autoPlay loop controls />
+<video src={secondCommitVideo} muted controls />
 
 これにより、2 つ目のコミットが作成されました。コミットの履歴を確認するために、先ほどインストールした `Git Graph` 拡張機能を起動してみましょう。<kbd>command</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (Windows) キーを押してコマンドパレットを開き、`Git Graph: View Git Graph (git log)` を選択します。
 
-<video src={showGitHistoryVideo} muted autoPlay loop controls />
+<video src={showGitHistoryVideo} muted controls />
 
 :::info[`git log` コマンド]
 
 コマンドを用いて変更を表示するには、`git log` コマンドを使用します。
 
-<video src={showGitHistoryWithCliVideo} muted autoPlay loop controls />
+<video src={showGitHistoryWithCliVideo} muted controls />
 
 :::
 
@@ -139,7 +139,7 @@ git commit -m "コミットメッセージ"
 
 下の動画の最後で実行されている `git diff @ @~` は、最新のコミットとそのひとつ前のコミットを比較するためのコマンドです。`@` が最新のコミットを、`~` が「そのひとつ前」を表します。
 
-<video src={showGitDiffWithCliVideo} muted autoPlay loop controls />
+<video src={showGitDiffWithCliVideo} muted controls />
 
 :::
 
@@ -163,7 +163,7 @@ git remote add origin git@github.com:アカウント名/リポジトリ名.git
 
 追加が完了したら、`origin` として登録したリモートリポジトリにコミットを送信します。この操作を**プッシュ**と呼びます。プッシュをするには、`Publish Branch` を押します。
 
-<video src={pushChangesVideo} muted autoPlay loop controls />
+<video src={pushChangesVideo} muted controls />
 
 :::info
 
diff --git a/docs/3-web-servers/11-team-development/index.mdx b/docs/3-web-servers/11-team-development/index.mdx
@@ -21,7 +21,7 @@ GitHub を用いると簡単に共同開発ができます。[練習用のリポ
 git clone git@github.com:ut-code/readme_practice.git
 ```
 
-<video src={cloneRepositoryVideo} muted autoPlay loop controls />
+<video src={cloneRepositoryVideo} muted controls />
 
 複数のメンバーが並行して変更を加えていくために、Git にはブランチという仕組みが備わっています。まず変更を加えたい時には、メインのブランチから自分の作業専用のブランチを作成します。
 
@@ -56,7 +56,7 @@ gitGraph
 まずは、メインのブランチから自分の作業専用のブランチを作成しましょう。
 左下の `main` というボタンをクリックして、`Create new branch from...` を選択します。次に、分岐元のブランチを選択します。今回は `main` を選択します。最後に、新しいブランチの名前を入力します。新しいブランチ名には、変更の内容を端的に表す名前をつけてください。今回は `hello-自分のアカウント名` という名前にしてみましょう。左下の表示が新しいブランチ名に変わったことを確認してください。
 
-<video src={createNewBranchVideo} muted autoPlay loop controls />
+<video src={createNewBranchVideo} muted controls />
 
 :::info[`git switch` コマンド]
 
@@ -85,15 +85,15 @@ $ git branch
 * 新しいブランチ名
 ```
 
-<video src={createNewBranchWithCliVideo} muted autoPlay loop controls />
+<video src={createNewBranchWithCliVideo} muted controls />
 
 :::
 
 この状態で、ファイルに必要な変更を行います。練習用のリポジトリに自分だけの新しいファイルを作ってみましょう。今回は、`自分のアカウント名.txt` というファイルを作ってみましょう。ファイルの中身は何でも構いません。変更ができたらその都度、変更をステージし、コミットします。必要に応じて、コミットの履歴やコミットの差分を確認してください。
 
 変更が終わったら、変更をリモートにも反映します。新しく作ったブランチをリモートリポジトリにプッシュします。
 
-<video src={pushNewBranchVideo} muted autoPlay loop controls />
+<video src={pushNewBranchVideo} muted controls />
 
 ```mermaid
 gitGraph
@@ -111,7 +111,7 @@ gitGraph
 git push origin ブランチ名
 ```
 
-<video src={pushNewBranchWithCliVideo} muted autoPlay loop controls />
+<video src={pushNewBranchWithCliVideo} muted controls />
 
 :::
 
diff --git a/docs/4-advanced/01-fetch-api/index.mdx b/docs/4-advanced/01-fetch-api/index.mdx
@@ -149,7 +149,7 @@ app.listen(3000);
 
 `Fetch API` を用いてチャットアプリを作成してみましょう。
 
-<video src={chatAppVideo} controls loop autoPlay muted />
+<video src={chatAppVideo} controls muted />
 
 ### ヒント
 
diff --git a/docs/4-advanced/03-typescript/index.mdx b/docs/4-advanced/03-typescript/index.mdx
@@ -37,7 +37,7 @@ function formatDate(date: Date) {
 - `date.` と入力されたタイミングで、使用可能なメソッドが全て表示されます
 - 誤った型の引数 (動画内では文字列) を指定すると、エラーが表示されるようになります
 
-<video src={typescriptDemoVideo} controls autoPlay muted loop />
+<video src={typescriptDemoVideo} controls muted />
 
 :::tip[静的型言語との比較]
 
diff --git a/docs/4-advanced/04-react/index.mdx b/docs/4-advanced/04-react/index.mdx
@@ -596,7 +596,7 @@ export default function App() {
 
 このプログラムを実行することで、`App` 関数は、初回読み込み時と、ボタンがクリックされたタイミングで実行されていることが分かります。
 
-<video src={componentRenderingVideo} controls autoPlay muted loop />
+<video src={componentRenderingVideo} controls muted />
 
 つまり、React は、**状態が変化するたびにコンポーネント関数を実行し、その結果得られた `JSX.Element` の変化を検知して DOM に反映させている**のです。
 
diff --git a/docs/5-team-development/01-git-workflow/index.mdx b/docs/5-team-development/01-git-workflow/index.mdx
@@ -71,15 +71,15 @@ HEAD が `master` ブランチを指している状態で、コミットを行
 
 このマージを実行すると、`bfaaf878` と `cee8a14f` の 2 つの親を持つ**マージコミット** `d021150b` が生成され、2 つのブランチ両方で行われた変更を含むコミットとなります。マージコミットのコミットメッセージは自分で指定することもできますが、Git 側で用意してくれる標準のメッセージ (この例では `Merge branch 'feature'`) をそのまま用いても良いでしょう。
 
-<video src={mergeVideo} controls muted autoPlay loop />
+<video src={mergeVideo} controls muted />
 
 :::tip[Git 標準のエディタ]
 
 コマンドラインからコミットを作成する際、`-m` オプションを指定しなかった場合、コミットメッセージを編集するためのエディタが起動します。このエディタは自分で設定することができますが、上の例では [nano](https://www.nano-editor.org/) が起動しており、この場合は <kbd>control</kbd> + <kbd>X</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>X</kbd> (Windows) で終了します。
 
 環境によっては [Vim](https://www.vim.org/) が起動する場合があります。この場合は、`:q` を入力して `Enter` を押下することにより終了できます。
 
-<video src={editCommitMessageWithVim} controls muted autoPlay loop />
+<video src={editCommitMessageWithVim} controls muted />
 
 :::
 
