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

推薦する

Vue3 Vue CLI マルチ環境設定

目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...

MySQLデータベースのデータテーブルに関する詳細な基本操作

目次1. 現在のデータベース内のテーブルを表示する2. テーブルを作成する3. 指定されたテーブル構...

mysql8.0.11 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...

MySQL統計の概要

MySQL は、SQL 解析とクエリ最適化のプロセスを通じて SQL を実行します。パーサーは SQ...

Dockerイメージ送信コマンドcommitの動作原理と使い方の詳細な説明

ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...

WeChat アプレット学習 WXS 使用方法チュートリアル

wxsとは何ですか? wxs (WeiXin Script) は、小規模プログラム用のスクリプト言語...

Centos7 での mysql 8.0.15 のインストールと設定

この記事では、参考までにMySQL 8.0.15のインストールと設定のグラフィックチュートリアルを紹...

Linux システムでのルート ディレクトリ拡張の概要

1. Linuxディスクの状態を確認する df -lh lsblkコマンドは、使用可能なすべてのブロ...

Tomcat の maxPostSize 設定に関する問題と注意事項

1. maxPostSize を設定する理由は何ですか? tomcat コンテナには送信データのサイ...

CentOS 7.4 64 ビット版に MySQL 8.0 をインストールして設定するための詳細な手順

ステップ1: MySQL YUMソースを取得するMySQLの公式サイトにアクセスして、RPMパッケー...

Dockerコンテナを停止および削除できない問題の解決策

実行中のコンテナIDを見つける ドッカーps上記のコンテナの物理的な場所を見つける /var/lib...

CSS を使用して波状のウォーターボール効果を実装するためのサンプルコード

今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...

MySQL で 2 つのデータベース テーブル構造を比較する方法

開発およびデバッグのプロセスでは、新しいコードと古いコードの違いを比較する必要があります。比較には、...

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

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