Quill插入html5的video标签
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标签的更多相关文章
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- 解决html5中video标签无法播放mp4问题的办法
这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- 在使用html5的video标签播放视频时为何只有声音却没有图像
在使用html5的video标签播放视频时为何只有声音却没有图像? 答:使用格式化工厂转个编码就行了,MP4有3种编码,mpg4(xdiv),,mpg4(xvid),avc(h264)转换成H264编 ...
- 关于HTML5中video标签的奇怪现象
很多人刚开始学习html5 的时候在使用video标签时会出现这样的情况: 发现video标签在网页中播放时只有声音但是没有图像,如: <!DOCTYPE html> <html&g ...
- HTML5新增video标签及对应属性、API详解
知识说明: 比不上很牛的前端开发人员,但自始至终明白“万丈高楼平地起”,基础最重要,初学HTML5,稳固基础第一步,把最基本的整理下来,留下自己学习的痕迹.HTML5新增的video标签,将其属性以及 ...
- 防止html5的video标签在iphone中自动全屏
问题: 当在iphone中打开html5页面中的video视频时,会默认调取系统播放器,全屏播放视频资源. 解决方式: 1. 首先在html5页面的video标签中添加webkit-playsinli ...
- mp4 格式无法使用html5的video标签播放
只有视频编码为h264的视频才能在html5中使用video标签播放 我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px;
随机推荐
- SQL反模式学习笔记11 限定列的有效值
目标:限定列的有效值,将一列的有效字段值约束在一个固定的集合中.类似于数据字典. 反模式:在列定义上指定可选值 1. 对某一列定义一个检查约束项,这个约束不允许往列中插入或者更新任何会导致约束失败的值 ...
- impala
impala 1.impala是什么: impala是基于hive的大数据实时分析查询引擎,直接使用Hive的元数据库Metadata,意味着impala元数据都存储在Hive的metastore中. ...
- Round#534 div.2-C Grid game
http://codeforces.com/contest/1104/problem/C 好厉害的题~ 只要把竖着的放在第一第二行,横着的放在第三/第四行就行. 哦吼,大半夜脑子迷糊地看英文的脑筋急转 ...
- Linux shell 脚本报错:/bin/bash^M: bad interpreter: No such file or directory
今天遇到一个很诡异的问题,一直运行很正常的shell脚本失败了,只是昨天增加了一个参数而已. 报错信息: /bin/bash^M: bad interpreter: No such file or d ...
- 20172328 2018-2019《Java软件结构与数据结构》第三周学习总结
20172328 2018-2019<Java软件结构与数据结构>第三周学习总结 概述 Generalization 本周学习了第五章:队列.主要内容包含队列的处理过程.如何用对例如求解问 ...
- SSH(Spring Struts2 Hibernate)框架整合(xml版)
案例描述:使用SSH整合框架实现部门的添加功能 工程: Maven 数据库:Oracle 案例架构: 1.依赖jar包pom.xml <project xmlns="http://ma ...
- CSS3_盒阴影_倒影_盒子大小可调
1. 盒阴影 会产生一个或者多个阴影 使用: (多个阴影,以逗号隔开) /* (不能为负值) (可以负值) */ /* 水平方向偏移量 垂直反向偏移量 模糊程度 扩散程度 颜色 是否是内阴影; ...
- Android总结之json解析(FastJson Gson 对比)[申明:来源于网络]
Android总结之json解析(FastJson Gson 对比)[申明:来源于网络] 地址:http://blog.csdn.net/u014031072/article/details/5392 ...
- OO第四次博客作业
测试与正确性论证的效果差异及其优缺点 测试是利用测试代码,通过编写测试用例来验证代码是否能正常完成所要求的功能,自动测试相较于正确性论证来说更加的直观,直接测试代码的功能,而正确性论证是在JSF的基础 ...
- thinkPHP3.2使用__ROOT__显示为空,为什么
在模板展示上传文件的时候用了__ROOT__,但是显示为空. 在网上找解决办法,改为__ROOT__/,然后就可以了