導入以前、ある問題に気づきました。学習ビデオを視聴しているとき、動きが遅すぎる、先生が黒板に書くのに時間がかかっている、といつも不満に思っていました。再生速度を適切なレベルに制御できれば、学習効率が向上するだけでなく、視聴も快適になります。そこで、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 間のコードの詳細な説明
目次序文VueUseとは使いやすいおなじみの手ぶれ補正やスロットル機能もありますグローバル状態を共有...
最近、 Ubuntu 20.04でkazamを使用して録音しているときに、問題が見つかりました。シス...
フロントエンドとバックエンドがやり取りする場合、get または delete を介してバックエンドに...
目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...
目次1. サブクエリの定義2. サブクエリの分類1. スカラーサブクエリ: 2. MySQLサブクエ...
DIVの背景は半透明ですが、DIV内の文字は半透明ではありませんコードをコピーコードは次のとおりです...
目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...
クロージャは、純粋関数型プログラミング言語の伝統的な機能の 1 つです。クロージャをコア言語構造の不...
1. 一般的に、CentOS では mariadb がデフォルトでインストールされているため、まず ...
表では、右下の境界線の色を個別に定義したり、セルの左上の境界線の色を定義したりできます。これら 2 ...
1. システム環境yum updateアップグレード後のシステムバージョンは[root@yl-web...
要素にクラスを追加/削除することは、プロジェクト開発では非常に一般的な動作です。たとえば、Web サ...
序文従来のWEBレイアウトに沿うため、すべてヘッダーとフッターモードの左・中央・右レイアウトで書かれ...
効果画像: html: <div class='site_bar'>ホー...
目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...