quill的video模块插入的是iframe标签,我们需要的是video标签。

1、定义自己的video模块

declare const require: any;
const Quill = require('quill'); var BlockEmbed = Quill.import('blots/block/embed'); export class Video extends BlockEmbed {
static create(value) {
var node = super.create(value);
node.setAttribute('src', value);
node.setAttribute('width', '100%');
node.setAttribute("controls","controls");
return node;
} static value(node) {
return node.getAttribute('src');
}
}
Video.blotName = 'video';
Video.tagName = 'Video';
Video.className = 'ql-video';

2、调用:

import { Video } from './quill-video';

declare var require: any;
const Quill = require('quill');
Quill.register({ 'formats/video': Video }, true);

----------------------踩空分割线------------------

最开始写了下面的代码,倒是变成video标签了,但是不能播放:

var video = Quill.import("formats/video");
video.tagName = "video";
Quill.register(video, true);
console.log(video);

Quill插入html5的video标签的更多相关文章

  1. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  2. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  3. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

  4. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  5. 在使用html5的video标签播放视频时为何只有声音却没有图像

    在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...

  6. 关于HTML5中video标签的奇怪现象

    很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...

  7. HTML5新增video标签及对应属性、API详解

    知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...

  8. 防止html5的video标签在iphone中自动全屏

    问题: 当在iphone中打开html5页面中的video视频时,会默认调取系统播放器,全屏播放视频资源. 解决方式: 1. 首先在html5页面的video标签中添加webkit-playsinli ...

  9. mp4 格式无法使用html5的video标签播放

     只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;

随机推荐

  1. numpy安装-【老鱼学numpy】

    要玩numpy,就得要安装numpy. 安装python 3.6.3 64位 首先需要安装python,安装python的具体方法这里就不细讲了. 可以到官网上下载相应的python版本就可以了,目前 ...

  2. elk安装&集群配置

    ---恢复内容开始--- 这里我用以elasticsearch-5.3.2.kibana-5.3.0.logstash-5.3.0的版本为例: 1.创建elastic用户,这里elasticsearc ...

  3. every循环

    一.语法 var result = myArr.every(function(item, index){ return item>0; }) //全部满足,才为true every方法检测数组中 ...

  4. .net程序员面试小结(内附一些面试题和答案)

    今天下午去面试,面试官和HR小姐姐都很好,没有做面试题,用聊天的方式来交流技术,整个过程很轻松,从中也学到了很多知识. 下面就来总结一下面试过程. 一.深刻了解自己的简历 无论是HR还是技术面试人,首 ...

  5. session 存到memcache里

    web服务器的php session都给memcached ,这样你不管分发器把 ip连接分给哪个web服务器都不会有问题了,配置方法很简单,就在php的配置文件内 增加一条语句就可以了,不过前提你需 ...

  6. C#超简单自定义事件

    我知道你为啥点进来,所以不要犹豫了,立刻马上果断创建控制台项目,直接复制下面精干短小而又强大的代码运行: using System; using System.Collections.Generic; ...

  7. idea 自定义注释模板

    一.类注释模板 打开Preferences Editor -> File and Code Templates -> Files -> Class 效果图: 注释模板 /** * @ ...

  8. 分布式mongodb分片集群

    本博客先简单介绍mongodb入门以及单实例以及mongodb的主从(主从官网是不提倡用的,原因后续介绍),副本集,分片. 第一:nosql介绍: 数据库分为关系型数据库与非关系型数据库,及具代表性的 ...

  9. harpoxy 配置

    HAProxy是一个使用C语言编写的自由及开放源代码软件,其提供高可用性.负载均衡,以及基于TCP和HTTP的应用程序代理. HAProxy特别适用于那些负载特大的web站点,这些站点通常又需要会话保 ...

  10. 廖雪峰Python3笔记

    主要复习过一遍 简介 略 安装 略 *** 第一个Python程序 第一行的注释: # _*_ coding: utf-8 _*_ #!/usr/bin/env python3 print() 可以接 ...