lbp-video.js
1.26 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import playIcon from './play.svg'
import './styles/video.scss'
// 这里有个动画演示，可以用来学习 CSS：《CSS制作播放、暂停按钮》https://codepen.io/chriscoyier/full/lotjh
export default {
name: 'lbp-video',
props: {
src: {
type: String,
default: ``,
editor: {
type: 'a-input',
label: '视频url',
prop: {
type: 'textarea'
},
extra: (h) => {
return <a href='https://github.com/ly525/luban-h5/issues/85' target='_blank'>教程(Tutorial)</a>
}
}
},
disabled: {
type: Boolean,
default: false
}
},
watch: {
src () {
this.appendIframe()
}
},
mounted () {
this.appendIframe()
},
methods: {
appendIframe () {
if (this.src) {
this.$el.innerHTML = this.src
}
}
},
render (h) {
const style = this.disabled ? { 'pointer-events': 'none' } : { }
return (
<div class="lbc-video" style={style}>
{
this.disabled
? <video playsinline="true" webkit-playsinline="" width="100%" height="100%" poster={playIcon}><source type="video/mp4" /></video>
: <div></div>
}
</div>
)
},
editorConfig: {
components: {
}
}
}