` がその下に表示されるようにしました。こうすることで、すべての情報が見えるようになり、あるボックスが他のボックスを隠してしまうことがなくなります。
@@ -299,7 +293,7 @@ button:before {
後は、表示されているアイコンを「再生」アイコンに設定するだけです。停止ボタンが押されたときに動画が一時停止していたか再生していたかに関係なく、その後再生できる状態にしたいのです。
-#### 前後をシーク
+#### 前後にシーク
巻き戻しや早送りの機能を実装する方法はたくさんあります。ここでは、比較的複雑な方法を紹介します。この方法では、異なるボタンが予期しない順番で押されても壊れることはありません。
@@ -351,12 +345,12 @@ button:before {
それでは `mediaBackward()` を実行してみましょう（`mediaForward()` の機能はまったく同じですが、逆になっています）。
- 1. これは、 `fwd` ボタンを押した後に `rwd` ボタンを押すと、早送り機能が取り消され、巻き戻し機能に置き換わるからです。もし、両方を一度に行おうとすると、プレイヤーが壊れてしまいます。
- 2. `if`ステートメントを使用して、 `active` クラスが `rwd` ボタンに設定されているかどうかを調べ、すでに押されていることを示します。 {{domxref("Element.classList", "classList")}} はすべての要素に存在する便利なプロパティで、要素に設定されているすべてのクラスのリストと、クラスを追加/削除するためのメソッドなどが含まれています。 `classList.contains()` メソッドを使用して、リストに `active` クラスが含まれているかどうかを調べています。これは論理値 `true`/`false` の結果を返します。
+ 1. 早送り機能に設定されているクラスや間隔をすべてクリアします。これは、 `fwd` ボタンを押した後に `rwd` ボタンを押すと、早送り機能が取り消され、巻き戻し機能に置き換わるからです。もし、両方を一度に行おうとすると、プレイヤーが壊れてしまいます。
+ 2. `if` 文を使用して、 `active` クラスが `rwd` ボタンに設定されているかどうかを調べ、すでに押されていることを示します。 {{domxref("Element.classList", "classList")}} はすべての要素に存在する便利なプロパティで、要素に設定されているすべてのクラスのリストと、クラスを追加/削除するためのメソッドなどが含まれています。 `classList.contains()` メソッドを使用して、リストに `active` クラスが含まれているかどうかを調べています。これは論理値 `true`/`false` の結果を返します。
3. `rwd` ボタンに `active` が設定されている場合は、 `classList.remove()` を使用してそれを削除し、最初にボタンが使用されたときに設定された間隔をクリアし（詳細は以下を参照）、 {{domxref("HTMLMediaElement.play()")}} を使用して巻き戻しを取り消し、通常の動画の再生を開始しています。
- 4. まだ設定されていない場合は、`classList.add()` を使用して `rwd` ボタンに `active` クラスを追加し、 {{domxref("HTMLMediaElement.pause()")}} を使用して動画を一時停止し、 `intervalRwd` 変数を {{domxref("setInterval()")}} 呼び出しを使用して等しい値にセットしています。 `setInterval()` が呼び出されると、アクティブなインターバルを作成します。つまり、最初の引数で指定された関数を x ミリ秒ごとに実行します（ここで x は 2 番目の引数の値）。つまり、ここでは200ミリ秒ごとに `windBackward()` 関数を実行しています。この関数は、動画を常に逆方向に巻き戻すために使用します。domxref("setInterval()")}} の実行を停止するには、 {{domxref("clearInterval", "clearInterval()")}} を呼び出す必要があります。このときクリアする間隔の識別名、この場合は変数名 `intervalRwd` （関数内で先に呼び出した `clearInterval()` を参照）を持つようにしてください。
+ 4. まだ設定されていない場合は、 `active` クラスを `rwd` ボタンに `classList.add()` を使って追加し、 {{domxref("HTMLMediaElement.pause()")}} を使用して動画を一時停止し、 `intervalRwd` 変数を {{domxref("Window.setInterval", "setInterval()")}} 呼び出しと同じ値に設定しています。 `setInterval()` が呼び出されると、アクティブなインターバルタイマーを作成します。つまり、最初の引数で指定された関数を x ミリ秒ごとに実行します（ここで x は 2 番目の引数の値）。つまり、ここでは 200 ミリ秒ごとに `windBackward()` 関数を実行しています。この関数は、動画を常に逆方向に巻き戻すために使用します。 {{domxref("Window.setInterval", "setInterval()")}} の実行を停止するには、 {{domxref("Window.clearInterval", "clearInterval()")}} を呼び出す必要があります。このときクリアする間隔の識別名、この場合は変数名 `intervalRwd` （関数内で先に呼び出した `clearInterval()` を参照）を持つようにしてください。
-3. 最後に、 `setInterval()` の呼び出しで呼び出される `windBackward()` と `windForward()` の関数を定義する必要があります。前の 2 つの関数の下に、以下を追加してください。
+3. 最後に、 `setInterval()` の呼び出しで呼び出される `windBackward()` と `windForward()` の関数を定義する必要があります。前の 2 つの関数の下に、以下のものを追加してください。
```js
function windBackward() {
@@ -380,14 +374,14 @@ button:before {
}
```
- 繰り返しますが、この関数の最初のものは、ほとんど同じように動作しますが、互いに逆に動作するので、読み終えておきます。windBackward()` では、以下のことを行っています。インターバルが有効な場合、この関数は 200 ミリ秒に一度実行されることを覚えておいてください。
+ 繰り返しますが、この関数の最初のものは、ほとんど同じように動作しますが、互いに逆に動作するので、読み終えておきます。 `windBackward()` では、以下のことを行っています。インターバルが有効な場合、この関数は 200 ミリ秒に一度実行されることに留意してください。
1. まず最初に `if` 文で、現在の時刻が 2 つ目よりも小さいかどうか、つまりあと 3 秒巻き戻せば動画の開始時刻を過ぎてしまうかどうかを調べます。これは奇妙な動作を発生させるので、この場合は `stopMedia()` を呼び出して動画の再生を停止し、巻き戻しボタンから `active` クラスを削除し、巻き戻し機能を停止するために `intervalRwd` 間隔をクリアしています。もし、この最後のステップを行わなければ、動画は永遠に巻き戻し続けることになります。
- 2. もし現在時刻が動画の開始時刻から 3 秒以内でなければ、`media.currentTime -= 3` を実行して現在時刻から 3 秒を削除しています。つまり、実質的には 200 ミリ秒に一度、動画を 3 秒ずつ巻き戻していることになります。
+ 2. もし現在時刻が動画の開始時刻から 3 秒以内でなければ、 `media.currentTime -= 3` を実行して現在時刻から 3 秒を削除しています。つまり、実質的には 200 ミリ秒に一度、動画を 3 秒ずつ巻き戻していることになります。
#### 経過時間の更新
-メディアプレイヤーの実装する最後の部分は、経過時間の表示です。そのために、 {{domxref("HTMLMediaElement/timeupdate_event", "timeupdate")}} イベントが `