JSはビデオの再生速度を制御するための簡単なサンプルコードを実装します

導入

以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに時間がかかっている、といつも不満に思っていました。再生速度を適切なレベルに制御できれば、学習効率が向上するだけでなく、視聴も快適になります。そこで、Html + CSS + JavaScript を使用して実装された次の Web ページの書き方を学びました。

ヒント：以下はこの記事の主な内容です。以下のケースを参考にしてください。

1. 完成品効果

これは完成品のスクリーンショットです。

2. 具体的な実施

1. シンプルなレイアウトを実現するHTML+CSS

コードは次のとおりです（例）：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <link rel="スタイルシート" href="style.css" rel="外部nofollow" >
    <title>ビデオの再生</title>
    
</head>
<本文>
    <div id="ラッパー">
        <ビデオ幅="765" 高さ="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" コントロールクラス="flex"></ビデオ>
        
        <div class="speed">
            <div class="speed-bar">1倍</div>
        </div>
        
    </div>
    

    <script src="./index.js"></script>
</本文>
</html>

*{
    マージン: 0;
    パディング: 0;
}
体{
    min-height: 100vh;/* vh 相対単位、ブラウザサイズに対する相対値*/
    背景: #4c4c4c url('https://unsplash.it/1500/900?image=1021');
    background-size: cover;/*コンテナをベースとして使用し、画像が歪んだりぼやけたりしてもコンテナを完全に覆います*/
    /*margin: auto;/* margin:auto と margin:0 auto ですが、親コンテナの幅と高さが不明なので適していません*/
    display: flex;/*コンテナをフレキシブルコンテナに設定する*/
    justify-content: center; /*X方向の中央に配置*/
    align-items: center; /*Y 方向の中央揃え*/ /*課外拡張: ボックスを垂直方向に中央揃えするすべての方法*/
}
#ラッパー{
    幅: 850ピクセル;
    ディスプレイ: フレックス;
}
。スピード{
    flex: 1;/*比率継承。1:1継承であるべきですが、ビデオの幅は固定されているため、速度は残りの幅を占めます*/
    マージン: 10px;
    背景色: #fff;
    境界線の半径: 50px;
    ディスプレイ: フレックス;
    overflow: hidden;/*子コンテナが制限を超えないようにし、親クラスの角丸効果を維持するために使用されます*/
    align-items: flex-start;/* */

}
.スピードバー{
    幅: 100%;
    高さ: 16.3%;
    background:linear-gradient(-170deg,#2376ae 0%,#c16ecf 100%); /*グラデーションカラースタイルを設定する*/
    display: flex; /* コンテナが次の 2 つのスタイルを設定できるようにします */
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    色: #fff;
    カーソル: ポインタ;
}

HTML のレイアウトはごく標準的です。パッケージング用の ID セレクターを設定し、video タグを通じて H5 の組み込みビデオ再生機能を使用するだけです。再生されるビデオは src を変更することで変更できます。
CSSでは、エラスティックボックスの使用に注意し、エラスティックコンテナを使用してビデオの水平方向と垂直方向の中心を設定します。

2. JS実装機能

コードは次のとおりです（例）：

//1. 操作対象となるDOM構造を取得する //2. マウスがDOM上でスライドする距離を取得する //3. DOMの高さを変更する //4. 動画の再生速度を変更する //対応するDOM構造を取得する var speed = document.querySelector('.speed') //補足: getElementsByClassNameはクラスセレクターを取得する var bar = document.querySelector('.speed-bar')
var ビデオ = document.querySelector('.flex')

speed.addEventListener('mousemove',function(e){ //簡単に言えば、現在のイベント（クリック、マウスオーバーなど）を指し示し、現在のイベントの情報を保存します。たとえば、マウスクリックイベントにはマウスの座標情報があります。
    //コンソールログ(e);
    var y = e.pageY-speed.offsetTop //右コンテナ内のマウスの距離 offsetTop は、特定の DOM 構造からブラウザの上部までの距離を取得します var percent = y / speed.offsetHeight //offsetHeight は、特定の DOM 構造自体の高さを取得します var min = 0.4 //速度制限を設定します var max = 4
    var playbackRate = percent * (max-min)+min //速度計算 var height = Math.round(percent * 100)+'%' //Math.abs() は絶対値も取得します bar.textContent = playbackRate.toFixed(2)+'×' //DOM 内のテキスト コンテンツを変更します toFixed(x) は x 桁の小数点を保持します video.playbackRate = playbackRate //ビデオの再生速度を調整します bar.style.height = height //複数のテキストの表示高さを調整します })
//注: 関数の 2 つのパラメータは、マウス クリック イベントをリッスンし、関数内で関数を定義し、コールバック関数になることです。

重要なのは、s で制御機能を実現することです。Js セクションを書くときは、Js に何をしてほしいのかを明確にする必要があります。

1. 操作対象となるDOM構造を取得する
2. マウスがDOM上でスライドした距離を取得する
3. DOMの高さを変更する
4. ビデオの再生速度を変更する

目標を念頭に置いて、1つずつ実装していきます。具体的な実装については、元のコードを直接参照できます。ここでは、コールバック関数とマウス速度制御の原理に焦点を当てます。見ることができます
speed.addEventListener("mousemove", 関数(e){)
これはコールバック関数です。mousemove が発生すると関数 (e) が実行されます。tmousemove はマウスの位置を監視するために使用されます。

JSを使用してビデオの再生速度を簡単に制御する方法についての記事はこれで終わりです。より関連性の高いjsビデオ再生速度コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: