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

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を応援してください。

以下もご興味があるかもしれません:
  • JsビデオプレーヤープラグインVideo.jsの使い方の詳しい説明
  • vue video.js で m3u8 ビデオ再生形式を解決する方法
  • Vueはビデオ再生にvideo.jsを使用します
  • vue + typescript + video.js でストリーミングビデオ監視機能を実現
  • video.js 1 ページで複数のビデオを同時に再生するためのサンプル コード
  • Vue と Video.js を組み合わせて m3u8 ビデオ ストリームを再生する方法の例
  • jsp ビデオファイルの再生方法の概要
  • jsのflvビデオプレーヤープラグインの使い方
  • シンプルな HTML5 ビデオ プレーヤーを実装する JavaScript
  • JavaScript を使用してビデオの再生を監視し、ログを印刷する

<<:  Ubuntu システムでタイムゾーンと時刻を変更する方法

>>:  MySQL マスターライブラリ binlog (master-log) とスレーブライブラリ relay-log 間のコードの詳細な説明

推薦する

Vue.jsは9グリッド画像表示モジュールを実装します

Vue.js を使用して、クリックしてズームできる 9 グリッドの画像表示モジュールを作成しました。...

CSSラベル表示モードについて1つの記事で学ぶ

タグの種類(表示モード) HTML タグは、一般的にブロック タグとインライン タグの 2 種類に分...

要素テーブルの行と列のドラッグを実装する例

要素 ui テーブルにはドラッグ アンド ドロップによる並べ替え機能が組み込まれておらず、サードパー...

Mysql はテーブル内の古いデータを定期的にクリアし、いくつかのデータを保持します (推奨)

以下の目標を達成するため: Mysql データベースは、一定の間隔 (2 時間または 1 日、カスタ...

MySql クイック挿入数千万の大規模データの例

データ分析の分野では、データベースは私たちの強力な助けとなります。クエリ時間を受け入れるだけでなく、...

MySQL のロックに関する問題

ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...

Ubuntu 20.04でAliソースを変更する方法

なお、この記事では、単に 20.04 ソースに変更する方法を説明するのではなく、20.04 に基づい...

Zabbix は MySQL インスタンス メソッドを監視します

1. 監視計画監視項目を作成する前に、何を監視するのか、どのように監視するのか、監視データをどのよう...

Sysbench の MySQL ベンチマーク プロセスの分析

序文1.ベンチマークは、テスト オブジェクトのクラスの特定のパフォーマンス指標の定量的、再現可能、比...

知らないかもしれない奇妙で興味深いDockerコマンド

はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...

MySql Group Byは複数のフィールドのグループ化を実装します

日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...

CSS3は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。

この場合、transition という単語を間違って書いたため、午後中ずっとそれに取り組みました。本...

docker createコマンドの使用方法

docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...

リンク内の href=# はどういう意味ですか?

現在のページへのリンク。 -------------------一般的な使用法は次のとおりです。 &...

複数のドメイン名に対する Nginx リバース プロキシを使用した HTTP および HTTPS サービスの実装

現在、Nginx は、Web サービスを提供するために、Windows ベースの IIS と Lin...