如何在html中引入DPlayer.js視頻播放插件,以及任何使用DPlayer.js插件

主要用到了實現了：視頻播放 、監聽開始、結束、暫停、播放時間、切換視頻

官方文檔：http://dplayer.js.org 

github：https://github.com/whiskyma/gulp-demo

截圖如下：

html代碼部分：

<script src="js/dplayer.min.js"></script>
<div id="dplayer" style="font-size: 12px;"></div>
<button class="click1">切換視頻</button>

js代碼：

"use strict";

var dplayer = new DPlayer({
  container: document.getElementById('dplayer'),
  video: {
    url: './images/video.mp4',
    //視頻地址
    pic: './images/banner.jpeg',
    //視頻封面
    thumbnails: 'images/default.png',
    //視頻縮略圖
    type: 'auto'
  },
  //lang: 'en', // 可選，語言，`zh'用於中文，`en'用於英語，默認：Navigator
  loop: false,
  // 可選，循環播放音樂，默認：true
  theme: '#FADFA3',
  // 可選，主題顏色，默認: #b7daff
  screenshot: true,
  // 可選，啓用截圖功能，默認值：false，注意：如果設置爲true，視頻和視頻截圖必須啓用跨域
  hotkey: true,
  // 可選，綁定熱鍵，包括左右鍵和空格，默認值：true
  preload: 'auto',
  // 可選，預加載的方式可以是'none''metadata''auto'，默認

  // dplayer.seek('6.972618'), //跳轉到指定時間位置
  autoplay: true,
  //自動播放 不支持移動瀏覽器
  danmaku: {
    // 可選，顯示彈幕，忽略此選項以隱藏彈幕
    id: '9E2E3368B56CDBB4',
    // 必需，彈幕 id，注意：它必須是唯一的，不能在你的新播放器中使用這些： `https://api.prprpr.me/dplayer/list`
    api: 'https://api.prprpr.me/dplayer/',
    // 必需，彈幕 api
    token: 'tokendemo',
    // 可選，api 的彈幕令牌
    maximum: 1000,
    // 可選，最大數量的彈幕
    addition: ['https://api.prprpr.me/dplayer/bilibili?aid=4157142'] // 可選的，額外的彈幕，參見：`Bilibili彈幕支持`
  }
});

樣式代碼就自己寫啦！！！