導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに時間がかかっている、といつも不満に思っていました。再生速度を適切なレベルに制御できれば、学習効率が向上するだけでなく、視聴も快適になります。そこで、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 を変更することで変更できます。 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構造を取得する 目標を念頭に置いて、1つずつ実装していきます。具体的な実装については、元のコードを直接参照できます。ここでは、コールバック関数とマウス速度制御の原理に焦点を当てます。見ることができます JSを使用してビデオの再生速度を簡単に制御する方法についての記事はこれで終わりです。より関連性の高いjsビデオ再生速度コンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。 以下もご興味があるかもしれません:
|
<<: Ubuntu システムでタイムゾーンと時刻を変更する方法
>>: MySQL マスターライブラリ binlog (master-log) とスレーブライブラリ relay-log 間のコードの詳細な説明
Vue.js を使用して、クリックしてズームできる 9 グリッドの画像表示モジュールを作成しました。...
タグの種類(表示モード) HTML タグは、一般的にブロック タグとインライン タグの 2 種類に分...
要素 ui テーブルにはドラッグ アンド ドロップによる並べ替え機能が組み込まれておらず、サードパー...
以下の目標を達成するため: Mysql データベースは、一定の間隔 (2 時間または 1 日、カスタ...
データ分析の分野では、データベースは私たちの強力な助けとなります。クエリ時間を受け入れるだけでなく、...
ロックの分類:データ操作の粒度から:テーブルロック:操作時にテーブル全体がロックされます。行ロック:...
なお、この記事では、単に 20.04 ソースに変更する方法を説明するのではなく、20.04 に基づい...
1. 監視計画監視項目を作成する前に、何を監視するのか、どのように監視するのか、監視データをどのよう...
序文1.ベンチマークは、テスト オブジェクトのクラスの特定のパフォーマンス指標の定量的、再現可能、比...
はじめに使えるかもしれないが、あまり使われていない、シンプルで実用的なDockerコマンドをいくつか...
日常の開発タスクでは、データ テーブル内のグループ化フィールドに基づいて統計データを取得するために、...
この場合、transition という単語を間違って書いたため、午後中ずっとそれに取り組みました。本...
docker create コマンドは、イメージに基づいてコンテナを作成できます。このコマンドの効果...
現在のページへのリンク。 -------------------一般的な使用法は次のとおりです。 &...
現在、Nginx は、Web サービスを提供するために、Windows ベースの IIS と Lin...