Vditor 对视频、音频、站点链接的解析

本贴最后更新于 1625 天前,其中的信息可能已经斗转星移

为了让用户在当前页面可对包含视频、音频的链接直接进行查看,特对以下类型的链接进行了特殊处理。

视频解析

对链接结尾为 .mp4,.m4v,.ogg,.ogv,.webm 的视频将自动解析为 video 标签

音频解析

对链接结尾为 .mp3,.wav,.flac 的音频将自动解析为 audio 标签

站点解析

对 youtu.be/youtube.com,youku.com,qq.com,coub.com,facebook.com,dailymotion.com,bilibili.com,ted.com 站点的视频链接将自动转换为 iframe 标签

方法

Vditor.mediaRender()

示例

http://vditor.b3log.org/demo/preview-render.html

  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    352 引用 • 1815 回帖
  • 开发指南
    8 引用 • 760 回帖
1 操作
Vanessa 在 2020-06-11 11:18:04 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 类似这样的:https://weibo.com/tv/v/J3HXOnJU1?fid=1034:4508839161036829 https://weibo.com/tv/v/J3HXOnJU1 微博视频不知是否可以支持。

    还有这样的:https://f.video.weibocdn.com/3mTm1OSjlx07DznPCXBS010412010mdA0E010.mp4?label=mp4_720p&template=1276x720.25.0&trans_finger=721584770189073627c6ee9d880087b3&Expires=1590506260&ssig=%2F62YJKREGN&KID=unistore,video 微博原始视频地址。

    1 回复
  • 其他回帖
  • lulu2jinchi 3 评论

    previewRender 里会自动调用 mediaRender,关不掉对视频链接的自动嵌入 iframe 功能,能不能加个配置参数控制一下

    可以参照 previewRender 仿写一个适合自己的 render 方法。
    Vanessa 1
    @Vanessa 感谢您的回复,请问 sv 模式下右侧实时渲染的时候,有没有办法不渲染视频链接呢,就是不调用 mediaRender
    lulu2jinchi
    Vanessa 1
  • cqr 1 评论

    请问要如何关闭音视频链接解析呢

    不调用这个方法就可以了
    Vanessa
  • 我尝试了下,微博视频应该是每次打开微博页面时,会向服务器请求,返回一个类似 https://f.video.weibocdn.com/5FuS2oy7lx07DzVHxYfu01041201POWr0E010.mp4?label=mp4_720p&template=1152x648.25.0&trans_finger=721584770189073627c6ee9d880087b3&Expires=1590551933&ssig=zy0UTVO2O8&KID=unistore,video 这样的有指纹请求的视频链接。通过 idm 可以抓到这个链接并下载。这个链接的有效性应该是几个小时。

    如果要做的话,就需要后台做一个动态的解析框架,获得这样一个链接,再交给前台播放。我知道的是,酷安 app 支持这样的解析:

    Screenshot20200527110454463com.coolapk.ma.jpg

    但它不开源,还得动手造轮子。如果以后过了一年微博解析规则变化了的话,后台也要更新才行。所以可能不是个性价比高的需求。

    另外一个可选的方式是,使用第三方提供的链接解析 api,例如 https://github.com/videoparse-api/parsehttps://github.com/abbeyokgo/ojbk_jiexi,每次打开博客时,用 javascript 解析得到视频真实链接后,写入文档指定位置。

    1 回复
    2 操作
    HaujetZhao 在 2020-05-27 11:18:53 更新了该回帖
    HaujetZhao 在 2020-05-27 11:17:16 更新了该回帖
  • 查看全部回帖
Vanessa MOD
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 红河