hexo-yilia添加DPlayer视频播放插件

2020-02-04

字数统计: 1.8k字 | 阅读时长≈ 9分

引言

如何在博客中插入视频是件麻烦事，视频来源多种多样，优酷、爱奇艺、云空间；视频的相关控件也需要考虑。如果有插件就很方便了。Dplayer就是为这种需求而产生的！

使用Dplayer插件

github: https://github.com/MoePlayer/hexo-tag-dplayer

file

引用

npm install

1	npm install hexo-tag-dplayer --save

Usage

1	{% dplayer key=value ... %}

key can be

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',
}

see dplayer documents for more infomation.

for example:

1
2

{% dplayer "url=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.mp4" "addition=https://dplayer.daoapp.io/bilibili?aid=4157142" "api=https://api.prprpr.me/dplayer/" "pic=https://moeplayer.b0.upaiyun.com/dplayer/hikarunara.jpg" "id=9E2E3368B56CDBB4" "loop=yes" "theme=#FADFA3" "autoplay=false" "token=tokendemo" %}
{% dplayer 'url=some.mp4' "id=someid" "api=https://api.prprpr.me/dplayer/" "addition=/some.json" 'code=player.on("loadstart",function(){console.log("loadstart")})' "autoplay" %}

引用结束

测试

注：以下可能有部分视频链接已失效，详见bug:2.视频链接会失效。

1.简单模式

【J.Fla】J.Fla最新翻唱《Let Her Go》（中英字幕）

1 2	{% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" "loop=yes" "theme=#FADFA3" "autoplay=false"%}

2.设置大小

1 2	{% dplayer "url=https://oss.yansheng.xyz/video/Let%20Her%20Go-J.Fla.mp4" "loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

3.各视频网站测试

注：获取网站视频链接的方法

直接F12审查网页元素可以获取大部分视频链接。
blob:http开头的链接，在调试模式下，切换成手机端，一般都可以获取视频链接。当然也可以尝试使用下面的几种方法（不敢保证肯定可以）。

优酷-blob:http

测试地址：播放量破60亿的神曲就是不一样，Jfla翻唱播放量都能破亿：https://v.youku.com/v_show/id_XNDEzMTQ2Mzc2OA==.html?spm=a2h0k.11417342.soresults.dtitle

1
2

{% dplayer "url=https://ip3909677239.mobgslb.tbcache.com/697527F075E4271B3854E35FD/03000801005D16BE6A7657C5ACCC9273FC634F-4FE4-42BD-9058-BDD737033AD6.mp4?ccode=0501&duration=209&expire=18000&psid=d4651e02fe8648bae7ba5eb90e634aee&ups_client_netip=78efecb2&ups_ts=1580803578&ups_userid=&utid=5dEkFu7TTAoCAaOOg8%2Fdh%2Bzg&vid=XNDEzMTQ2Mzc2OA&vkey=Ae25465c34a3e1d5a0008c52dbd954ac2&bc=2&dre=u21&si=42&ali_redirect_domain=ykugc.cp31.ott.cibntv.net&ali_redirect_ex_ftag=6bb8c51a31829f123b81d2f8f31d62ad1de1e72da5be49b4&ali_redirect_ex_tmining_ts=1580803613&ali_redirect_ex_tmining_expire=3600&ali_redirect_ex_hot=100"
"loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

爱奇艺-blob:http

好像找不到链接！！

测试地址：JFla最新翻唱视频《Havana》中英文字幕版：http://www.iqiyi.com/w_19rye3lv79.html

腾讯视频

测试地址：开口跪！JFla小姐姐逆天翻唱《英雄联盟》主题曲《Legends Never die》(传奇永不熄)，也就听了100遍：https://v.qq.com/x/page/r07217dqdps.html

1
2

{% dplayer "url=https://apd-269733cd84807e39d1c4e3453c172928.v.smtcdns.com/om.tc.qq.com/AUBPmiNNTAT3He9k_05J1HRAM1yZVGlQ-hDZtg0epZFQ/uwMROfz2r57IIaQXGdGnC2ddDmZUA-P9pUvDyp7Vcj06VB05/shg_57576174_50001_208137e9f2843cf7850adcc2052bdd4a.f622.mp4?sdtfrom=v1010&guid=7ae1df42357b9bcea3195ca549ce5531&vkey=4B6DB7E072CA38A41C053A938FA7D1B91D1783ACF46A1356E88C71B8160881DEC88D761C281209C12C1DAB9772F55FB572EA0D675ACA209A621B3BC4789A2D91FEA05680B9EA477C282FC1B4A32BCB1E5EEF5DFCC65AA2A4B2BCB2AB51E54FABD0E1122171184A171FFE7C84CFB1295C720E320BFCE4648EF92358A0BFDAC7FB"
"loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

B站-blob:http

测试地址：【J.Fla】J.Fla最新翻唱《Let Her Go》（中英字幕）:https://www.bilibili.com/medialist/play/ml445525356/

1
2

{% dplayer "url=https://cn-jxnc-cmcc-bcache-07.bilivideo.com/upgcxcode/97/06/37010697/37010697-1-6.mp4?e=ig8euxZM2rNcNbdlhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1580811360&gen=playurl&os=bcache&oi=2028989618&trid=49761c7626084b8b8b97074e119e8a41h&platform=html5&upsig=d5272df25514a59fbdb296cefefcb96c&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=91203456&origin_cdn=ks3" 
"loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

酷狗音乐MV

好像找不到

测试地址：https://www.kugou.com/mvweb/html/mv_1298B160E162FD8DD62176860AC07B0B.html

网易云音乐MV-blob:http

测试地址：J.Fla不插电演唱原创新单《Good Vibe》:https://music.163.com/#/mv?id=10893889

1
2

{% dplayer "url=http://vodkgeyttp8.vod.126.net/cloudmusic/1182/core/91d9/071e7736fb284fe4d7d020a3cf693362.mp4?wsSecret=ff87443a41aebf38eaafd4385b736940&wsTime=1580818343" 
"loop=yes" "theme=#FADFA3" "autoplay=false" "width=854px" "height=480px" %}

bug🐛

1.设置宽高参数后，手机端不能自适应

额外添加样式控制手机端样式H:\Hexo\themes\yilia\source\main.0cf68a.css

@media screen and (max-width: 800px) {
   .dplayer {
		max-width:394.4px;
		max-height:221.6px;
    }
}

2.视频链接会失效

虽然上面提到的方式大部分可以获取视频链接，但是可以发现，这个链接都很长，是“防盗链”（?后面的是查询串，包含各种参数。比如设置时间参数，超时就失效。这是为了防止被频繁访问，造成服务器负担而考虑的）。那怎么解决呢？推荐下面几种方法：

研究防盗链，看能不能让他不失效。好像有点复杂……
自建云空间：根据视频链接下载该视频，然后上传到自己的云空间☁️（七牛云、阿里云等的OSS空间），然后使用自己的链接。（推荐，第一个视频就是我下载后，上传到阿里云OSS的。）
使用视频网站自己的分享渠道：

如：

1	<iframe height=498 width=510 src='https://player.youku.com/embed/XNDEzMTQ2Mzc2OA==' frameborder=0 'allowfullscreen'></iframe>

效果：