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. 00.嵌入式笔记——初识make工具和Makefile文件

    1. make工具和Makefile文件 make是解决大工程编译的工具,描述哪些文件需要编译.哪些需要重新编译的文件就叫做 Makefile,Makefile 就跟脚本文件一样,Makefile 里 ...

  2. ADALM-Pluto修改IP地址

    在 GNURadio 中使用 ADALM-Pluto(以下简称Pluto)模块是以 IP 地址为基础进行通信的,而固定的 IP 地址 192.168.2.1 导致一台电脑无法使用多个 Pluto,因此 ...

  3. 载誉而归!天翼云荣获第23届中国IT用户满意度大会多项殊荣

    10月25日,2024第23届中国IT用户满意度大会暨首届工业产品满意度交流会在北京举行.现场揭晓"2024中国IT用户满意度征集结果",天翼云凭借领先的产品技术.完善的客户服务以 ...

  4. NFS v3及v4协议区别

    本文分享自天翼云开发者社区<NFS v3及v4协议区别>,作者:章****凯 NFS v4相比v3,有部分功能的增强,如果应用需要实现如下功能,则必须使用NFS v4(建议和应用侧确实是否 ...

  5. 在IDEA如何使用JProfiler性能分析

    一.下载地址 https://www.ej-technologies.com/download/jprofiler/files 版本:11 激活码:L-J11-Everyone#speedzodiac ...

  6. hbase - [04] java访问hbase

    需要导入jar包 $HBASE_HOME/lib下的所有jar包 $HADOOP_HOME/share/hadoop/common的所有jar包 package com.harley.hbase.te ...

  7. 关于Processing开发应用及发布分享的一些经验分享

    从2015年10月份开始接触Processing,到现在的2021年9月底,足足有6年了!笔者会竭尽全力把所有学到的知识.经验分享出来.这篇是关于Processing开发应用及发布分享的一些内容,可能 ...

  8. C#短链接生成方法

    public class Program { static void Main() { Random rd = new Random(); for (int i = 0; i < 10; i++ ...

  9. 自己写的第一个java项目!

    项目名为"零钱通" 细节参考 [零基础 快速学Java]韩顺平 零基础30天学会Java 基本版: 1 package project; 2 3 import java.text. ...

  10. Selenium Webdriver 介绍

    在前两篇文章中,主要介绍了Selenium IDE 工具及其使用和它的特点,也使用Selenium IDE和Firebug构建了一些脚本.本文,我们开始介绍不同类型的web元素及其定位策略 我们已经非 ...