Skip to content

Commit

Permalink
add code appending?
Browse files Browse the repository at this point in the history
  • Loading branch information
@dixyes
dixyes committed Oct 21, 2017
1 parent c098417 commit b40f834
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 130 deletions.
127 changes: 90 additions & 37 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,28 +36,62 @@ Embed DPlayer([https://github.com/DIYgod/DPlayer](https://github.com/DIYgod/DPla

key can be

'autoplay': autoplay video, not supported by mobile browsers
'theme': theme color, default: #b7daff
'loop': loop play music, default: true
'lang': language, `zh` for Chinese, `en` for English, default: Navigator language
'screenshot': enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin
'hotkey': binding hot key, including left right and Space, default: true
'preload': 'auto', the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
'url': Required, video url
'pic': video cover picture
'api': DPlayer danmaku backend url
'addition': Dplayer danmuku for bilibili
'id': see https://github.com/DIYgod/DPlayer
'token': see https://github.com/DIYgod/DPlayer
'maximum': maximum quantity of danmaku
dplayer options:
'autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited' : bool options, use "yes" "y" "true" "1" "on" or just without value to enable
'preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser' : string arguments
'volume', 'maximum' : number arguments
container options:
'width', 'height' : string, used in container element style
other:
'code' : value of this key will be append to script tag

arguments to DPlayer options mapping:

{
container: "you needn't set this",
autoplay: 'autoplay',
theme: 'theme',
loop: 'loop',
lang: 'lang',
screenshot: 'screenshot',
hotkey: 'hotkey',
preload: 'preload',
logo: 'logo',
volume: 'volume',
mutex: 'mutex',
video: {
url: 'url',
pic: 'pic',
thumbnails: 'thumbnails',
type: 'vidtype',
},
subtitle: {
url: 'suburl',
type: 'subtype',
fontSize: 'subsize',
bottom: 'subbottom',
color: 'subcolor',
},
danmaku: {
id: 'id',
api: 'api',
token: 'token',
maximum: 'maximum',
addition: ['addition'],
user: 'dmuser',
unlimited: 'dmunlimited',
},
icons: 'icons',
contextmenu: 'menu',
}

'width' maximum width of the dplayer wraper
'height' maximum height of the dplayer wraper, you can use this like "height=233px"
see dplayer documents for more infomation.

for example:

{% dplayer "url=http://devtest.qiniudn.com/若能绽放光芒.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=http://dplayer.daoapp.io" "pic=http://devtest.qiniudn.com/若能绽放光芒.png" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
{% dplayer "url=http://devtest.qiniudn.com/若能绽放光芒.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=http://dplayer.donot.help/dplayerpy" "pic=http://devtest.qiniudn.com/若能绽放光芒.png" "id=2622668" "loop=yes" "theme=#FADFA3" "autoplay=false" "width=233px" %}
{% dplayer 'url=some.mp4' "id=someid" "api=https://api.prprpr.me/dplayer/" "addition=/some.json" 'code=player.on("loadstart",function(){console.log("loadstart")})' "autostart" %}

## Customization

Expand All @@ -71,28 +105,47 @@ If any issue occurs, tell me via issue, use a hexo raw tag like below to use dpl
<div id="player1" class="dplayer"></div>
<script src="dist/DPlayer.min.js"></script><!-- use your path -->
<script>
var option = {
element: document.getElementById('player1'), // Optional, player element
autoplay: false, // Optional, autoplay video, not supported by mobile browsers
theme: '#FADFA3', // Optional, theme color, default: #b7daff
loop: true, // Optional, loop play music, default: true
lang: 'zh', // Optional, language, `zh` for Chinese, `en` for English, default: Navigator language
screenshot: true, // Optional, enable screenshot function, default: false, NOTICE: if set it to true, video and video poster must enable Cross-Origin
hotkey: true, // Optional, binding hot key, including left right and Space, default: true
preload: 'auto', // Optional, the way to load music, can be 'none' 'metadata' 'auto', default: 'auto'
video: { // Required, video info
url: '若能绽放光芒.mp4', // Required, video url
pic: '若能绽放光芒.png' // Optional, music picture
var dp = new DPlayer({{
container: document.getElementById('dplayer'),
autoplay: false,
theme: '#FADFA3',
loop: true,
screenshot: true,
hotkey: true,
logo: 'logo.png',
volume: 0.2,
mutex: true,
video: {
url: 'demo.mp4',
pic: 'demo.png',
thumbnails: 'thumbnails.jpg',
type: 'auto'
},
danmaku: { // Optional, showing danmaku, ignore this option to hide danmaku
id: '9E2E3368B56CDBB4', // Required, danmaku id, NOTICE: it must be unique, can not use these in your new player: `https://dplayer.daoapp.io/list`
api: 'https://dplayer.daoapp.io/', // Required, danmaku api
token: 'tokendemo', // Optional, danmaku token for api
maximum: 1000 // Optional, maximum quantity of danmaku
addition: ['https://dplayer.daoapp.io/bilibili?aid=4157142'] // Optional, additional danmaku, see: `Bilibili 弹幕支持`
}
}
var dp = new DPlayer(option);
subtitle: {
url: 'webvtt.vtt',
type: 'webvtt',
fontSize: '25px',
bottom: '10%',
color: '#b7daff'
},
danmaku: {
id: 'demo',
api: 'https://api.prprpr.me/dplayer/',
token: 'demo',
maximum: 3000,
user: 'DIYgod',
margin: {
bottom: '15%'
},
unlimited: true
},
contextmenu: [
{
text: 'custom contextmenu',
link: 'https://github.com/MoePlayer/DPlayer'
}
]
});
</script>
{% endraw %}

Expand Down
188 changes: 96 additions & 92 deletions index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const fs = require('hexo-fs'),
urlFn = require('url'),
path = require('path'),
srcDir = path.dirname(require.resolve('dplayer')),
mark = "<!-- dplayer used1 -->",
mark = '<!-- dplayer used1 -->',
scriptDir = '/assets/js/', //change this to change js and css dir
styleDir = '/assets/css/',
files = [
Expand All @@ -30,7 +30,7 @@ String.prototype.replaceAll = function(search, replacement) {
};

var counter = 0,
conf = hexo.config["hexo-tag-dplayer"] || {},
conf = hexo.config['hexo-tag-dplayer'] || {},
tbIns=[];

if (!conf.cdn){
Expand All @@ -43,7 +43,7 @@ if (!conf.cdn){
}
fs.access(filePath, (fs.constants || fs).R_OK , (err) => {
if(err){
console.log("INFO hexo-tag-dplayer: "+item[0]+" is not found in this version of dplayer, skip it.");
console.log('INFO hexo-tag-dplayer: '+item[0]+' is not found in this version of dplayer, skip it.');
} else {
hexo.extend.generator.register(path.posix.join(destPath, item[0]), (_) => {
return {
Expand All @@ -63,18 +63,18 @@ hexo.extend.filter.register('after_render:html', (str, data) => {
//console.log(data);
if(!data.onRenderEnd && str.includes(mark)){ //make sure dplayer used in final html
var target = conf.cdn || tbIns,
s = str.replaceAll(mark,"");
s = str.replaceAll(mark,'');
target.forEach(item => {
if (item.endsWith(".css")) {
var tag = util.htmlTag("link", {rel: 'stylesheet', type: 'text/css', href: item }, "");
s = s.substring(0,s.lastIndexOf("</body>"))+tag+s.substring(str.lastIndexOf("</body>"));
}else if (item.endsWith(".js")) {
var tag = util.htmlTag("script", {src: item}, "");
s = s.substring(0,s.indexOf("</head>"))+tag+s.substring(str.indexOf("</head>"));
}else if (item.endsWith(".map")) {
if (item.endsWith('.css')) {
var tag = util.htmlTag('link', {rel: 'stylesheet', type: 'text/css', href: item }, '');
s = s.substring(0,s.lastIndexOf('</body>'))+tag+s.substring(str.lastIndexOf('</body>'));
}else if (item.endsWith('.js')) {
var tag = util.htmlTag('script', {src: item}, '');
s = s.substring(0,s.indexOf('</head>'))+tag+s.substring(str.indexOf('</head>'));
}else if (item.endsWith('.map')) {
//do nothing when sorce map used
}else{
console.log("INFO hexo-tag-dplayer: unknown tile type of cdnfile:"+item);
console.log('INFO hexo-tag-dplayer: unknown tile type of cdnfile:'+item);
}
})
//console.log(s)
Expand All @@ -83,99 +83,103 @@ hexo.extend.filter.register('after_render:html', (str, data) => {
})



// {% dplayer key=value ... %}
hexo.extend.tag.register('dplayer', function(args) {
let url, api, loop, autoplay, theme, pic, did, token, screenshot, lang, maximum, hotkey, preload, width, height, addition;
var id = 'dplayer' + (counter++);
args.forEach(item => {
const k = item.split('=')[0],
v = item.split('=').length === 1 || item.slice(item.indexOf('=')+1);
switch(k){
case 'autoplay':
autoplay = v == "true" | v === "yes" | v === "1" | v === true;
break;
case 'theme':
theme = v === true ? "" : v ;
break;
case 'loop':
loop = v == "true" | v === "yes" | v === "1" | v === true;
break;
case 'lang':
lang = v === true ? "" : v ;
break;
case 'screenshot':
screenshot = v == "true" | v === "yes" | v === "1" | v === true;
break;
case 'hotkey':
hotkey = v == "true" | v === "yes" | v === "1" | v === true;
break;
case 'preload':
preload = v === true ? "" : v ;
break;
case 'url':
url = v === true ? "" : v ;
break;
case 'pic':
pic = v === true ? "" : v ;
break;
case 'api':
api = v === true ? "" : v ;
break;
case 'id':
did = v === true ? "" : v ;
break;
case 'token':
token = v === true ? "" : v ;
break;
case 'maximum':
maximum = v === true ? "" : v ;
break;
case 'width':
width = v === true ? "" : v ;
break;
case 'height':
height = v === true ? "" : v ;
break;
case 'addition':
addition = v === true ? "" : v ;
break;
hexo.extend.tag.register('dplayer', (args) => {

const conf = (hexo.config['hexo-tag-dplayer'] || {})['default'] || {};

var id = 'dplayer' + (counter++), opt = {};

for (var i in args) {
var k = args[i].split('=')[0],
v = args[i].slice(args[i].indexOf('=')+1);
if (['autoplay', 'loop', 'screenshot', 'hotkey', 'mutex', 'dmunlimited'].indexOf(k) >= 0){
// bool
v = v.toLowerCase();
opt[k] = ['true', 'yes', '1', 'y', 'on', true].indexOf(v) >= 0;
} else if (['preload', 'theme', 'lang', 'logo', 'url', 'pic', 'thumbnails', 'vidtype', 'suburl', 'subtype', 'subbottom', 'subcolor', 'subcolor', 'id', 'api', 'token', 'addition', 'dmuser', 'width', 'height', 'code'].indexOf(k) >= 0){
// string
opt[k] = v;
} else if (['volume', 'maximum'].indexOf(k) >= 0){
// number
opt[k] = Number(v) || undefined;
} else if (['yet not implemented'].indexOf(k) >= 0){
// native
continue;
}
})
}

var raw = '<div id="'+ id + '" class="dplayer" style="margin-bottom: 20px;'+(height?" width:"+width+";":"")+(height?" height:"+height+";":"")+'"></div>';
const width = opt.width || conf.width,
height = opt.height || conf.height;
var url = opt.url || conf.url;
var raw = '<div id="'+ id + '" class="dplayer" style="margin-bottom: 20px;'+(width ?' width:'+width+';':'')+(height?' height:'+height+';':'')+'"></div>';
if(url != undefined){
if (hexo.config["post_asset_folder"] == true ){
if (hexo.config['post_asset_folder'] == true ){
//for #10, if post_asset_folder is enable, regard url as relative url
if (! (url.startsWith("https://") || url.startsWith("http://") || url.startsWith("/"))){
if (! (url.startsWith('https://') || url.startsWith('http://') || url.startsWith('/'))){
var PostAsset = hexo.model('PostAsset');
var asset = PostAsset.findOne({post: this._id, slug: url});
if (!asset) return "bad asset path...";
url = urlFn.resolve(hexo.config.root, asset.path);
if (!asset) return 'bad asset path...';
opt.url = urlFn.resolve(hexo.config.root, asset.path);
}
}
raw += '<script>var '+ id + ' = new DPlayer('+
raw += '<script>var player = new DPlayer(' +
JSON.stringify({
element: "document.getElementById('')",
autoplay: autoplay,
theme: theme,
loop: loop,
lang: ((lang == 'zh' | lang == 'en') ? lang : undefined),
screenshot: screenshot,
hotkey: hotkey,
preload: preload,
//element: "document.getElementById('')",
container: "document.getElementById('')",
autoplay: 'autoplay',
theme: 'theme',
loop: 'loop',
lang: 'lang',
screenshot: 'screenshot',
hotkey: 'hotkey',
preload: 'preload',
logo: 'logo',
volume: 'volume',
mutex: 'mutex',
video: {
url: url,
pic: pic
url: 'url',
pic: 'pic',
thumbnails: 'thumbnails',
type: 'vidtype',
},
subtitle: {
url: 'suburl',
type: 'subtype',
fontSize: 'subsize',
bottom: 'subbottom',
color: 'subcolor',
},
danmaku: (api == undefined ? undefined :{
api: api,
id: did,
token: token,
maximum: maximum,
addition: (addition == undefined ? undefined : [addition] )
})
danmaku: {
id: 'id',
api: 'api',
token: 'token',
maximum: 'maximum',
addition: ['addition'],
user: 'dmuser',
unlimited: 'dmunlimited',
},
icons: 'icons',
contextmenu: 'menu',
},(k,v)=>{
//console.log("k",k,"v",v,"?",opt[k],"?a", conf[k])
if (typeof v === 'string') {
if (v !== "document.getElementById('')"){
return opt[v] || conf[v];
} else {
return v;
}
} else if (k === "subtitle" && !(opt.suburl || conf.suburl)) {
return undefined;
} else if (k === "danmaku" && !(opt.api || conf.api)) {
return undefined;
} else {
return v;
}
}).replace("\"document.getElementById('')\"",'document.getElementById("'+ id +'")') +
');</script>';
');' + (opt.code || conf.code || '') + '</script>';
//console.log(opt.code,conf.code,(opt.code || conf.code || ''))
}
else{
raw += '<p>no url specified, no dplayer _(:3」∠)_</p>';
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "hexo-tag-dplayer",
"version": "0.2.1",
"version": "0.3.0",
"description": "Embed dplayer in Hexo posts/pages",
"main": "index.js",
"scripts": {
Expand Down

0 comments on commit b40f834

Please sign in to comment.