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;
随机推荐
- numpy的索引-【老鱼学numpy】
简单的索引值 import numpy as np a = np.arange(3, 15).reshape(3, 4) print("a=") print(a) print(&q ...
- C++类的成员
1.成员变量 成员变量可以是任何类型,如基本数据类型.引用.另一个类的对象或指针.自身类的引用或指针,但不能是自身类的对象: 成员变量不能指定为auto.register.extern 存储类型. 1 ...
- Ubuntu+IntelliJ IDEA+Android 配置NDK环境+openCV
最近需要将Python人证对比模型移植安卓端.安卓端需要使用openCV简单的人像提取处理.在配置openCV前首先需要配置NDK环境. NDK的介绍(http://www.cnblogs.com/l ...
- 使用apt-get安装相关的软件时,不能Fetch,现在更新为国内的源!
我使用的是中国科技大学的树莓派的软件源,测试可以使用(更新时间:2018年7月15日) deb http://mirrors.ustc.edu.cn/raspbian/raspbian/ jessie ...
- HTTP协议是无状态的
含义: 无状态是指协议对于事务处理没有记忆能力,服务器不知道客户端是什么状态.从另一方面讲,打开一个服务器上的网页和你之前打开这个服务器上的网页之间没有任何联系 实际中的使用情况: 在web应用中,我 ...
- Failed to start component [StandardEngine [Catalina].StandardHost[localhost].StandardContext[/项目名]]
问题: 最近几天在做一个小项目,今天中午本来想启动tomcat打开看看项目的,没想到项目突然无法打开,页面总是显示404 tomcat报错如下:Failed to start component [S ...
- every循环
一.语法 var result = myArr.every(function(item, index){ return item>0; }) //全部满足,才为true every方法检测数组中 ...
- markdown改变字体颜色和大小
markdown中改变字体颜色与大小方法同html 先看例子 <font face="黑体">我是黑体字</font> 我是黑体字 <font fac ...
- Python 之map、filter、reduce
MAP 1.Python中的map().filter().reduce() 这三个是应用于序列的内置函数,这个序列包括list.tuple.str. 格式: 1>map(func,swq1[,s ...
- Web应用程序架构的比较
架构 技术优势 技术挑战 团队优势 团队挑战 单体 低延时 开发简单 没有重复的模型/验证 伸缩 由于代码库过大引起的复杂度 特性内沟通的开销低 失败的恐惧 特性间沟通的开销大 前端+后端 能够单独扩 ...