Markdown如何嵌套视频

编程学习
3 / 2252

Markdown 嵌套视频方法

iframe 标签嵌套视频

使用 HTML 的 iframe 标签(这里插入的是一个 b 站的视频)

  • Step1:打开 b 站官网,点开自己感兴趣的视频,复制视频源地址

  • Step2: 粘贴视频源地址解析视频,找到外链播放,插入链接

注:

下面是一个解析视频的小程序,找到自己感兴趣的视频以后,直接在这里粘贴解析视频就可以了

示例代码如下

<iframe src="https://xbeibeix.com/api/bilibili/biliplayer/?url=BV1h441137Uc&danmaku=0" 
allowfullscreen="allowfullscreen"
 width="80%" height="350"
 scrolling="no" frameborder="0" 
sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts">
</iframe>

示例:

iframe 标签属性值

属性 描述
align left,top,right,middle,bottom 不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder 10 规定是否显示框架周围的边框。
height pixels% 规定 iframe 的高度。
longdesc URL 规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
sandbox allow-formsallow-same-originallow-scriptsallow-top-navigation 启用一系列对 iframe 中内容的额外限制。
scrolling yesnoauto 规定是否在 iframe 中显示滚动条。
seamless seamless 规定 iframe 看上去像是包含文档的一部分。
src URL 规定在 iframe 中显示的文档的 URL。
srcdoc HTML_code 规定在 iframe > 中显示的页面的 HTML 内容。
width pixels% 定义 iframe 的宽度。

video 标签嵌套视频

示例代码如下

<video id="video" style="width:90%;height:600px;"
 controls="" preload="none" 
poster="http://upos-sz-mirrorhw.bilivideo.com/upgcxcode/65/23/191822365/191822365-1-208.mp4?e=ig8euxZM2rNcNbhBnWdVhwdlhzUHhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1590852105&gen=playurl&os=hwbv&oi=837395164&trid=c31251e0d5a04938899a35b83a5b6563T&platform=html5&upsig=23c96a5562a7fc1cb54fcb980a1bde87&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=580104086&orderid=0,1&logo=80000000">
<source id="mp4" src="http://upos-sz-mirrorhw.bilivideo.com/upgcxcode/65/23/191822365/191822365-1-208.mp4?e=ig8euxZM2rNcNbhBnWdVhwdlhzUHhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1590852105&gen=playurl&os=hwbv&oi=837395164&trid=c31251e0d5a04938899a35b83a5b6563T&platform=html5&upsig=23c96a5562a7fc1cb54fcb980a1bde87&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=580104086&orderid=0,1&logo=80000000"  
type="video/mp4">
</video>


video 标签属性

  1. src: 视频的属性

  2. poster: 视频封面,没有播放时显示的图片

  3. preload: 预加载

  4. autoplay: 自动播放

  5. loop:循环播放

  6. controls: 浏览器自带的控制条

  7. width:视频宽度

  8. height:视频高度

插件分享

下面给大家分享一个插件,方便大家找视频:

库房

库房使用指引

  • 点击打开上面的库房链接,在搜索框中找自己感兴趣的视频

  • 如破冰行动,复制视频链接地址,如下图:

QQ浏览器截图20200602002025.png

  • 复制地址之后,插入到 iframe

代码如下:

<iframe src="https://kf369.cn/v/?flag=2&type=%E5%9B%BD%E4%BA%A7%E5%89%A7&id=62037&wd=%E7%A0%B4%E5%86%B0%E8%A1%8C%E5%8A%A8%E7%94%B5%E8%A7%86%E7%89%88" allowfullscreen="allowfullscreen" 
width="90%" height="600" scrolling="no" 
frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts">
</iframe>

示例:

b 站视频一键分享

  • step1: 打开自己感兴趣 b 站网页版视频,如下图:

QQ浏览器截图20200530222435.png

  • step2: 直接使用 iframe 标签嵌入代码或者复制视频地址,粘贴到上面解析视频的小程序中,然后插入外链地址

注:当视频高度不小于 369px 时,会显示你自己分享 b 站视频的边框和弹幕

代码如下:

<iframe src="//player.bilibili.com/player.html?aid=74477458&bvid=BV1YE411q7fa&cid=127390183&page=1" 
width="80%" height="600" scrolling="no" border="0" 
frameborder="no" framespacing="0" allowfullscreen="true">
 </iframe>

甄穹紫月
Fordkey
维之初·老Designer
回复(3)