DPlayer.jsビデオプレーヤープラグインは使いやすい 主な用途: ビデオの再生、監視の開始、終了、一時停止、再生時間、ビデオの切り替え 公式ドキュメント: http://dplayer.js.org 効果画像: ** 注:ローカルでサービスを設定し、テストのために LAN を使用して電話に接続しました。ビデオのジャンプ位置は Apple の電話では失敗しましたが、Android の電話では機能しました。まだ解決策はありません... 時間があるときに更新を続けます。 ** コード部分 html: <link rel="スタイルシート" href="css/dplayer.min.css"> <script src="js/dplayer.min.js"></script> <div id="dplayer" style="font-size: 12px;"></div> <button class="click1">ビデオを切り替える</button> js: $(function () { // ビデオを初期化 const dplayer = new DPlayer({ コンテナ: document.getElementById('dplayer'), ビデオ: url: 'video/001.mp4', //ビデオパス pic: 'images/banner1.png', //ビデオカバーサムネイル: 'images/banner2.png', //ビデオサムネイルタイプ: 'auto' }, }); dplayer.seek('6.972618'); // 指定された時間位置にジャンプ // クリックしてビデオを切り替える $('.click1').click(function () { ビデオを切り替える(); }) // dplayer.on('play', function () {をリッスンする console.log("プレイ"); dplayer.seek('6.972618'); //指定された時間位置にジャンプします}); dplayer.on('一時停止', 関数() { console.log("一時停止"); console.log(dplayer.video.currentTime); //現在の再生時間を取得します}); dplayer.on('終了', 関数() { console.log("再生が終了しました"); }); dplayer.on('エラー', 関数() { console.log("再生異常"); }); }) 関数switchVideos() { // ajax はクリックされたビデオ データを取得するためのリクエストを送信します // ...... dplayer.switchVideo({ url: 'video/002.mp4', //データにビデオURLを割り当てる pic: 'images/banner2.png', // カバー画像を取得します。サムネイル: 'images/banner2.png' // ビデオのサムネイル}) } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux での透過的巨大ページの使用と無効化の概要
>>: Navicat for MySQLのスケジュールされたデータベースバックアップとデータ復旧の詳細
この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...
W3Cschoolではこのように説明しています<meta> 要素は、検索エンジン向けの説...
序文: 最近の医療モバイル プロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズに...
目次1. 背景: 2. デザインのアイデア: 3. 起動スクリプトを書く4. イメージを構築する5....
0. 背景ハードウェア: Xiaomi Notebook Air 13/Inter Core i7-...
目次キャッシュキャッシュ位置の分類キャッシュ設定ヘッダーNodeは静的ファイルキャッシュを実装する強...
InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...
1. nginxを例に挙げるyumコマンドを使用してNginxをインストールしましたSystemd ...
導入Dockerfile ビルドの実行は、単一のコンテナの手動操作です。マイクロサービス アーキテク...
目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...
目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...
この記事は主にInnoDBのロックに関する知識を素早く理解してもらうことを目的としています。 Roc...
実際のプロジェクト開発では、多数のクエリや挿入、特にマルチスレッド挿入など、データベースに大きな負荷...
目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...
この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...