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 の新しいおもちゃ VueUse の具体的な使い方

目次序文VueUseとは使いやすいおなじみの手ぶれ補正やスロットル機能もありますグローバル状態を共有...

Ubuntu 20.04 では、隠し録音ノイズ低減機能が有効になります (推奨)

最近、 Ubuntu 20.04でkazamを使用して録音しているときに、問題が見つかりました。シス...

Vue で配列パラメータを渡すための get / delete メソッド

フロントエンドとバックエンドがやり取りする場合、get または delete を介してバックエンドに...

Vue3 のリアクティブ関数 toRef 関数 ref 関数の紹介

目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...

MySQL でのサブクエリの基本的な使用法

目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...

DIV 背景半透明テキスト非半透明スタイル

DIVの背景は半透明ですが、DIV内の文字は半透明ではありませんコードをコピーコードは次のとおりです...

MySQL の NULL 値に関する体験談と分析チュートリアルシリーズ

目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...

JavaScript のクロージャの問題の詳細な説明

クロージャは、純粋関数型プログラミング言語の伝統的な機能の 1 つです。クロージャをコア言語構造の不...

CentOS7.6にMYSQL8.0をインストールする詳細な手順

1. 一般的に、CentOS では mariadb がデフォルトでインストールされているため、まず ...

HTML テーブル マークアップ チュートリアル (6): 暗い境界線の色属性 BORDERCOLORDARK

表では、右下の境界線の色を個別に定義したり、セルの左上の境界線の色を定義したりできます。これら 2 ...

Centos7 MySQL データベースのインストールと設定のチュートリアル

1. システム環境yum updateアップグレード後のシステムバージョンは[root@yl-web...

Vue でクラスとスタイルを使用して v-bind バインディングを使用するいくつかの方法

要素にクラスを追加/削除することは、プロジェクト開発では非常に一般的な動作です。たとえば、Web サ...

CSS 複数 3 列適応レイアウト実装の詳細な説明

序文従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれ...

Docker を使用して MySQL および Redis サービスをデプロイする方法

目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...