日志
- 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
:
还需要在共享
设置中允许使用Sharing Path:
对于某个视频,可以这样获得它的链接:
内嵌视频
首先,我们添加额外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>
-
width 和 height:指定视频的宽度和高度。例如:
<video width="640" height="360">...</video>
-
controlslist:指定要显示的控制按钮。可以设置的值有: “nodownload“:禁用下载按钮; “nofullscreen“:禁用全屏按钮;”noremoteplayback“:禁用远程播放(通过蓝牙或类似设备)。例如:
<video controlslist="nodownload nofullscreen">...</video>
小结
Nextcloud对Inframe的支持还是不错的。对于iframe外观没有要求的小伙伴可以考虑!
更多Nextcloud玩法敬请期待喽!
参考
- Nextcloud 19 Server: Allow iframe / embedding from external Domains
- Embed link-shared video in WordPress?:介绍了Sharing Path应用。
---------------
完结,撒花!如果您点一下广告,可以养活苯苯😍😍😍