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. 分享关于搭建高性能WEB服务器的一篇文章

    这篇文章主要介绍了Centos5.4+Nginx-0.8.50+UWSGI-0.9.6.2+Django-1.2.3搭建高性能WEB服务器的相关资料,需要的朋友可以参考下(http://m.0813s ...

  2. 解决ubuntu下firefox无法在线播放音频和视频的问题

    原因 Ubuntu 为了规避专利和版权问题,很多东西没有预装,比如音视频解码器AAC. 那么为什么明明 Ubuntu 上没有AAC解码器, Chrome 却可以正常播放呢,自然的想法是 Chrome ...

  3. VScode查找替换常用正则表达式

    1.从字符串开始到结束,例如:<a href="#">测试</a> (<'.*?>) //匹配到整个a标签 (>'.*?<) //匹 ...

  4. Beta(1/7)

    鐵鍋燉腯鱻 项目:小鱼记账 团队成员 项目燃尽图 冲刺情况描述 站立式会议照片 各成员情况 团队成员 学号 姓名 git地址 博客地址 031602240 许郁杨 (组长) https://githu ...

  5. 解读vscode断点调试配置文件【待续】

    一.参考链接 https://code.visualstudio.com/Docs/editor/debugging https://code.visualstudio.com/docs/nodejs ...

  6. 第二篇flask响应方式

    响应三件套 1.Flask中的HTTPResponse @app.route('/home') # app中的route装饰器 def home(): # 视图 return '登陆成功' #HTTP ...

  7. 在VS2010上安装MVC4(webApi)

    我们安装的VS2010上是没有MVC4或者WebApi的,要想加入这些功能只能自己在网上下载安装. 要安装MVC4,首先得安装VS10sp(Service Package)1,然后再安装MVC4.安装 ...

  8. macos解决Hadoop之Unable to load native-hadoop library

    很显然,native-hadoop library不支持macos,如果是Linux就不会有这个问题.在百度上搜了,要下载在macos上编译的native hadoop library,我在网上下载了 ...

  9. Git 经常用到的命令

    1.克隆master分支之外的分支: 首先克隆项目 1>Git clone git@192.168.0.201:frontend/mn.git 然后转换到克隆下来的文件夹 2>cd 文件名 ...

  10. js根据服务端返回的时间倒计时

    使用服务端与本地的时间差进行计算 $(function(){ // 倒计时 var _ordertimer = null; var data =new Date(); var txt = $('.js ...