黑群晖 篇十九:运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

2021-01-22 20:04:30 14点赞 56收藏 7评论

是返乡过年?还是就地过年?最新一届#双面过节指南#开始啦!本次征稿活动分为A面返乡和B面就地,大家可以根据自己的情况,分享自己的春节攻略,优秀的投稿文章还有可能能获得优厚的大奖哦,快点击查看活动详情<<<

创作立场声明:分享软件操作过程

今天和大家分享的是在typecho中加入视频和音乐



我们先看效果。

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

插入的b站视频,在博客网页里只能看360p,选择其它分辨率会跳转到b站网页。

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

1.插入音乐

在音乐客户端那里点击“分享”,复制链接,在网页端打开

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

在打开的网页里选择“生成外链播放器”

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

默认的就是这种样子。

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

播放器的样式有三种可以选,同时可以选择是否自动播放。

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

直接复制代码,然后在typecho里撰写文章,复制粘贴就可以看到效果。

设为头图

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

搞定

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

2.插入视频

视频会略微麻烦一点,也是可以这样直接复制代码粘贴过来就行,但是那样会比较难看,是一个小窗口,我想弄漂亮一点,所以需要设置一下CSS。

而我用的免费主题pinghsu是没有这个功能的(handsome主题是有的,某些主题也会有),所以需要用到一个插件CustomCssAndJs

这个插件下载之后发放到typecho根目录usr-plugins下面

CustomCssAndJs下载链接

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

接着在控制台-插件管理中启用。

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

进入这个插件的设置里,在css那里输入以下代码

/*视频挂载*/

.iframe_video {

position: relative;

width: 100%;

}

@media only screen and (max-width: 767px) {

.iframe_video {

height: 15em;

}

}

@media only screen and (min-width: 768px) and (max-width: 991px) {

.iframe_video {

height: 20em;

}

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

.iframe_video {

height: 30em;

}

}

@media only screen and (min-width: 1200px) {

.iframe_video {

height: 40em;

}

}

.iframe_cross {

position: relative;

width: 100%;

height: 0;

padding-bottom: 75%

}

.iframe_cross iframe {

position: absolute;

width: 100%;

height: 100%;

left: 0;

top: 0

}

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

视频的接入,在b站视频下方的分享那复制代码

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

再粘贴到文章里,然后在

粘贴的文本里,添加这个代码class="iframe_video"

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

发布之后就是一个比较漂亮的界面。

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

如果不设置css,直接粘贴视频的代码,效果是这样的。

运行在群晖上的【typecho】个人博客中插入视频播放器、音乐播放器演示

以上就是本文的全部内容。

如果本文对您有参考价值,可以关注、点赞、收藏、打赏、评论来支持作者,十分感谢!

展开 收起

Synology 群晖 DS220J 2盘位NAS (RTD1296、512MB)

Synology 群晖 DS220J 2盘位NAS (RTD1296、512MB)

901.55元起

Synology 群晖 DS220+ 双盘位NAS网络存储服务器 黑色

Synology 群晖 DS220+ 双盘位NAS网络存储服务器 黑色

2750元起

Synology 群晖 DS420+ 四盘位NAS网络存储服务器 黑色

Synology 群晖 DS420+ 四盘位NAS网络存储服务器 黑色

3950元起

Synology 群晖 DS1621+ 六盘位NAS(锐龙4核、4G、无硬盘)

Synology 群晖 DS1621+ 六盘位NAS(锐龙4核、4G、无硬盘)

7170元起

Synology 群晖 DS420j 4盘位NAS (RTD1296 、1GB)

Synology 群晖 DS420j 4盘位NAS (RTD1296 、1GB)

2580元起

Synology 群晖 DS120j 单盘位NAS (A3720、512MB)

Synology 群晖 DS120j 单盘位NAS (A3720、512MB)

769元起

Synology 群晖 DS720+ 2盘位NAS (J4125、2GB)

Synology 群晖 DS720+ 2盘位NAS (J4125、2GB)

3650元起

Synology 群晖 DS218 2盘位NAS (RTD1296、2GB)

Synology 群晖 DS218 2盘位NAS (RTD1296、2GB)

2170元起

群晖(Synology)DS1821+ 企业级8盘位NAS 网络存储服务器 (无内置硬盘 )

群晖(Synology)DS1821+ 企业级8盘位NAS 网络存储服务器 (无内置硬盘 )

8100元起

Synology 群晖 DS418 4盘位NAS (RTD1296、2GB)

Synology 群晖 DS418 4盘位NAS (RTD1296、2GB)

3270元起

Synology 群晖 DS1819+ 8盘位NAS网络存储器

Synology 群晖 DS1819+ 8盘位NAS网络存储器

8499元起

Synology 群晖 DS1520+ 5盘位NAS (J4125、8GB)

Synology 群晖 DS1520+ 5盘位NAS (J4125、8GB)

6250元起

Synology 群晖 DS1019+ NAS存储服务器 黑色

Synology 群晖 DS1019+ NAS存储服务器 黑色

5900元起

群晖(Synology)DX517 5盘位NAS网络存储服务器扩充设备 (无内置硬盘)

群晖(Synology)DX517 5盘位NAS网络存储服务器扩充设备 (无内置硬盘)

4050元起

群晖(Synology)RS819 企业级4盘位1U机架式 NAS网络存储服务器 (无内置硬盘 )

群晖(Synology)RS819 企业级4盘位1U机架式 NAS网络存储服务器 (无内置硬盘 )

5100元起

Synology 群晖 DS419slim 4盘位NAS (88F6820、512MB)

Synology 群晖 DS419slim 4盘位NAS (88F6820、512MB)

2950元起
7评论

发表评论请 登录
  • 最新
  • 最热
评论举报

请选择举报理由

相关好价推荐
查看更多好价

相关文章推荐

更多精彩文章
更多精彩文章
最新文章 热门文章
56
扫一下,分享更方便,购买更轻松