72 lines
2.7 KiB
JavaScript
72 lines
2.7 KiB
JavaScript
|
// 这是 utils/quillVideo
|
|||
|
|
|
|||
|
|
import Quill from "quill";
|
|||
|
|
// 源码中是import直接倒入，这里要用Quill.import引入
|
|||
|
|
const BlockEmbed = Quill.import("blots/block/embed");
|
|||
|
|
const Link = Quill.import("formats/link");
|
|||
|
|
|
|||
|
|
const ATTRIBUTES = ["height", "width"];
|
|||
|
|
|
|||
|
|
class Video extends BlockEmbed {
|
|||
|
|
static create(value) {
|
|||
|
|
const node = super.create();
|
|||
|
|
// 添加video标签所需的属性
|
|||
|
|
node.setAttribute('style', 'object-fit:fill;width: 30%;')
|
|||
|
|
node.setAttribute('preload', 'auto') // auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
|
|||
|
|
// node.setAttribute('playsinline', 'true')
|
|||
|
|
// node.setAttribute('x-webkit-airplay', 'allow')
|
|||
|
|
// node.setAttribute('x5-video-player-type', 'h5') // 启用H5播放器,是wechat安卓版特性
|
|||
|
|
// node.setAttribute('x5-video-orientation', 'portraint') // 竖屏播放 声明了h5才能使用 播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏
|
|||
|
|
// node.setAttribute('x5-playsinline', 'true') // 兼容安卓 不全屏播放
|
|||
|
|
node.setAttribute('x5-video-player-fullscreen', 'true') // 全屏设置，设置为 true 是防止横屏
|
|||
|
|
node.setAttribute('controlsList', 'nofullscreen') // 控制删除
|
|||
|
|
|
|||
|
|
node.setAttribute("poster", value.poster); // 视频封面
|
|||
|
|
node.setAttribute("controls", "controls");
|
|||
|
|
node.setAttribute("type", "video/mp4");
|
|||
|
|
node.setAttribute("src", this.sanitize(value.url));
|
|||
|
|
return node;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
static formats(domNode) {
|
|||
|
|
return ATTRIBUTES.reduce((formats, attribute) => {
|
|||
|
|
if (domNode.hasAttribute(attribute)) {
|
|||
|
|
formats[attribute] = domNode.getAttribute(attribute);
|
|||
|
|
}
|
|||
|
|
return formats;
|
|||
|
|
}, {});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
static sanitize(url) {
|
|||
|
|
return Link.sanitize(url);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
static value(domNode) {
|
|||
|
|
return {
|
|||
|
|
url: domNode.getAttribute("src"),
|
|||
|
|
poster: domNode.getAttribute('poster'),
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
format(name, value) {
|
|||
|
|
if (ATTRIBUTES.indexOf(name) > -1) {
|
|||
|
|
if (value) {
|
|||
|
|
this.domNode.setAttribute(name, value);
|
|||
|
|
} else {
|
|||
|
|
this.domNode.removeAttribute(name);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
super.format(name, value);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
html() {
|
|||
|
|
const { video } = this.value();
|
|||
|
|
return `<a href="${video}">${video}</a>`;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
Video.blotName = "video"; // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
|
|||
|
|
Video.className = "ql-video";
|
|||
|
|
Video.tagName = "video"; // 用video标签替换iframe
|
|||
|
|
|
|||
|
|
export default Video;
|