import { Quill } from 'vue-quill-editor'
|
|
// 源码中是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(value)
|
// console.log("js文件"+ window.jsValue)
|
// 添加video标签所需的属性
|
node.setAttribute('controls', 'controls') // 控制播放器
|
//删除原生video的控制条的下载或者全屏按钮的方法
|
//<video controls controlsList='nofullscreen nodownload noremote footbar' ></video>
|
//不用哪个在下面加上哪个
|
node.setAttribute('controlsList', 'nofullscreen') // 控制删除
|
node.setAttribute('type', 'video/mp4')
|
node.setAttribute('style', 'object-fit:fill;width: 100%;')
|
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('src', window.jsValue)
|
return node
|
}
|
|
static formats (domNode) {
|
return ATTRIBUTES.reduce((formats, attribute) => {
|
if (domNode.hasAttribute(attribute)) {
|
formats[attribute] = domNode.getAttribute(attribute)
|
}
|
return formats
|
}, {})
|
}
|
|
// static sanitize (url) {
|
//
|
// // eslint-disable-line import/no-named-as-default-member
|
// }
|
|
static value (domNode) {
|
return domNode.getAttribute('src')
|
}
|
|
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
|
