Merge branch 'new-test' of https://github.com/zhw2590582/ArtPlayer into new-test

This commit is contained in:
Harvey committed 2021-11-30 08:42:46 +08:00
commit 220fb06dcd
17 files changed
-578

No files matched your search

-21
View File
@@ -1,21 +0,0 @@
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
autoSize: true,
light: true,
localVideo: true,
moreVideoAttr: {
crossOrigin: 'anonymous',
},
controls: [
{
name: 'open',
position: 'right',
html: 'Local Video',
mounted: $open => {
art.plugins.localVideo.attach($open);
},
},
],
plugins: [artplayerPluginBacklight],
});
-68
View File
@@ -1,68 +0,0 @@
// 使用 Github Issues Api 做弹幕接口
// 接口每小时限制 5000 次请求,勿滥用
var danmuku = new ArtplayerToolGithub({
api: 'zhw2590582/github-issues-api-as-danmuku/issues/1',
clientID: '749a95aad589f8849abe',
clientSecret: '7bb6fa67ef6e525e5bd5fda46cd3925ecc4a3760',
});
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
autoSize: true,
controls: [
{
name: 'danmuku',
position: 'right',
html: '发送弹幕',
click: () => {
if (window.location.href.includes('code=')) {
art.notice.show = '正在登陆中,请稍等!!!';
} else if (!danmuku.isLogin) {
danmuku.login();
} else {
var text = prompt('请输入:', '弹幕内容');
if (!text || !text.trim()) return;
if (text.length >= 20) {
art.notice.show = '弹幕字数不能大于20字!!!';
return;
}
if (danmuku.remaining <= 10) {
art.notice.show = '接口请求到达上限,请稍后再试!!!';
return;
}
art.notice.show = '弹幕发送中...';
danmuku
.send({
text: text,
time: art.player.currentTime,
color: '#' + Math.floor(Math.random() * 0xffffff).toString(16),
})
.then(data => {
art.notice.show = `发送弹幕成功: ${danmuku.remaining} / ${danmuku.limit}`;
art.plugins.artplayerPluginDanmuku.emit({
...data,
mode: 0,
time: art.player.currentTime + 0.2,
border: true,
});
})
.catch(() => {
art.notice.show = `发送弹幕失败: ${danmuku.remaining} / ${danmuku.limit}`;
});
}
},
},
],
plugins: [
artplayerPluginDanmuku({
danmuku: () => danmuku.load(),
speed: 5,
opacity: 1,
color: '#fff',
size: 25,
maxlength: 50,
margin: [10, 100],
}),
],
});
-132
View File
@@ -1,132 +0,0 @@
const $container = document.querySelector('.artplayer-app');
// 在服务器端可以直接访问 Artplayer.html 属性,返回供 ssr 使用的 html
// 然后直接插值于播放器的容器里
// const Artplayer = require('artplayer');
// console.log(Artplayer.html);
// 在浏览器端,开启 useSSR 即可
// 模拟效果
$container.innerHTML = Artplayer.html;
var art = new Artplayer({
useSSR: true,
container: $container,
url: 'https://artplayer.org/assets/sample/video.mp4',
title: 'One More Time One More Chance',
poster: '/assets/sample/poster.jpg',
volume: 0.5,
isLive: false,
muted: false,
autoplay: false,
pip: true,
autoSize: true,
autoMini: true,
screenshot: true,
setting: true,
loop: true,
flip: true,
rotate: true,
playbackRate: true,
aspectRatio: true,
fullscreen: true,
fullscreenWeb: true,
subtitleOffset: true,
miniProgressBar: true,
localVideo: true,
localSubtitle: true,
networkMonitor: false,
mutex: true,
light: true,
backdrop: true,
log: true,
theme: '#ffad00',
lang: navigator.language.toLowerCase(),
moreVideoAttr: {
crossOrigin: 'anonymous',
},
contextmenu: [
{
html: 'Custom menu',
click: function (contextmenu) {
console.info('You clicked on the custom menu');
contextmenu.show = false;
},
},
],
layers: [
{
html: `<img style="width: 100px" src="/assets/sample/layer.png">`,
click: function () {
console.info('You clicked on the custom layer');
},
style: {
position: 'absolute',
top: '20px',
right: '20px',
opacity: '.9',
},
},
],
quality: [
{
default: true,
name: 'SD 480P',
url: '/assets/sample/video.mp4',
},
{
name: 'HD 720P',
url: '/assets/sample/video.mp4',
},
],
thumbnails: {
url: '/assets/sample/thumbnails.png',
number: 100,
width: 160,
height: 90,
column: 10,
},
subtitle: {
url: '/assets/sample/subtitle.srt',
style: {
color: '#03A9F4',
},
encoding: 'utf-8',
bilingual: true,
},
highlight: [
{
time: 60,
text: 'One more chance',
},
{
time: 120,
text: '谁でもいいはずなのに',
},
{
time: 180,
text: '夏の想い出がまわる',
},
{
time: 240,
text: 'こんなとこにあるはずもないのに',
},
{
time: 300,
text: '终わり',
},
],
controls: [
{
position: 'right',
html: 'Control',
click: function () {
console.info('You clicked on the custom control');
},
},
],
icons: {
loading: '<img src="/assets/img/ploading.gif">',
state: '<img src="/assets/img/state.png">',
},
});
-6
View File
@@ -30,18 +30,12 @@
<li>
<a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku">artplayer-plugin-danmuku</a>
</li>
<li>
<a href="./?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight">artplayer-plugin-backlight</a>
</li>
</ul>
<ul>
<li class="title">Tools</li>
<li>
<a href="./?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail">artplayer-tool-thumbnail</a>
</li>
<li>
<a href="./?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github">artplayer-tool-github</a>
</li>
</ul>
</div>
</div>
-60
View File
@@ -1,60 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Artplayer.js</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="keywords" content="artplayer, player, js, html5, video" />
<meta name="description" content="ArtPlayer.js is a modern and full featured HTML5 video player" />
<link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./assets/css/normalize.css">
<style>
html,
body {
height: 100%;
}
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.artplayer-app {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div class="container">
<div class="artplayer-app"></div>
</div>
<script src="./uncompiled/artplayer.js?t=6"></script>
<script src="./assets/js/ssr.js"></script>
<script>
var isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
window.location.hostname === '[::1]' ||
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
var _hmt = _hmt || [];
(function () {
if (!isLocalhost) {
var hm = document.createElement('script');
hm.src = 'https://hm.baidu.com/hm.js?b6c9b8bafbf5fe7225160101dafbbc7d';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
}
})();
</script>
</body>
</html>
@@ -1,9 +0,0 @@
node_modules
.DS_Store
yarn.lock
package-lock.json
test
coverage
.nyc_output
.cache
docs
@@ -1 +0,0 @@
package-lock=false
@@ -1,47 +0,0 @@
# artplayer-plugin-backlight
Backlight plugin for ArtPlayer
## Demo
[Checkout the demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight) from Github Pages
## Install
Install with `npm`
```bash
$ npm install artplayer-plugin-backlight
```
Or install with `yarn`
```bash
$ yarn add artplayer-plugin-backlight
```
```js
import artplayerPluginBacklight from 'artplayer-plugin-backlight';
```
Or umd builds are also available
```html
<script src="artplayer-plugin-backlight.js"></script>
```
Will expose the global variable to `window.artplayerPluginBacklight`.
## Usage
```js
var art = new Artplayer({
container: '.artplayer-app',
url: 'path/to/video.mp4',
plugins: [artplayerPluginBacklight],
});
```
## License
MIT © [Harvey Zack](https://sleepy.im/)
@@ -1,8 +0,0 @@
/*!
* artplayer-plugin-backlight.js v4.0.0
* Github: https://github.com/zhw2590582/ArtPlayer#readme
* (c) 2017-2021 Harvey Zack
* Released under the MIT License.
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).artplayerPluginBacklight=e()}(this,(function(){"use strict";function t(t){for(var e=[],o=0;o<10;o+=1)for(var n=0;n<5;n+=1)0!==o&&9!==o&&0!==n&&4!==n||e.push(t(o,n,10,5));return e}return function(e){var o=e.constructor.utils.setStyles,n=e.template,a=n.$player,i=n.$video,r=e.player,c=document.createElement("div");c.classList.add("artplayer-backlight"),o(c,{position:"absolute",zIndex:9,left:0,top:0,right:0,bottom:0,width:"100%",height:"100%"});var l,s=(l=c,t((function(t,e,o,n){var a=document.createElement("div");return a.style.position="absolute",a.style.left="".concat(100*t/o,"%"),a.style.top="".concat(100*e/n,"%"),a.style.width="".concat(100/o,"%"),a.style.height="".concat(100/n,"%"),a.style.webkitBorderRadius="50%",a.style.borderRadius="50%",a.style.webkitTransition="all .2s ease",a.style.transition="all .2s ease",l.appendChild(a),{$box:a,left:0===t,right:t===o-1,top:0===e,bottom:e===n-1}}))),u=document.createElement("canvas");return a.insertBefore(c,i),function o(){setTimeout((function(){if(r.playing){var n=i.clientWidth,a=i.clientHeight,c=function(e,o,n,a){var i=e.getContext("2d");return e.width=n,e.height=a,i.drawImage(o,0,0),t((function(t,e,o,r){for(var c=n/o,l=a/r,s=t*c,u=e*l,d=i.getImageData(s,u,c,l).data,f=0,h=0,p=0,g=0,y=d.length;g<y;g+=4)f+=d[g],h+=d[g+1],p+=d[g+2];return{r:f=Math.floor(f/(d.length/4)),g:h=Math.floor(h/(d.length/4)),b:p=Math.floor(p/(d.length/4))}}))}(u,i,n,a);c.forEach((function(t,e){var o=t.r,n=t.g,a=t.b,i=s[e],r=i.$box,c=i.left,l=i.right,u=i.top,d=i.bottom,f=c?"-64px":l?"64px":"0",h=u?"-64px":d?"64px":"0";r.style.webkitBoxShadow="rgb(".concat(o,", ").concat(n,", ").concat(a,") ").concat(f," ").concat(h," 128px"),r.style.boxShadow="rgb(".concat(o,", ").concat(n,", ").concat(a,") ").concat(f," ").concat(h," 128px")}))}e.isDestroy||o()}),200)}(),{name:"artplayerPluginBacklight"}}}));
@@ -1,25 +0,0 @@
{
"name": "artplayer-plugin-backlight",
"version": "4.0.0",
"expose": "artplayerPluginBacklight",
"description": "Backlight plugin for ArtPlayer",
"main": "dist/artplayer-plugin-backlight.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
},
"keywords": [
"video",
"player"
],
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
},
"homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
"gitHead": "5ea211ef738351668e4acace326af4ff6947e2ee"
}
@@ -1,115 +0,0 @@
function matrixCallback(callback) {
const result = [];
const x = 10;
const y = 5;
for (let xIndex = 0; xIndex < x; xIndex += 1) {
for (let yIndex = 0; yIndex < y; yIndex += 1) {
if (xIndex === 0 || xIndex === x - 1 || yIndex === 0 || yIndex === y - 1) {
result.push(callback(xIndex, yIndex, x, y));
}
}
}
return result;
}
function getColors($canvas, $video, width, height) {
const ctx = $canvas.getContext('2d');
$canvas.width = width;
$canvas.height = height;
ctx.drawImage($video, 0, 0);
return matrixCallback((xIndex, yIndex, x, y) => {
const itemW = width / x;
const itemH = height / y;
const itemX = xIndex * itemW;
const itemY = yIndex * itemH;
const { data } = ctx.getImageData(itemX, itemY, itemW, itemH);
let r = 0;
let g = 0;
let b = 0;
for (let i = 0, l = data.length; i < l; i += 4) {
r += data[i];
g += data[i + 1];
b += data[i + 2];
}
r = Math.floor(r / (data.length / 4));
g = Math.floor(g / (data.length / 4));
b = Math.floor(b / (data.length / 4));
return { r, g, b };
});
}
function creatMatrix(parent) {
return matrixCallback((xIndex, yIndex, x, y) => {
const $box = document.createElement('div');
$box.style.position = 'absolute';
$box.style.left = `${(xIndex * 100) / x}%`;
$box.style.top = `${(yIndex * 100) / y}%`;
$box.style.width = `${100 / x}%`;
$box.style.height = `${100 / y}%`;
$box.style.webkitBorderRadius = '50%';
$box.style.borderRadius = '50%';
$box.style.webkitTransition = 'all .2s ease';
$box.style.transition = 'all .2s ease';
parent.appendChild($box);
return {
$box,
left: xIndex === 0,
right: xIndex === x - 1,
top: yIndex === 0,
bottom: yIndex === y - 1,
};
});
}
function artplayerPluginBacklight(art) {
const { setStyles } = art.constructor.utils;
const {
template: { $player, $video },
player,
} = art;
const $backlight = document.createElement('div');
$backlight.classList.add('artplayer-backlight');
setStyles($backlight, {
position: 'absolute',
zIndex: 9,
left: 0,
top: 0,
right: 0,
bottom: 0,
width: '100%',
height: '100%',
});
const matrix = creatMatrix($backlight);
const $canvas = document.createElement('canvas');
$player.insertBefore($backlight, $video);
(function loop() {
setTimeout(() => {
if (player.playing) {
const { clientWidth, clientHeight } = $video;
const colors = getColors($canvas, $video, clientWidth, clientHeight);
colors.forEach(({ r, g, b }, index) => {
const { $box, left, right, top, bottom } = matrix[index];
// eslint-disable-next-line no-nested-ternary
const x = left ? '-64px' : right ? '64px' : '0';
// eslint-disable-next-line no-nested-ternary
const y = top ? '-64px' : bottom ? '64px' : '0';
$box.style.webkitBoxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
$box.style.boxShadow = `rgb(${r}, ${g}, ${b}) ${x} ${y} 128px`;
});
}
if (!art.isDestroy) {
loop();
}
}, 200);
})();
return {
name: 'artplayerPluginBacklight',
};
}
export default artplayerPluginBacklight;
@@ -1,9 +0,0 @@
node_modules
.DS_Store
yarn.lock
package-lock.json
test
coverage
.nyc_output
.cache
docs
-1
View File
@@ -1 +0,0 @@
package-lock=false
-37
View File
@@ -1,37 +0,0 @@
# artplayer-plugin-github
Danmu plugin for ArtPlayer
## Demo
[Checkout the demo](https://artplayer.org/?libs=./uncompiled/artplayer-tool-github.js%0A./uncompiled/artplayer-plugin-danmuku.js&example=github) from Github Pages
## Install
Install with `npm`
```bash
$ npm install artplayer-plugin-github
```
Or install with `yarn`
```bash
$ yarn add artplayer-plugin-github
```
```js
import ArtplayerToolGithub from 'artplayer-plugin-github';
```
Or umd builds are also available
```html
<script src="artplayer-plugin-github.js"></script>
```
Will expose the global variable to `window.ArtplayerToolGithub`.
## License
MIT © [Harvey Zack](https://sleepy.im/)
@@ -1,8 +0,0 @@
/*!
* artplayer-tool-github.js v4.0.0
* Github: https://github.com/zhw2590582/ArtPlayer#readme
* (c) 2017-2021 Harvey Zack
* Released under the MIT License.
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).ArtplayerToolGithub=e()}(this,(function(){"use strict";"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;var t={exports:{}};return function(t,e){t.exports=function(){var t,e=function(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t},r=function(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable})))),o.forEach((function(r){e(t,r,n[r])}))}return t},n=(function(t){var e=function(t){var e,r=Object.prototype,n=r.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",c=o.toStringTag||"@@toStringTag";function u(t,e,r,n){var o=e&&e.prototype instanceof d?e:d,i=Object.create(o.prototype),a=new j(n||[]);return i._invoke=function(t,e,r){var n=f;return function(o,i){if(n===l)throw new Error("Generator is already running");if(n===p){if("throw"===o)throw i;return S()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=O(a,r);if(c){if(c===y)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(n===f)throw n=p,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n=l;var u=s(t,e,r);if("normal"===u.type){if(n=r.done?p:h,u.arg===y)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n=p,r.method="throw",r.arg=u.arg)}}}(t,r,a),i}function s(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=u;var f="suspendedStart",h="suspendedYield",l="executing",p="completed",y={};function d(){}function g(){}function v(){}var m={};m[i]=function(){return this};var w=Object.getPrototypeOf,b=w&&w(w(P([])));b&&b!==r&&n.call(b,i)&&(m=b);var x=v.prototype=d.prototype=Object.create(m);function k(t){["next","throw","return"].forEach((function(e){t[e]=function(t){return this._invoke(e,t)}}))}function L(t){var e;this._invoke=function(r,o){function i(){return new Promise((function(e,i){!function e(r,o,i,a){var c=s(t[r],t,o);if("throw"!==c.type){var u=c.arg,f=u.value;return f&&"object"==typeof f&&n.call(f,"__await")?Promise.resolve(f.__await).then((function(t){e("next",t,i,a)}),(function(t){e("throw",t,i,a)})):Promise.resolve(f).then((function(t){u.value=t,i(u)}),(function(t){return e("throw",t,i,a)}))}a(c.arg)}(r,o,e,i)}))}return e=e?e.then(i,i):i()}}function O(t,r){var n=t.iterator[r.method];if(n===e){if(r.delegate=null,"throw"===r.method){if(t.iterator.return&&(r.method="return",r.arg=e,O(t,r),"throw"===r.method))return y;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return y}var o=s(n,t.iterator,r.arg);if("throw"===o.type)return r.method="throw",r.arg=o.arg,r.delegate=null,y;var i=o.arg;return i?i.done?(r[t.resultName]=i.value,r.next=t.nextLoc,"return"!==r.method&&(r.method="next",r.arg=e),r.delegate=null,y):i:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,y)}function _(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function j(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(_,this),this.reset(!0)}function P(t){if(t){var r=t[i];if(r)return r.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,a=function r(){for(;++o<t.length;)if(n.call(t,o))return r.value=t[o],r.done=!1,r;return r.value=e,r.done=!0,r};return a.next=a}}return{next:S}}function S(){return{value:e,done:!0}}return g.prototype=x.constructor=v,v.constructor=g,v[c]=g.displayName="GeneratorFunction",t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===g||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,v):(t.__proto__=v,c in t||(t[c]="GeneratorFunction")),t.prototype=Object.create(x),t},t.awrap=function(t){return{__await:t}},k(L.prototype),L.prototype[a]=function(){return this},t.AsyncIterator=L,t.async=function(e,r,n,o){var i=new L(u(e,r,n,o));return t.isGeneratorFunction(r)?i:i.next().then((function(t){return t.done?t.value:i.next()}))},k(x),x[c]="Generator",x[i]=function(){return this},x.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=P,j.prototype={constructor:j,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sentLine truncated
@@ -1,28 +0,0 @@
{
"name": "artplayer-tool-github",
"version": "4.0.0",
"expose": "ArtplayerToolGithub",
"description": "Github tool for ArtPlayer",
"main": "dist/artplayer-tool-github.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/zhw2590582/ArtPlayer.git"
},
"keywords": [
"video",
"player"
],
"author": "Harvey Zack <laozhaochaguan@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/zhw2590582/ArtPlayer/issues"
},
"homepage": "https://github.com/zhw2590582/ArtPlayer#readme",
"dependencies": {
"issues-danmuku": "latest"
},
"gitHead": "5ea211ef738351668e4acace326af4ff6947e2ee"
}
@@ -1,3 +0,0 @@
import ArtplayerToolGithub from 'issues-danmuku';
export default ArtplayerToolGithub;