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のスケジュールされたデータベースバックアップとデータ復旧の詳細

推薦する

Alibaba Cloud CentOS 7 に MySQL 8.0.13 をインストールする方法

1. MySQL インストール パッケージをダウンロードします(ここにはコツがあります。おそらく、こ...

Vue で変数式セレクターを実装する方法

目次HTML構造の定義入力タグのバインディング属性入力タグはキーダウンイベントをリッスンしますli ...

grep を使用して MySQL エラー ログ情報を取得する方法の詳細な説明

MySQL のメンテナンスを容易にするために、エラー情報を収集するためのインターフェースを提供するス...

JS WebSocket 切断理由とハートビートの仕組みの詳しい説明

1. 切断理由WebSocket が切断される理由は多数あります。WebSocket が切断されたと...

この記事では、Vueのフロントエンドページングとバックエンドページングを実装する方法を説明します。

目次1: フロントエンドの手書きページング(データ量が少ない場合) 2: バックエンドのページング、...

JavaScript を使って簡単な計算機を書く

効果は以下のとおりです。参考プログラム: <!DOCTYPE html> <htm...

HTML の <input> タグの詳細な説明と、それを無効にする方法

定義と使用法<input> タグはユーザー情報を収集するために使用されます。 type ...

Element-ui アップロードファイルのアップロード制限の解決策

質問アップロードするファイルのタイプを accept に追加することは、「表面的な」役割しか果たしま...

Nodeはリクエスト追跡にasync_hooksモジュールを使用します

async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...

Mysql は null 値の first/last メソッドの例を実装します

序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...

SQLはROW_NUMBER() OVER関数を使用してシーケンス番号を生成します。

構文: ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY...

CentOS サーバーに FFmpeg をインストールするための完全な手順

序文サーバーシステム環境は、CentOS 6.5 (最終) です。 FFmpeg をサーバーに正常に...

Ant Design Blazor コンポーネントライブラリのルーティング再利用マルチタブ機能

最近、Ant Design Blazor コンポーネント ライブラリにマルチタブ コンポーネントを実...

Word のコンテンツを Web サイトのエディターに直接コピーすることはお勧めしません。

<br />質問: Word のコンテンツを Web サイトのエディターに直接コピーする...

Vueはデータを初期状態にリセットします

場合によっては、データ内のデータを再利用する必要がありますが、データ内のデータはさまざまなフォーム、...