DPlayer.js ビデオ再生プラグインの使い方

DPlayer.js ビデオ再生プラグインの使い方

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JsビデオプレーヤープラグインVideo.jsの使い方の詳しい説明
  • jsのflvビデオプレーヤープラグインの使い方
  • jsとフラッシュに基づくウェブサイトflvビデオ再生プラグインコード

<<:  Linux での透過的巨大ページの使用と無効化の概要

>>:  Navicat for MySQLのスケジュールされたデータベースバックアップとデータ復旧の詳細

推薦する

js でパズルゲームを実装する

この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...

HTML におけるメタの役割について (インターネットから収集および分類)

W3Cschoolではこのように説明しています<meta> 要素は、検索エンジン向けの説...

Vueモバイル端末に最適な適応ソリューションについての簡単な説明

序文: 最近の医療モバイル プロジェクトに基づいて、Vue はさまざまな画面のさまざまな画面サイズに...

Dockerコンテナは定期的にデータベースをバックアップし、指定されたメールボックスに送信します(設計アイデア)

目次1. 背景: 2. デザインのアイデア: 3. 起動スクリプトを書く4. イメージを構築する5....

Windows 10 Home Edition に Docker for Windows をインストールする

0. 背景ハードウェア: Xiaomi Notebook Air 13/Inter Core i7-...

ノードを使用して静的ファイルキャッシュを実装する方法

目次キャッシュキャッシュ位置の分類キャッシュ設定ヘッダーNodeは静的ファイルキャッシュを実装する強...

InnoDB エンジンの redo ファイルのメンテナンス方法

InnoDB REDO ログ ファイルのサイズと数を調整する場合は、次の手順に従います。 1. My...

Nginx サーバーが Systemd カスタム サービス プロセス分析を追加

1. nginxを例に挙げるyumコマンドを使用してNginxをインストールしましたSystemd ...

Dockerバッチコンテナオーケストレーションの実装

導入Dockerfile ビルドの実行は、単一のコンテナの手動操作です。マイクロサービス アーキテク...

docker を使って sonarqube を構築する方法

目次1. Dockerをインストールする2. ソナーイメージをインストールする3. ソナーを使ってコ...

js で下線とキャメルケースの変換を実装する (複数の方法)

目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...

MySQLの関連ロックについての簡単な理解

この記事は主にInnoDBのロックに関する知識を素早く理解してもらうことを目的としています。 Roc...

MySQL データベースの show processlist コマンドの使用の分析

実際のプロジェクト開発では、多数のクエリや挿入、特にマルチスレッド挿入など、データベースに大きな負荷...

JavaScript JSON.stringify() の使用法の概要

目次1. 使用方法1. 基本的な使い方2. 2番目のパラメータ - フィルター3. 3番目のパラメー...

MySQL 5.7.13 のインストールと設定方法のグラフィック チュートリアル (win10 64 ビット)

この記事では、参考までにMySQL 5.7.13 winx64のインストールと設定方法のグラフィック...