chore: update workflow
This commit is contained in:
DIYgod
parent
4ddc860317
commit
cb95daa97d
|
|
@ -0,0 +1,2 @@
|
|||
dist
|
||||
demo
|
||||
29
.eslintrc
29
.eslintrc
|
|
@ -1,15 +1,17 @@
|
|||
{
|
||||
"extends": "eslint:recommended",
|
||||
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
|
||||
"plugins": ["prettier"],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 10,
|
||||
"ecmaVersion": 2018,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"env": {
|
||||
"browser": true
|
||||
"es6": true,
|
||||
"browser": true,
|
||||
"node": true,
|
||||
},
|
||||
"rules": {
|
||||
"no-console": 0,
|
||||
"no-extra-parens": 1,
|
||||
"block-scoped-var": 1,
|
||||
"curly": 1,
|
||||
"eqeqeq": 1,
|
||||
|
|
@ -20,7 +22,6 @@
|
|||
"comma-spacing": 1,
|
||||
"comma-style": 1,
|
||||
"func-call-spacing": 1,
|
||||
"indent": 1,
|
||||
"keyword-spacing": 1,
|
||||
"linebreak-style": 1,
|
||||
"lines-around-comment": 1,
|
||||
|
|
@ -31,14 +32,12 @@
|
|||
"prefer-const": 1,
|
||||
"no-unsafe-negation": 1,
|
||||
"array-callback-return": 1,
|
||||
"dot-location": 1,
|
||||
"dot-notation": 1,
|
||||
"no-eval": 1,
|
||||
"no-extend-native": 1,
|
||||
"no-extra-label": 1,
|
||||
"semi": 1,
|
||||
"space-before-blocks": 1,
|
||||
"space-before-function-paren": 1,
|
||||
"space-in-parens": 1,
|
||||
"space-unary-ops": 1,
|
||||
"spaced-comment": 1,
|
||||
|
|
@ -50,14 +49,10 @@
|
|||
"no-useless-rename": 1,
|
||||
"rest-spread-spacing": 1,
|
||||
"no-trailing-spaces": 1,
|
||||
"quotes": [1, "single"]
|
||||
},
|
||||
"globals": {
|
||||
"require": false,
|
||||
"module": false,
|
||||
"Hls": false,
|
||||
"flvjs": false,
|
||||
"dashjs": false,
|
||||
"WebTorrent": false
|
||||
"no-control-regex": 0,
|
||||
"prettier/prettier": 0,
|
||||
"no-await-in-loop": 1,
|
||||
"require-atomic-updates": 0,
|
||||
"no-prototype-builtins": 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
dist
|
||||
demo
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"printWidth": 233,
|
||||
"tabWidth": 4,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"arrowParens": "always"
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
149
package.json
149
package.json
|
|
@ -1,71 +1,82 @@
|
|||
{
|
||||
"name": "dplayer",
|
||||
"version": "1.25.0",
|
||||
"description": "Wow, such a lovely HTML5 danmaku video player",
|
||||
"main": "dist/DPlayer.min.js",
|
||||
"style": "dist/DPlayer.min.css",
|
||||
"scripts": {
|
||||
"start": "npm run dev",
|
||||
"build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress --display-error-details --colors",
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --watch --colors",
|
||||
"test": "eslint src webpack",
|
||||
"docs:dev": "vuepress dev docs",
|
||||
"docs:build": "vuepress build docs"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"repository": {
|
||||
"url": "git+https://github.com/DIYgod/DPlayer.git",
|
||||
"type": "git"
|
||||
},
|
||||
"keywords": [
|
||||
"player",
|
||||
"danmaku",
|
||||
"video",
|
||||
"html5"
|
||||
],
|
||||
"author": "DIYgod",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/DIYgod/DPlayer/issues"
|
||||
},
|
||||
"homepage": "https://github.com/DIYgod/DPlayer#readme",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.4.5",
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"@vuepress/plugin-back-to-top": "1.0.1",
|
||||
"@vuepress/plugin-google-analytics": "1.0.1",
|
||||
"@vuepress/plugin-pwa": "1.0.1",
|
||||
"art-template": "4.13.2",
|
||||
"art-template-loader": "1.4.3",
|
||||
"autoprefixer": "^9.6.0",
|
||||
"babel-loader": "^8.0.6",
|
||||
"cross-env": "^5.2.0",
|
||||
"css-loader": "^2.1.1",
|
||||
"cssnano": "^4.1.10",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-loader": "^2.1.2",
|
||||
"exports-loader": "^0.7.0",
|
||||
"file-loader": "^4.0.0",
|
||||
"git-revision-webpack-plugin": "^3.0.3",
|
||||
"mini-css-extract-plugin": "0.7.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"strip-loader": "^0.1.2",
|
||||
"style-loader": "^1.0.0",
|
||||
"svg-inline-loader": "0.8.0",
|
||||
"template-string-optimize-loader": "^3.0.0",
|
||||
"url-loader": "^2.0.0",
|
||||
"vuepress": "1.0.1",
|
||||
"webpack": "^4.33.0",
|
||||
"webpack-cli": "3.3.2",
|
||||
"webpack-dev-server": "^3.6.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.19.0",
|
||||
"balloon-css": "^0.5.0",
|
||||
"promise-polyfill": "8.1.0"
|
||||
}
|
||||
"name": "dplayer",
|
||||
"version": "1.25.0",
|
||||
"description": "Wow, such a lovely HTML5 danmaku video player",
|
||||
"main": "dist/DPlayer.min.js",
|
||||
"scripts": {
|
||||
"start": "npm run dev",
|
||||
"build": "cross-env NODE_ENV=production webpack --config webpack/prod.config.js --progress --display-error-details --colors",
|
||||
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/dev.config.js --watch --colors",
|
||||
"test": "eslint src webpack",
|
||||
"format": "eslint \"**/*.js\" --fix && prettier \"**/*.{js,json,md}\" --write",
|
||||
"format:staged": "eslint \"**/*.js\" --fix && pretty-quick --staged --verbose --pattern \"**/*.{js,json,md}\"",
|
||||
"format:check": "eslint \"**/*.js\" && prettier-check \"**/*.{js,json,md}\"",
|
||||
"docs:dev": "vuepress dev docs",
|
||||
"docs:build": "vuepress build docs"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"repository": {
|
||||
"url": "git+https://github.com/DIYgod/DPlayer.git",
|
||||
"type": "git"
|
||||
},
|
||||
"keywords": [
|
||||
"player",
|
||||
"danmaku",
|
||||
"video",
|
||||
"html5"
|
||||
],
|
||||
"gitHooks": {
|
||||
"pre-commit": "npm run format:staged"
|
||||
},
|
||||
"author": "DIYgod",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/DIYgod/DPlayer/issues"
|
||||
},
|
||||
"homepage": "https://github.com/DIYgod/DPlayer#readme",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.6.0",
|
||||
"@babel/preset-env": "^7.4.5",
|
||||
"@vuepress/plugin-back-to-top": "1.1.0",
|
||||
"@vuepress/plugin-google-analytics": "1.1.0",
|
||||
"@vuepress/plugin-pwa": "1.1.0",
|
||||
"art-template": "4.13.2",
|
||||
"art-template-loader": "1.4.3",
|
||||
"autoprefixer": "^9.6.1",
|
||||
"babel-loader": "^8.0.6",
|
||||
"cross-env": "^6.0.0",
|
||||
"css-loader": "^3.2.0",
|
||||
"cssnano": "^4.1.10",
|
||||
"eslint": "^6.4.0",
|
||||
"eslint-config-prettier": "^6.3.0",
|
||||
"eslint-loader": "^3.0.0",
|
||||
"eslint-plugin-prettier": "^3.1.1",
|
||||
"exports-loader": "^0.7.0",
|
||||
"file-loader": "^4.0.0",
|
||||
"git-revision-webpack-plugin": "^3.0.3",
|
||||
"mini-css-extract-plugin": "0.8.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"prettier": "^1.18.2",
|
||||
"prettier-check": "^2.0.0",
|
||||
"pretty-quick": "^1.11.1",
|
||||
"sass-loader": "^8.0.0",
|
||||
"strip-loader": "^0.1.2",
|
||||
"style-loader": "^1.0.0",
|
||||
"svg-inline-loader": "0.8.0",
|
||||
"template-string-optimize-loader": "^3.0.0",
|
||||
"url-loader": "^2.1.0",
|
||||
"vuepress": "1.1.0",
|
||||
"webpack": "^4.40.2",
|
||||
"webpack-cli": "3.3.9",
|
||||
"webpack-dev-server": "^3.8.1",
|
||||
"yorkie": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.19.0",
|
||||
"balloon-css": "^1.0.3",
|
||||
"promise-polyfill": "8.1.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import defaultApiBackend from './api.js';
|
||||
|
||||
export default (options) => {
|
||||
|
||||
// default options
|
||||
const defaultOption = {
|
||||
container: options.element || document.getElementsByClassName('dplayer')[0],
|
||||
|
|
@ -19,7 +18,7 @@ export default (options) => {
|
|||
video: {},
|
||||
contextmenu: [],
|
||||
mutex: true,
|
||||
pluginOptions:{hls:{},flvjs:{},dash:{},webtorrent:{}}
|
||||
pluginOptions: { hls: {}, flvjs: {}, dash: {}, webtorrent: {} },
|
||||
};
|
||||
for (const defaultKey in defaultOption) {
|
||||
if (defaultOption.hasOwnProperty(defaultKey) && !options.hasOwnProperty(defaultKey)) {
|
||||
|
|
@ -52,16 +51,16 @@ export default (options) => {
|
|||
text: 'Video info',
|
||||
click: (player) => {
|
||||
player.infoPanel.triggle();
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
text: 'About author',
|
||||
link: 'https://diygod.me'
|
||||
link: 'https://diygod.me',
|
||||
},
|
||||
{
|
||||
text: `DPlayer v${DPLAYER_VERSION}`,
|
||||
link: 'https://github.com/MoePlayer/DPlayer'
|
||||
}
|
||||
link: 'https://github.com/MoePlayer/DPlayer',
|
||||
},
|
||||
]);
|
||||
|
||||
return options;
|
||||
|
|
|
|||
295
src/js/player.js
295
src/js/player.js
|
|
@ -25,15 +25,14 @@ let index = 0;
|
|||
const instances = [];
|
||||
|
||||
class DPlayer {
|
||||
|
||||
/**
|
||||
* DPlayer constructor function
|
||||
*
|
||||
* @param {Object} options - See README
|
||||
* @constructor
|
||||
*/
|
||||
constructor (options) {
|
||||
this.options = handleOption({preload:options.video.type === 'webtorrent' ? 'none' : 'metadata', ...options});
|
||||
constructor(options) {
|
||||
this.options = handleOption({ preload: options.video.type === 'webtorrent' ? 'none' : 'metadata', ...options });
|
||||
|
||||
if (this.options.video.quality) {
|
||||
this.qualityIndex = this.options.video.defaultQuality;
|
||||
|
|
@ -116,12 +115,20 @@ class DPlayer {
|
|||
this.setting = new Setting(this);
|
||||
this.plugins = {};
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
this.focus = false;
|
||||
}, true);
|
||||
this.container.addEventListener('click', () => {
|
||||
this.focus = true;
|
||||
}, true);
|
||||
document.addEventListener(
|
||||
'click',
|
||||
() => {
|
||||
this.focus = false;
|
||||
},
|
||||
true
|
||||
);
|
||||
this.container.addEventListener(
|
||||
'click',
|
||||
() => {
|
||||
this.focus = true;
|
||||
},
|
||||
true
|
||||
);
|
||||
|
||||
this.paused = true;
|
||||
|
||||
|
|
@ -131,7 +138,7 @@ class DPlayer {
|
|||
|
||||
this.contextmenu = new ContextMenu(this);
|
||||
|
||||
this.initVideo(this.video, this.quality && this.quality.type || this.options.video.type);
|
||||
this.initVideo(this.video, (this.quality && this.quality.type) || this.options.video.type);
|
||||
|
||||
this.infoPanel = new InfoPanel(this);
|
||||
|
||||
|
|
@ -144,17 +151,16 @@ class DPlayer {
|
|||
}
|
||||
|
||||
/**
|
||||
* Seek video
|
||||
*/
|
||||
seek (time) {
|
||||
* Seek video
|
||||
*/
|
||||
seek(time) {
|
||||
time = Math.max(time, 0);
|
||||
if (this.video.duration) {
|
||||
time = Math.min(time, this.video.duration);
|
||||
}
|
||||
if (this.video.currentTime < time) {
|
||||
this.notice(`${this.tran('FF')} ${(time - this.video.currentTime).toFixed(0)} ${this.tran('s')}`);
|
||||
}
|
||||
else if (this.video.currentTime > time) {
|
||||
} else if (this.video.currentTime > time) {
|
||||
this.notice(`${this.tran('REW')} ${(this.video.currentTime - time).toFixed(0)} ${this.tran('s')}`);
|
||||
}
|
||||
|
||||
|
|
@ -171,7 +177,7 @@ class DPlayer {
|
|||
/**
|
||||
* Play video
|
||||
*/
|
||||
play () {
|
||||
play() {
|
||||
this.paused = false;
|
||||
if (this.video.paused) {
|
||||
this.bezel.switch(Icons.play);
|
||||
|
|
@ -180,10 +186,11 @@ class DPlayer {
|
|||
this.template.playButton.innerHTML = Icons.pause;
|
||||
|
||||
const playedPromise = Promise.resolve(this.video.play());
|
||||
playedPromise.catch(() => {
|
||||
this.pause();
|
||||
}).then(() => {
|
||||
});
|
||||
playedPromise
|
||||
.catch(() => {
|
||||
this.pause();
|
||||
})
|
||||
.then(() => {});
|
||||
this.timer.enable('loading');
|
||||
this.container.classList.remove('dplayer-paused');
|
||||
this.container.classList.add('dplayer-playing');
|
||||
|
|
@ -202,7 +209,7 @@ class DPlayer {
|
|||
/**
|
||||
* Pause video
|
||||
*/
|
||||
pause () {
|
||||
pause() {
|
||||
this.paused = true;
|
||||
this.container.classList.remove('dplayer-loading');
|
||||
|
||||
|
|
@ -220,14 +227,12 @@ class DPlayer {
|
|||
}
|
||||
}
|
||||
|
||||
switchVolumeIcon () {
|
||||
switchVolumeIcon() {
|
||||
if (this.volume() >= 0.95) {
|
||||
this.template.volumeIcon.innerHTML = Icons.volumeUp;
|
||||
}
|
||||
else if (this.volume() > 0) {
|
||||
} else if (this.volume() > 0) {
|
||||
this.template.volumeIcon.innerHTML = Icons.volumeDown;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.template.volumeIcon.innerHTML = Icons.volumeOff;
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +240,7 @@ class DPlayer {
|
|||
/**
|
||||
* Set volume
|
||||
*/
|
||||
volume (percentage, nostorage, nonotice) {
|
||||
volume(percentage, nostorage, nonotice) {
|
||||
percentage = parseFloat(percentage);
|
||||
if (!isNaN(percentage)) {
|
||||
percentage = Math.max(percentage, 0);
|
||||
|
|
@ -263,11 +268,10 @@ class DPlayer {
|
|||
/**
|
||||
* Toggle between play and pause
|
||||
*/
|
||||
toggle () {
|
||||
toggle() {
|
||||
if (this.video.paused) {
|
||||
this.play();
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.pause();
|
||||
}
|
||||
}
|
||||
|
|
@ -275,7 +279,7 @@ class DPlayer {
|
|||
/**
|
||||
* attach event
|
||||
*/
|
||||
on (name, callback) {
|
||||
on(name, callback) {
|
||||
this.events.on(name, callback);
|
||||
}
|
||||
|
||||
|
|
@ -285,7 +289,7 @@ class DPlayer {
|
|||
* @param {Object} video - new video info
|
||||
* @param {Object} danmaku - new danmaku info
|
||||
*/
|
||||
switchVideo (video, danmakuAPI) {
|
||||
switchVideo(video, danmakuAPI) {
|
||||
this.pause();
|
||||
this.video.poster = video.pic ? video.pic : '';
|
||||
this.video.src = video.url;
|
||||
|
|
@ -309,28 +313,23 @@ class DPlayer {
|
|||
}
|
||||
}
|
||||
|
||||
initMSE (video, type) {
|
||||
initMSE(video, type) {
|
||||
this.type = type;
|
||||
if (this.options.video.customType && this.options.video.customType[type]) {
|
||||
if (Object.prototype.toString.call(this.options.video.customType[type]) === '[object Function]') {
|
||||
this.options.video.customType[type](this.video, this);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
console.error(`Illegal customType: ${type}`);
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
if (this.type === 'auto') {
|
||||
if (/m3u8(#|\?|$)/i.exec(video.src)) {
|
||||
this.type = 'hls';
|
||||
}
|
||||
else if (/.flv(#|\?|$)/i.exec(video.src)) {
|
||||
} else if (/.flv(#|\?|$)/i.exec(video.src)) {
|
||||
this.type = 'flv';
|
||||
}
|
||||
else if (/.mpd(#|\?|$)/i.exec(video.src)) {
|
||||
} else if (/.mpd(#|\?|$)/i.exec(video.src)) {
|
||||
this.type = 'dash';
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.type = 'normal';
|
||||
}
|
||||
}
|
||||
|
|
@ -340,111 +339,107 @@ class DPlayer {
|
|||
}
|
||||
|
||||
switch (this.type) {
|
||||
// https://github.com/video-dev/hls.js
|
||||
case 'hls':
|
||||
if (Hls) {
|
||||
if (Hls.isSupported()) {
|
||||
const options = this.options.pluginOptions.hls;
|
||||
const hls = new Hls(options);
|
||||
this.plugins.hls = hls;
|
||||
hls.loadSource(video.src);
|
||||
hls.attachMedia(video);
|
||||
this.events.on('destroy', () => {
|
||||
hls.destroy();
|
||||
delete this.plugins.hls;
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.notice('Error: Hls is not supported.');
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.notice('Error: Can\'t find Hls.');
|
||||
}
|
||||
break;
|
||||
|
||||
// https://github.com/Bilibili/flv.js
|
||||
case 'flv':
|
||||
if (flvjs) {
|
||||
if (flvjs.isSupported()) {
|
||||
const options = Object.assign(this.options.pluginOptions.flvjs,{
|
||||
type: 'flv',
|
||||
url: video.src
|
||||
});
|
||||
const flvPlayer = flvjs.createPlayer(options);
|
||||
this.plugins.flvjs = flvPlayer;
|
||||
flvPlayer.attachMediaElement(video);
|
||||
flvPlayer.load();
|
||||
this.events.on('destroy', () => {
|
||||
flvPlayer.unload();
|
||||
flvPlayer.detachMediaElement();
|
||||
flvPlayer.destroy();
|
||||
delete this.plugins.flvjs;
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.notice('Error: flvjs is not supported.');
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.notice('Error: Can\'t find flvjs.');
|
||||
}
|
||||
break;
|
||||
|
||||
// https://github.com/Dash-Industry-Forum/dash.js
|
||||
case 'dash':
|
||||
if (dashjs) {
|
||||
const dashjsPlayer = dashjs.MediaPlayer().create().initialize(video, video.src, false);
|
||||
const options = this.options.pluginOptions.dash;
|
||||
dashjsPlayer.updateSettings(options);
|
||||
this.plugins.dash = dashjsPlayer;
|
||||
this.events.on('destroy', () => {
|
||||
dashjs.MediaPlayer().reset();
|
||||
delete this.plugins.dash;
|
||||
});
|
||||
}
|
||||
else {
|
||||
this.notice('Error: Can\'t find dashjs.');
|
||||
}
|
||||
break;
|
||||
|
||||
// https://github.com/webtorrent/webtorrent
|
||||
case 'webtorrent':
|
||||
if (WebTorrent) {
|
||||
if (WebTorrent.WEBRTC_SUPPORT) {
|
||||
this.container.classList.add('dplayer-loading');
|
||||
const options = this.options.pluginOptions.webtorrent;
|
||||
const client = new WebTorrent(options);
|
||||
this.plugins.webtorrent = client;
|
||||
const torrentId = video.src;
|
||||
video.src = '';
|
||||
video.preload = 'metadata';
|
||||
video.addEventListener('durationchange', () => this.container.classList.remove('dplayer-loading'), {once: true});
|
||||
client.add(torrentId, (torrent) => {
|
||||
const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
|
||||
file.renderTo(this.video, {
|
||||
autoplay: this.options.autoplay
|
||||
// https://github.com/video-dev/hls.js
|
||||
case 'hls':
|
||||
if (window.Hls) {
|
||||
if (window.Hls.isSupported()) {
|
||||
const options = this.options.pluginOptions.hls;
|
||||
const hls = new window.Hls(options);
|
||||
this.plugins.hls = hls;
|
||||
hls.loadSource(video.src);
|
||||
hls.attachMedia(video);
|
||||
this.events.on('destroy', () => {
|
||||
hls.destroy();
|
||||
delete this.plugins.hls;
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.notice('Error: Hls is not supported.');
|
||||
}
|
||||
} else {
|
||||
this.notice("Error: Can't find Hls.");
|
||||
}
|
||||
break;
|
||||
|
||||
// https://github.com/Bilibili/flv.js
|
||||
case 'flv':
|
||||
if (window.flvjs) {
|
||||
if (window.flvjs.isSupported()) {
|
||||
const options = Object.assign(this.options.pluginOptions.flvjs, {
|
||||
type: 'flv',
|
||||
url: video.src,
|
||||
});
|
||||
const flvPlayer = window.flvjs.createPlayer(options);
|
||||
this.plugins.flvjs = flvPlayer;
|
||||
flvPlayer.attachMediaElement(video);
|
||||
flvPlayer.load();
|
||||
this.events.on('destroy', () => {
|
||||
flvPlayer.unload();
|
||||
flvPlayer.detachMediaElement();
|
||||
flvPlayer.destroy();
|
||||
delete this.plugins.flvjs;
|
||||
});
|
||||
} else {
|
||||
this.notice('Error: flvjs is not supported.');
|
||||
}
|
||||
} else {
|
||||
this.notice("Error: Can't find flvjs.");
|
||||
}
|
||||
break;
|
||||
|
||||
// https://github.com/Dash-Industry-Forum/dash.js
|
||||
case 'dash':
|
||||
if (window.dashjs) {
|
||||
const dashjsPlayer = window.dashjs
|
||||
.MediaPlayer()
|
||||
.create()
|
||||
.initialize(video, video.src, false);
|
||||
const options = this.options.pluginOptions.dash;
|
||||
dashjsPlayer.updateSettings(options);
|
||||
this.plugins.dash = dashjsPlayer;
|
||||
this.events.on('destroy', () => {
|
||||
client.remove(torrentId);
|
||||
client.destroy();
|
||||
delete this.plugins.webtorrent;
|
||||
window.dashjs.MediaPlayer().reset();
|
||||
delete this.plugins.dash;
|
||||
});
|
||||
} else {
|
||||
this.notice("Error: Can't find dashjs.");
|
||||
}
|
||||
else {
|
||||
this.notice('Error: Webtorrent is not supported.');
|
||||
break;
|
||||
|
||||
// https://github.com/webtorrent/webtorrent
|
||||
case 'webtorrent':
|
||||
if (window.WebTorrent) {
|
||||
if (window.WebTorrent.WEBRTC_SUPPORT) {
|
||||
this.container.classList.add('dplayer-loading');
|
||||
const options = this.options.pluginOptions.webtorrent;
|
||||
const client = new window.WebTorrent(options);
|
||||
this.plugins.webtorrent = client;
|
||||
const torrentId = video.src;
|
||||
video.src = '';
|
||||
video.preload = 'metadata';
|
||||
video.addEventListener('durationchange', () => this.container.classList.remove('dplayer-loading'), { once: true });
|
||||
client.add(torrentId, (torrent) => {
|
||||
const file = torrent.files.find((file) => file.name.endsWith('.mp4'));
|
||||
file.renderTo(this.video, {
|
||||
autoplay: this.options.autoplay,
|
||||
});
|
||||
});
|
||||
this.events.on('destroy', () => {
|
||||
client.remove(torrentId);
|
||||
client.destroy();
|
||||
delete this.plugins.webtorrent;
|
||||
});
|
||||
} else {
|
||||
this.notice('Error: Webtorrent is not supported.');
|
||||
}
|
||||
} else {
|
||||
this.notice("Error: Can't find Webtorrent.");
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.notice('Error: Can\'t find Webtorrent.');
|
||||
}
|
||||
break;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
initVideo (video, type) {
|
||||
initVideo(video, type) {
|
||||
this.initMSE(video, type);
|
||||
|
||||
/**
|
||||
|
|
@ -478,8 +473,7 @@ class DPlayer {
|
|||
this.bar.set('played', 1, 'width');
|
||||
if (!this.setting.loop) {
|
||||
this.pause();
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.seek(0);
|
||||
this.play();
|
||||
}
|
||||
|
|
@ -524,12 +518,11 @@ class DPlayer {
|
|||
}
|
||||
}
|
||||
|
||||
switchQuality (index) {
|
||||
switchQuality(index) {
|
||||
index = typeof index === 'string' ? parseInt(index) : index;
|
||||
if (this.qualityIndex === index || this.switchingQuality) {
|
||||
return;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
this.qualityIndex = index;
|
||||
}
|
||||
this.switchingQuality = true;
|
||||
|
|
@ -544,7 +537,7 @@ class DPlayer {
|
|||
screenshot: this.options.screenshot,
|
||||
preload: 'auto',
|
||||
url: this.quality.url,
|
||||
subtitle: this.options.subtitle
|
||||
subtitle: this.options.subtitle,
|
||||
});
|
||||
const videoEle = new DOMParser().parseFromString(videoHTML, 'text/html').body.firstChild;
|
||||
this.template.videoWrap.insertBefore(videoEle, this.template.videoWrap.getElementsByTagName('div')[0]);
|
||||
|
|
@ -575,7 +568,7 @@ class DPlayer {
|
|||
});
|
||||
}
|
||||
|
||||
notice (text, time = 2000, opacity = 0.8) {
|
||||
notice(text, time = 2000, opacity = 0.8) {
|
||||
this.template.notice.innerHTML = text;
|
||||
this.template.notice.style.opacity = opacity;
|
||||
if (this.noticeTime) {
|
||||
|
|
@ -590,21 +583,21 @@ class DPlayer {
|
|||
}
|
||||
}
|
||||
|
||||
resize () {
|
||||
resize() {
|
||||
if (this.danmaku) {
|
||||
this.danmaku.resize();
|
||||
}
|
||||
if (this.controller.thumbnails) {
|
||||
this.controller.thumbnails.resize(160, this.video.videoHeight / this.video.videoWidth * 160, this.template.barWrap.offsetWidth);
|
||||
this.controller.thumbnails.resize(160, (this.video.videoHeight / this.video.videoWidth) * 160, this.template.barWrap.offsetWidth);
|
||||
}
|
||||
this.events.trigger('resize');
|
||||
}
|
||||
|
||||
speed (rate) {
|
||||
speed(rate) {
|
||||
this.video.playbackRate = rate;
|
||||
}
|
||||
|
||||
destroy () {
|
||||
destroy() {
|
||||
instances.splice(instances.indexOf(this), 1);
|
||||
this.pause();
|
||||
this.controller.destroy();
|
||||
|
|
@ -614,7 +607,7 @@ class DPlayer {
|
|||
this.events.trigger('destroy');
|
||||
}
|
||||
|
||||
static get version () {
|
||||
static get version() {
|
||||
/* global DPLAYER_VERSION */
|
||||
return DPLAYER_VERSION;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,18 @@
|
|||
const isMobile = /mobile/i.test(window.navigator.userAgent);
|
||||
|
||||
const utils = {
|
||||
|
||||
/**
|
||||
* Parse second to time string
|
||||
*
|
||||
* @param {Number} second
|
||||
* @return {String} 00:00 or 00:00:00
|
||||
*/
|
||||
* Parse second to time string
|
||||
*
|
||||
* @param {Number} second
|
||||
* @return {String} 00:00 or 00:00:00
|
||||
*/
|
||||
secondToTime: (second) => {
|
||||
second = second || 0;
|
||||
if (second === 0 || second == Infinity || second.toString() === 'NaN') {
|
||||
return '00:00'
|
||||
if (second === 0 || second === Infinity || second.toString() === 'NaN') {
|
||||
return '00:00';
|
||||
}
|
||||
const add0 = (num) => num < 10 ? '0' + num : '' + num;
|
||||
const add0 = (num) => (num < 10 ? '0' + num : '' + num);
|
||||
const hour = Math.floor(second / 3600);
|
||||
const min = Math.floor((second - hour * 3600) / 60);
|
||||
const sec = Math.floor(second - hour * 3600 - min * 60);
|
||||
|
|
@ -33,8 +32,7 @@ const utils = {
|
|||
actualLeft += current.offsetLeft;
|
||||
current = current.offsetParent;
|
||||
}
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
while (current !== null && current !== element) {
|
||||
actualLeft += current.offsetLeft;
|
||||
current = current.offsetParent;
|
||||
|
|
@ -51,8 +49,8 @@ const utils = {
|
|||
* getBoundingClientRect 在 Firefox 11 及以下返回的值会把 transform 的值也包含进去
|
||||
* getBoundingClientRect 在 Opera 10.5 及以下返回的值缺失 width、height 值
|
||||
*/
|
||||
getBoundingClientRectViewLeft (element) {
|
||||
const scrollTop = window.scrollY || window.pageYOffset || document.body.scrollTop + (document.documentElement && document.documentElement.scrollTop || 0);
|
||||
getBoundingClientRectViewLeft(element) {
|
||||
const scrollTop = window.scrollY || window.pageYOffset || document.body.scrollTop + ((document.documentElement && document.documentElement.scrollTop) || 0);
|
||||
|
||||
if (element.getBoundingClientRect) {
|
||||
if (typeof this.getBoundingClientRectViewLeft.offset !== 'number') {
|
||||
|
|
@ -73,19 +71,18 @@ const utils = {
|
|||
}
|
||||
},
|
||||
|
||||
getScrollPosition () {
|
||||
getScrollPosition() {
|
||||
return {
|
||||
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
|
||||
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
|
||||
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
|
||||
};
|
||||
},
|
||||
|
||||
setScrollPosition ({left = 0, top = 0}) {
|
||||
setScrollPosition({ left = 0, top = 0 }) {
|
||||
if (this.isFirefox) {
|
||||
document.documentElement.scrollLeft = left;
|
||||
document.documentElement.scrollTop = top;
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
window.scrollTo(left, top);
|
||||
}
|
||||
},
|
||||
|
|
@ -101,11 +98,12 @@ const utils = {
|
|||
localStorage.setItem(key, value);
|
||||
},
|
||||
|
||||
get: (key) => localStorage.getItem(key)
|
||||
get: (key) => localStorage.getItem(key),
|
||||
},
|
||||
|
||||
cumulativeOffset: (element) => {
|
||||
let top = 0, left = 0;
|
||||
let top = 0,
|
||||
left = 0;
|
||||
do {
|
||||
top += element.offsetTop || 0;
|
||||
left += element.offsetLeft || 0;
|
||||
|
|
@ -114,14 +112,14 @@ const utils = {
|
|||
|
||||
return {
|
||||
top: top,
|
||||
left: left
|
||||
left: left,
|
||||
};
|
||||
},
|
||||
|
||||
nameMap: {
|
||||
dragStart: isMobile ? 'touchstart' : 'mousedown',
|
||||
dragMove: isMobile ? 'touchmove' : 'mousemove',
|
||||
dragEnd: isMobile ? 'touchend' : 'mouseup'
|
||||
dragEnd: isMobile ? 'touchend' : 'mouseup',
|
||||
},
|
||||
|
||||
color2Number: (color) => {
|
||||
|
|
@ -131,21 +129,21 @@ const utils = {
|
|||
if (color.length === 3) {
|
||||
color = `${color[0]}${color[0]}${color[1]}${color[1]}${color[2]}${color[2]}`;
|
||||
}
|
||||
return parseInt(color, 16) + 0x000000 & 0xffffff;
|
||||
return (parseInt(color, 16) + 0x000000) & 0xffffff;
|
||||
},
|
||||
|
||||
number2Color: (number) => '#' + ('00000' + number.toString(16)).slice(-6),
|
||||
|
||||
number2Type: (number) => {
|
||||
switch (number) {
|
||||
case 0:
|
||||
return 'right';
|
||||
case 1:
|
||||
return 'top';
|
||||
case 2:
|
||||
return 'bottom';
|
||||
default:
|
||||
return 'right';
|
||||
case 0:
|
||||
return 'right';
|
||||
case 1:
|
||||
return 'top';
|
||||
case 2:
|
||||
return 'bottom';
|
||||
default:
|
||||
return 'right';
|
||||
}
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
/* eslint-disable no-undef */
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const GitRevisionPlugin = require('git-revision-webpack-plugin');
|
||||
const gitRevisionPlugin = new GitRevisionPlugin();
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const cssnano = require('cssnano');
|
||||
|
||||
module.exports = {
|
||||
|
||||
mode: 'development',
|
||||
|
||||
devtool: 'cheap-module-source-map',
|
||||
|
||||
entry: {
|
||||
'DPlayer': './src/js/index.js'
|
||||
DPlayer: './src/js/index.js',
|
||||
},
|
||||
|
||||
output: {
|
||||
|
|
@ -21,23 +21,17 @@ module.exports = {
|
|||
libraryTarget: 'umd',
|
||||
libraryExport: 'default',
|
||||
umdNamedDefine: true,
|
||||
publicPath: '/'
|
||||
publicPath: '/',
|
||||
},
|
||||
|
||||
resolve: {
|
||||
modules: ['node_modules'],
|
||||
extensions: ['.js', '.scss']
|
||||
extensions: ['.js', '.scss'],
|
||||
},
|
||||
|
||||
module: {
|
||||
strictExportPresence: true,
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
enforce: 'pre',
|
||||
loader: 'eslint-loader',
|
||||
include: path.resolve(__dirname, '../src/js'),
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: [
|
||||
|
|
@ -45,10 +39,10 @@ module.exports = {
|
|||
loader: 'babel-loader',
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
presets: ['@babel/preset-env']
|
||||
}
|
||||
}
|
||||
]
|
||||
presets: ['@babel/preset-env'],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
|
|
@ -57,36 +51,34 @@ module.exports = {
|
|||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1
|
||||
}
|
||||
importLoaders: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
config: {
|
||||
path: path.join(__dirname, 'postcss.config.js')
|
||||
}
|
||||
}
|
||||
plugins: [autoprefixer, cssnano],
|
||||
},
|
||||
},
|
||||
'sass-loader'
|
||||
]
|
||||
'sass-loader',
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg)$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
'limit': 40000
|
||||
}
|
||||
limit: 40000,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'svg-inline-loader'
|
||||
loader: 'svg-inline-loader',
|
||||
},
|
||||
{
|
||||
test: /\.art$/,
|
||||
loader: 'art-template-loader'
|
||||
}
|
||||
]
|
||||
loader: 'art-template-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
devServer: {
|
||||
|
|
@ -96,29 +88,28 @@ module.exports = {
|
|||
quiet: false,
|
||||
open: true,
|
||||
historyApiFallback: {
|
||||
disableDotRule: true
|
||||
disableDotRule: true,
|
||||
},
|
||||
watchOptions: {
|
||||
ignored: /node_modules/
|
||||
}
|
||||
ignored: /node_modules/,
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
DPLAYER_VERSION: `"${require('../package.json').version}"`,
|
||||
GIT_HASH: JSON.stringify(gitRevisionPlugin.version())
|
||||
})
|
||||
GIT_HASH: JSON.stringify(gitRevisionPlugin.version()),
|
||||
}),
|
||||
],
|
||||
|
||||
node: {
|
||||
dgram: 'empty',
|
||||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty'
|
||||
tls: 'empty',
|
||||
},
|
||||
|
||||
performance: {
|
||||
hints: false
|
||||
}
|
||||
|
||||
hints: false,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
'autoprefixer': {},
|
||||
'cssnano': {}
|
||||
}
|
||||
};
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
/* eslint-disable no-undef */
|
||||
const path = require('path');
|
||||
const webpack = require('webpack');
|
||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||
const GitRevisionPlugin = require('git-revision-webpack-plugin');
|
||||
const gitRevisionPlugin = new GitRevisionPlugin();
|
||||
const autoprefixer = require('autoprefixer');
|
||||
const cssnano = require('cssnano');
|
||||
|
||||
module.exports = {
|
||||
|
||||
mode: 'production',
|
||||
|
||||
bail: true,
|
||||
|
|
@ -14,7 +13,7 @@ module.exports = {
|
|||
devtool: 'source-map',
|
||||
|
||||
entry: {
|
||||
'DPlayer': './src/js/index.js'
|
||||
DPlayer: './src/js/index.js',
|
||||
},
|
||||
|
||||
output: {
|
||||
|
|
@ -24,23 +23,17 @@ module.exports = {
|
|||
libraryTarget: 'umd',
|
||||
libraryExport: 'default',
|
||||
umdNamedDefine: true,
|
||||
publicPath: '/'
|
||||
publicPath: '/',
|
||||
},
|
||||
|
||||
resolve: {
|
||||
modules: ['node_modules'],
|
||||
extensions: ['.js', '.scss']
|
||||
extensions: ['.js', '.scss'],
|
||||
},
|
||||
|
||||
module: {
|
||||
strictExportPresence: true,
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
enforce: 'pre',
|
||||
loader: 'eslint-loader',
|
||||
include: path.resolve(__dirname, '../src/js'),
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
use: [
|
||||
|
|
@ -49,59 +42,53 @@ module.exports = {
|
|||
loader: 'babel-loader',
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
presets: ['@babel/preset-env']
|
||||
}
|
||||
}
|
||||
]
|
||||
presets: ['@babel/preset-env'],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [
|
||||
MiniCssExtractPlugin.loader,
|
||||
'style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
importLoaders: 1,
|
||||
sourceMap: true
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
config: {
|
||||
path: path.join(__dirname, 'postcss.config.js')
|
||||
}
|
||||
}
|
||||
plugins: [autoprefixer, cssnano],
|
||||
},
|
||||
},
|
||||
'sass-loader',
|
||||
]
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg)$/,
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
'limit': 40000
|
||||
}
|
||||
limit: 40000,
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'svg-inline-loader'
|
||||
loader: 'svg-inline-loader',
|
||||
},
|
||||
{
|
||||
test: /\.art$/,
|
||||
loader: 'art-template-loader'
|
||||
}
|
||||
]
|
||||
loader: 'art-template-loader',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
DPLAYER_VERSION: `"${require('../package.json').version}"`,
|
||||
GIT_HASH: JSON.stringify(gitRevisionPlugin.version())
|
||||
GIT_HASH: JSON.stringify(gitRevisionPlugin.version()),
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: '[name].min.css'
|
||||
})
|
||||
],
|
||||
|
||||
node: {
|
||||
|
|
@ -109,6 +96,5 @@ module.exports = {
|
|||
fs: 'empty',
|
||||
net: 'empty',
|
||||
tls: 'empty',
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue