新人下载app,立即提现现金 您的好友 送你现金 去提现

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

爱运动的数码君 01-22 20:04 关注

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

今天和大家分享的是在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】个人博客中插入视频播放器、音乐播放器演示

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

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

展开阅读全文

打开App,享最佳阅读体验
全部评论 (7)
爱运动的数码君
0
01-28 20:22
落的故事: hugo和hexo也挺香的 1
爱运动的数码君: 这是2个插件吗? 2
展开隐藏评论
落的故事: 搞博客的、写的markdown文件渲染成静态网页 3

markdown一直想学习,据说用了之后很高效,尝试过几次,还要学习的东西很多。

落的故事
0
01-25 11:12
落的故事: hugo和hexo也挺香的 1
爱运动的数码君: 这是2个插件吗? 2

搞博客的、写的markdown文件渲染成静态网页

逆流_时光
0
01-25 11:07

可以,学习了

爱运动的数码君
0
01-25 09:36
老男孩折腾记: 这个好,跟着学 1

我也是跟着学的。

爱运动的数码君
0
01-25 09:35
落的故事: hugo和hexo也挺香的 1

这是2个插件吗?

老男孩折腾记
0
01-22 22:06

这个好,跟着学

落的故事
0
01-22 21:51

hugo和hexo也挺香的

打开App,查看更多好文和评论
最新NAS存储优惠
16日0点:QNAP 威联通  TS-451D 四盘位 NAS网络存储服务器(J4025、4GB)
16日0点:QNAP 威联通 TS-451D 四盘位 NAS网络存储服务器(J4025、4GB)

存储设备热度Top2 比上次发布低9%

2129元包邮(双重优惠)
天猫精选 04-14
5 60%
HIKVISION 海康威视 Mage10 个人私有网盘 4TB
HIKVISION 海康威视 Mage10 个人私有网盘 4TB

3期分期免息 4TB大容量

1579元包邮(需用券)
京东 04-13
0 13%
QNAP 威联通 TS-532X 五盘位 NAS 网络存储服务器
QNAP 威联通 TS-532X 五盘位 NAS 网络存储服务器

价格低于双11 多方位散热

1950元包邮
拼多多 04-12
33 86%
猜你喜欢
查看更多
相关好价
相关商品
查看更多热门商品
社区主页 文章详情
14
62
7
你已经点过赞了
新浪微博 QQ空间 微信好友 豆瓣
当前为触屏版
热门搜索