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

推薦する

JavaScript オブジェクトからプリミティブ値への変換の詳細な説明

目次オブジェクトプロトタイプの値()オブジェクトプロトタイプtoString()シンボル.toPri...

ネイティブJavaScriptでカルーセルを実装する

この記事では、JavaScriptでカルーセルを実装するための具体的なコードを参考までに紹介します。...

デプロイから基本操作までDocker Swarm

Docker SwarmについてDocker Swarm は次の 2 つの部分で構成されます。 D...

ウェブデザインの発展と西洋建築の類似点は何でしょうか?

歴史は常に驚くほどうまく繰り返される。西洋建築とウェブデザインは、どちらも工学と芸術の組み合わせです...

GolangでMySQLデータベースのバックアップを実装する方法

背景Navicat は、最高の MySQL 視覚化ツールです。ただし、ビューのインポートとエクスポー...

DQL コマンドを使用して MySQL でデータをクエリする方法

この記事では、MySQL でよく使用されるデータ クエリ言語について説明します。 DQL (データク...

JQuery を放棄すべきでしょうか?

目次序文jQuery 以外の場合は何を使うのでしょうか? DOMとイベントAJAX リクエスト要約す...

最新の MySQL 5.7.23 のインストールと設定のグラフィックチュートリアル

2018 年の最新 MySQL 5.7 の詳細なインストールと設定は 4 つのステップに分かれており...

MySQL 8.0.22 の最新バージョンのダウンロードとインストールの超詳細なチュートリアル (Windows 64 ビット)

目次序文1. 公式サイトからMySQL 8.0.22をダウンロードする2. 環境変数を設定する3. ...

JS配列メソッドの詳細な説明

目次1. 元の配列が変更されます1. プッシュ(): 2.ポップ(): 3. シフト(): 4.un...

Centos7 に MySQL 8.0.23 をインストールする手順 (初心者レベル)

まず、MySQL とは何かを簡単に紹介します。簡単に言えば、データベースはデータを格納するための倉庫...

Dockerの基本的なネットワーク構成の詳細な説明

外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...

ネイティブ js で呼び出し、適用、バインドを実装する方法

1. 呼び出しを実装するステップ:関数をオブジェクトのプロパティとして設定します。これを関数に割り当...

IE 環境での css-vars-ponyfill の使用に関する詳細な説明 (nextjs ビルド)

css-vars-ポニーフィルCSS 変数を使用して Web ページのスキニングを実現すると、互換...

Vue のリスナーの基本的な使用例

目次序文1. リスナーの基本的な使い方2. リスナー形式3. ページに入るとすぐに監視とディープモニ...