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;
随机推荐
- shaderlab UV动画所需的变量声明
优化资源.美术需要迫使自己的顶点shader能够进行TRANSFORM_TEX运算,进行该运算的前提是需要声明一个 _MainTex_ST 变量,类型为float4即可. 此时就可以使用unity c ...
- react + axios实践
本文只要介绍如何在项目中把react和axios结合起来使用,想了解更多关于axios详细知识以及api,可以到官网查看 https://www.npmjs.com/package/axios 首先安 ...
- (一)shell脚本入门
shell脚本入门 1.脚本格式 脚本以#!/bin/bash 开头(指定解析器) 2.第一个shell脚本:helloworld (1)需求:创建一个shell脚本,输出helloworld 运行: ...
- 《C和指针》---指针
内存和地址 计算机的内存由许多的位(bit)组成,每个位可以容纳值0或1. 由于一个位所能表示的范围太有限,所以通常许多位合成一组作为一个单元. 这些位置的每一个都被称为字节(byte),每个字节包含 ...
- xshll 连接ubuntu出现 ssh服务器拒绝了密码
一般进行到这一步,可能是sshd的设置不允许root用户远程登录 首先修改一下vim /etc/sshd/ssh_config 修改成如下图: 如果找不到或修改不行 可以先用普通用户登录再su到roo ...
- Hadoop伪分布式的搭建
主要分为三个步骤:1.安装vmware虚拟机运行软件 2.在vmware虚拟机中安装linux操作系统 3.配置hadoop伪分布式环境 Hadoop环境部署-JDK部分------------ ...
- mongodb 遇到问题-查询单个需要包装id
mongodb,get字符查询需要传入特定的包装id才能识别 const ObjectID = require('mongodb').ObjectID exports.queryOne = (req, ...
- RHEL5.8安装
创建完成后新的虚拟机.使用光盘启动后,启动界面如下图. 大概介绍下显示界面内容的意思: 1.To install or upgrade in graphical mde, press the ...
- List GroupBy真实用法,Reflection(反射)用法,Enum用法,正则,搜索下拉布局
1.List GroupBy 用法 var _roomProducts = homesingProducts.GroupBy(t => t.RoomName); RoomedProducts ...
- __x__(39)0909第五天__ 表格 table
表格 表示一种格式化的数据,如课程表,银行对账单... ... 在网页中,使用 table 创建一个表格. html代码: <!doctype html> <html> < ...