gitbook 插件:视频

简介: gitbook 插件:视频

gitbook 插件:视频

文章目录

1. local-video 插件

local-video 插件添加链接描述:使用Video.js 播放本地视频

1.1 安装

npm i gitbook-plugin-local-video

1.2 配置

"plugins": [ "local-video" ]

使用示例:为了使视频可以自适应,我们指定视频的width为100%,并设置宽高比为16:9,如下面所示

{% raw %}
<video id="my-video" class="video-js" controls preload="auto" width="100%"
poster="https://zhangjikai.com/resource/poster.jpg" data-setup='{"aspectRatio":"16:9"}'>
  <source src="https://zhangjikai.com/resource/demo.mp4" type='video/mp4' >
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>
{% endraw %}

另外我们还要再配置下css,即在website.css中加入

.video-js {
    width:100%;
    height: 100%;
}

2. html

<a href="https://www.youtube.com/watch?v=DV72xnlTLd8" target="_blank"><img src="../images/youtube.png" width="250"
alt="IMAGE ALT TEXT HERE" /></a>

3. video-player 插件

github:operatehappy@gitbook-plugin-videoplayer

功能尝试中

3.1 安装

gitbook install

3.2 配置

{
    "plugins": ["video-player"]
}

首先,通过添加以下内容将所需的脚本和样式表添加到您的页面:

{% videoplayerscripts %}{% endvideoplayerscripts %}

您现在可以使用此标签将 MP4 和 WebM 视频添加到您的图书中:

{% videoplayer id="myvideo" width="640" height="480" posterExt="png" %}https://s3.amazonaws.com/gitbooks/myvideo{% endvideoplayer %}

放器将自动加载myvideo.mp4文件以显示 MP4 编码的视频。同样,它将默认myvideo.webm用于 WebM 编码的视频。

4. youtube 插件

youtube 插件是添加youtube视频。

4.1 安装

gitbook install

or

npm i gitbook-plugin-youtube

4.2 配置

{
    "plugins": ["youtube"]
}

4.3 语法

{% youtube %}
https://www.youtube.com/watch?v=-MdyiRH6OAc&t
{% endyoutube %}

4.4 效果

1832b220aa754cd18c504acc7686a560.png

4.5 评论

完美

综合指数:⭐️⭐️⭐️⭐️⭐️

相关文章
|
5月前
|
Web App开发 存储 数据处理
Chrome 下载大文件报错!用 Streamsaver.js 完美填坑
本文探讨了Chrome下载大文件报“网络错误”的原因及解决方案。由于Chrome对Blob数据有大小限制,导致大文件下载失败。通过将responseType改为ArrayBuffer可临时解决1-2G文件问题,但超3G仍会崩溃。最佳方案是使用Streamsaver.js实现流式下载,边接收边保存,避免内存溢出,完美支持超大文件下载。
3371 3
|
6月前
|
设计模式 算法 Java
软考中级软件设计师专项-设计模式篇
备战软考中级软件设计师?本文聚焦高分设计模式模块,详解23种模式的核心意图与场景,结合UML图、Java代码实例及历年真题,覆盖创建型、结构型、行为型三大类,助你打通理论到实战。
548 1
软考中级软件设计师专项-设计模式篇
|
10月前
|
人工智能 弹性计算 JSON
MCP进阶:一键批量搞定MCP工具部署
本文介绍了一种基于阿里云计算巢的一站式MCP工具解决方案,解决了传统MCP工具集成中的效率低下、调用方式割裂和动态管理困难等问题。方案通过标准化协议实现多MCP工具批量部署,提高云资源利用率,并支持OpenAPI与MCP双通道调用,使主流AI助手如Dify、Cherry Studio等无缝接入。内容涵盖背景、原理剖析、部署使用实战及问题排查,最后强调MCP协议作为“通用语言”连接数字与物理世界的重要性。
1946 62
MCP进阶:一键批量搞定MCP工具部署
|
7月前
|
人工智能 供应链 数据可视化
工作流梳理工具实战教程:手把手教你绘制第一张自动化流程图
本文剖析了团队因流程混乱导致重复劳动和效率低下的问题,提出通过工作流梳理提升协作效率的解决方案。总结了流程梳理的六大核心需求,并深度测评了6款主流工具,国内有板栗看板那,国外有kiss flow结合团队规模与需求提供选型建议,助力企业高效落地流程优化。
|
7月前
|
Ubuntu 安全 数据挖掘
揭开Linux系统神秘面纱,选择Centos、Debian、Ubuntu?
CentOS、Debian 和 Ubuntu 三种 Linux 操作系统各具优势和适用场景。CentOS 更适合用于服务器应用,Debian 更适合稳定需求的系统环境,而 Ubuntu 更适合用于桌面操作系统和开发环境等。CentOS 和 Debian 相对保守,重视稳定性和安全性;Ubuntu 侧重更新和更好的可用性,重视用户体验。此外, Ubuntu 在市场上的占有率最高。因此,选择适合自己需求的操作系统非常重要,可以帮助用户提高效率和使用体验。
|
存储 固态存储 应用服务中间件
阿里云服务器租赁价格:实例配置、预留实例券、块存储、带宽、快照最新收费标准
阿里云服务器收费项目有实例价格、预留实例券、专有宿主机、块存储价格、存储容量单位包、带宽价格和快照服务价格,收费模式有包年包月和按量付费模式。2025年阿里云继续推出各种云服务器优惠,本文为大家汇总了2025年阿里云服务器各个收费项目的最新收费标准与云服务器的最新活动价格,以供参考和了解。
1068 24
|
机器学习/深度学习 存储 人工智能
阿里云与零一万物达成战略合作,成立产业大模型联合实验室
阿里云与零一万物达成战略合作,成立“产业大模型联合实验室”。结合双方顶尖研发实力,加速大模型从技术到应用的落地。实验室涵盖技术、业务、人才等板块,通过阿里云百炼平台提供模型服务,针对ToB行业打造全面解决方案,推动大模型在金融、制造、交通等领域的应用,助力AI驱动的产业升级。
874 8
|
关系型数据库 MySQL Nacos
生产环境下的终极指南:在生产环境部署 Nacos 集群和高可用 MySQL 使用 Docker
生产环境下的终极指南:在生产环境部署 Nacos 集群和高可用 MySQL 使用 Docker
1521 0
|
网络协议 API Android开发
手把手教你使用Charles+drony进行抓包
手把手教你使用Charles+drony进行抓包
729 1