Docker系列 深度使用nextcloud(六)在博客中嵌入视频
本文最后更新于 14 天前,如有失效请评论区留言。

本博客用什么VPS?创作不易,请支持苯苯!推荐购买本博客的VIP喔,10元/年即可畅享所有VIP专属内容!也欢迎大佬对本文进行慈善承包(ฅ´ω`ฅ)

日志

  • 2023-05-18:优化nextcloud视频的嵌入教程。

前言

主要的灵感来源于某个知乎用户说TA想要上传视频到自己的博客中。

出于节省流量的考虑,最佳的方案就是将视频上传到公共平台,然后获取iframe脚本进行插入。比如,我要插入视频:【罗翔】我们为什么要读书?

感觉这个效果不错。当然,更加常见的一种个性化嵌入视频至WordPress的方案是使用类似DogeCloud这种CDN的免费视频额度。

不过,也许有某些小伙伴有一些别的要求。比如,他想上传自己的视频到自己的博客,但又不想其它人可以随便引用这个视频。说白了,他想让这个视频的分享权限受到限制。

我搞了一下,发现Nextcloud也可以实现类似效果。下面我们来说一下怎么做吧!

测试环境

还是之前的那个VPS

uname -a # Linux VM-12-8-ubuntu 5.4.0-42-generic #46-Ubuntu SMP Fri Jul 10 00:24:02 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux

docker --version # Docker version 20.10.5, build 55c4c88

docker-compose --version # docker-compose version 1.28.6, build 5db8d86f

Sharing Path

一定要做!

首先,我们要安装一个应用,叫Sharing Path

msedge_Zdc4zGSoqG

还需要在共享设置中允许使用Sharing Path:

msedge_ntQAWJLosH

对于某个视频,可以这样获得它的链接:

msedge_zYG1IVnds3

内嵌视频

首先,我们添加额外CSS定义nextcloud-video类:

/* nextcloud video */
.nextcloud-video{
    width: 100%; 
    background: #000;
    position: relative;
    padding-bottom: 56.25%;  /*需要用padding来维持16:9比例,也就是9除以16*/
    height: 0;
}
.nextcloud-video video{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%
}

然后,在MarkDown里源代码界面插入这个代码:

<div class="nextcloud-video">
    <video controls loop muted>
    <!--在video标签后面加autoplay可以自动播放-->
    <source src="视频(比如mp4)的链接" type="video/mp4">
    </video>
</div>

这样就可以在WordPress博客里分享nextcloud的视频了!这是一些示例:

测试视频01:

测试视频02:

效果还是挺不错的 (ฅ´ω`ฅ)

值得一提的是,HTML5的<video> 标签具有许多参数和属性,可用于控制和自定义视频播放器的行为和外观。以下是一些常用参数:

  • autoplay:自动播放视频。例如:<video autoplay>...</video>

  • controls:显示默认的视频控制条。例如:<video controls>...</video>

  • loop:循环播放视频。例如:<video loop>...</video>

  • muted:静音播放视频。例如:<video muted>...</video>

  • preload:指定视频在页面加载时是否预加载。可以设置的值有:”auto“:自动预加载(默认值);”metadata“:仅预加载视频元数据;”none“:不预加载视频。例如:<video preload="auto">...</video>

  • poster:指定在视频加载之前显示的海报图像。例如:<video poster="poster.jpg">...</video>

  • widthheight:指定视频的宽度和高度。例如:<video width="640" height="360">...</video>

  • controlslist:指定要显示的控制按钮。可以设置的值有: “nodownload“:禁用下载按钮; “nofullscreen“:禁用全屏按钮;”noremoteplayback“:禁用远程播放(通过蓝牙或类似设备)。例如:<video controlslist="nodownload nofullscreen">...</video>

小结

Nextcloud对Inframe的支持还是不错的。对于iframe外观没有要求的小伙伴可以考虑!

更多Nextcloud玩法敬请期待喽!

参考

---------------
完结,撒花!如果您点一下广告,可以养活苯苯😍😍😍

基于m2w 2.0创作。版权声明:除特殊说明,博客文章均为Bensz原创,依据CC BY-SA 4.0许可证进行授权,转载请附上出处链接及本声明。VIP内容严禁转载!由于可能会成为AI模型(如chatGPT)的训练样本,本博客禁止将AI自动生成内容作为文章上传(特别声明时除外)。如有需要,请至学习地图系统学习本博客的教程。加Telegram群可获得更多帮助喔! | 博客订阅:RSS | 广告招租请留言 | 博客VPS | 致谢渺软公益CDN |
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇