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

推薦する

iOS WeChat H5ページのゴム反発効果の落とし穴記録

ビジネス要件最近開発したプロジェクトの一つに、WeChat公式アカウントに関連したH5ページがありま...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

MySQLでホワイトリストアクセスを設定する方法

MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...

HTML&CSS&JS 互換性ツリー (IE、Firefox、Chrome)

Web デザインにおけるツリーとは何ですか?簡単に言うと、リンクをクリックするとサブディレクトリが展...

Linux statコマンドの使用

1. コマンドの紹介stat コマンドは、ファイルまたはファイル システムに関する詳細情報を表示する...

Java は Excel から MySQL にデータをインポートします

実際の業務では、Excel からデータベースにデータをインポートする必要がある場合があります。データ...

Docker swarm を使用して Nebula Graph クラスターを迅速にデプロイする方法のチュートリアル

1. はじめにこの記事では、Docker Swarm を使用して Nebula Graph クラスタ...

Vueで背景色と透明度を設定する方法

背景色と透明度の設定上記のように、最初の画像の場合は、灰色の背景と左上隅に白い「カバー」という文字を...

Iframe の使用を減らすべきいくつかの理由の分析

次のグラフは、100 個の異なる要素で iframe を作成するのにどれくらいの時間がかかるかを示し...

VueのID認証管理とテナント管理の詳細な説明

目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...

ES6 クラス継承を使用してゴージャスなボール効果を実現する方法

目次導入実装手順キャンバス環境を作成するライティングボールBallクラスを継承するMoveBallク...

Linux で MySQL 5.7.19 をアンインストールする方法

1. MySQLが以前にインストールされていたかどうかを確認するコマンド: rpm -qa|grep...

MySQL に外部キー制約を追加する具体的な方法

このチュートリアルの動作環境: Windows 7 システム、MySQL 8 バージョン、Dell ...

MySQL/MariaDB で完全な Unicode をサポートする方法

目次utf8mb4 の紹介UTF8 バイト数超過エラーutf8mb4 サポートデフォルトの文字エンコ...

Raspberry Pi 4b ubuntu19 サーバーへの docker-ce のインストール手順

Raspberry Pi モデルは 4b、1G RAM です。システムはubuntu19.10サーバ...