import Quill from 'quill'

const BlockEmbed = Quill.import('blots/block/embed')
class VideoBlot extends BlockEmbed {
static create(value) {
let node = super.create()
node.setAttribute('src', value.url)
node.setAttribute('controls', value.controls)
node.setAttribute('width', value.width)
node.setAttribute('height', value.height)
node.setAttribute('webkit-playsinline', true)
node.setAttribute('playsinline', true)
node.setAttribute('x5-playsinline', true)
return node;
} static value(node) {
return {
url: node.getAttribute('src'),
controls: node.getAttribute('controls'),
width: node.getAttribute('width'),
height: node.getAttribute('height')
};
}
} VideoBlot.blotName = 'simple_video'
VideoBlot.tagName = 'video'
Quill.register(VideoBlot) // 使用
this.quill.insertEmbed(range.index, 'simple_video', {
url,
controls: 'controls',
width: '100%',
height: '100%'
})

Quill自定义插入视频video实例的更多相关文章

  1. 借用HTML5 插入视频。音频

    HTML5 规定了一种通过 video 元素来包含视频的标准方法. 插入视频 <video width="320" height="240" contro ...

  2. kindeditor自定义插件插入视频代码

    kindeditor自定义插件插入视频代码 1.添加插件js 目录:/kindeditor/plugins/diy_video/diy_video.js KindEditor.plugin('diy_ ...

  3. C#/VB.NET 向PowerPoint文档插入视频

    如今,Microsoft Office PowerPoint在我们日常生活中的应用已经很广泛了,利用Microsoft Office PowerPoint不仅可以创建演示文稿,还可以在互联网上召开面对 ...

  4. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  5. 如何在html中插入视频

    如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性  用mp4格式 <vid ...

  6. HTML中插入视频

    最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...

  7. Markdown中如何插入视频 > iframe?

    关于Markdown中如何插入视频这一问题   网上众说纷纭,一直也没找到一个确切的答案,想来也是,这些东西毕竟还不算成熟.各种以前提供过的方法现在来讲,可能在更新或是关闭大潮中又没了   而且,Ma ...

  8. H5插入视频兼容主浏览器

    插入视频的方法有很多种,但是有一些方法不兼容. 方法1:DW插入视频利用DW插入的视频为flv格式,操作较简单,但是代码复杂,需要浏览器支持flash插件:火狐浏览器需要手动下载flash插件,比较麻 ...

  9. 页面中插入视频兼容ie8以上的浏览器

    有时候页面中需要插入视频,如果不考虑ie8的话:就是直接用h5标签<video></video>就可以了: 但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种vide ...

  10. JVM系列六(自定义插入式注解器).

    一.概述 从前面 文章 中我们可以了解到,javac 的三个步骤中,程序员唯一能干预的就是注解处理器部分,注解处理器类似于编译器的插件,在这些插件里面,可以读取.修改.添加抽象语法树中的任意元素.因此 ...

随机推荐

  1. NPOI与excelcnv.exe

    在使用NPOI解析一些比较古老的仪器生成的excel文件时,经常会这个错误:The supplied spreadsheet seems to be Excel 5.0/7.0 (BIFF5) for ...

  2. vue平铺日历组件

    vue日历自定义平铺组件 <sy-icon @click="preMon" class="copy-icon" iconClass="iconj ...

  3. 近期最值得关注的AI技术报告与Agent综述!

    写在前面 如题,近期优秀的大模型层出不穷.作为技术人,需要阅读高质量的AI技术报告或论文,并且掌握未来应用趋势.本文将推荐一些高质量的AI技术报告,以及Agent智能体综述. 大模型技术报告 Deep ...

  4. WitAwards 2024荣耀登榜!AOne载誉而归!

    近日,FCIS 2024网络安全创新大会在上海举办.本次大会以"迈向安全服务化时代"为主题,邀请来自全球的网安精英.技术专家.CISO/CSO.白帽子.创业者等展开深度对话,分享与 ...

  5. RAW镜像格式介绍

    本文分享自天翼云开发者社区<RAW镜像格式介绍>,作者:z****n RAW(Raw Disk Image)是一种简单而基本的虚拟化镜像格式,用于存储虚拟机的磁盘内容.它是一种原始的二进制 ...

  6. MWC 2024丨中国电信柯瑞文:建设云网融合的新型数字基础设施

    2月27日,世界互联网大会在2024世界移动通信大会(MWC 2024)期间举办"算力网络"专题论坛.中国电信董事长柯瑞文作题为<建设云网融合的新型数字基础设施>的主旨 ...

  7. 一种提升SQL改写效率的方法

    本文分享自天翼云开发者社区<一种提升SQL改写效率的方法>,作者:唐****律 一.背景 SQL改写是数据库产品中使用比较频繁的一个技术,在大多数产品中的调用频率也非常高,通常对性能的需求 ...

  8. 从零开始的函数式编程(2) —— Church Boolean 编码

    [!quote] 关于λ表达式-- 详见λ表达式 本文导出自Obsidian,可能存在格式偏差(例如链接.Callout等) 本文地址:https://www.cnblogs.com/oberon-z ...

  9. Springboot 3.x 使用PageHelper实现MyBatis分页查询

    开发环境 SpringBoot 3.0.1 Maven 工程 JDK OpenJdk 17.0.6 引入pom依赖 <dependency> <groupId>com.gith ...

  10. 腾讯解禁 QQ 极速版,且看我收集的最全 QQ 各类版本

    因为利益关系,腾讯早就限制QQ极速版的登录了,近日居然解除限制了,面对越来越臃肿的QQ,我给大伙准备了几十个版本的QQ,总有一个适合你. QQ版本合集 给大伙们收集了QQ版本合集,分别有历史版本.精简 ...