|
|
@@ -1,9 +1,8 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div :style="{'width':width+'px'}">
|
|
|
+ <!-- -->
|
|
|
<video ref='plyr'
|
|
|
class='c-plyr'
|
|
|
- :style="!isFull ? {'width': width+'px','height': height+'px'} : {}"
|
|
|
- controls
|
|
|
autoplay
|
|
|
:src="src"
|
|
|
loop>
|
|
|
@@ -17,7 +16,9 @@ export default {
|
|
|
props: ['width', 'height', 'src'],
|
|
|
data () {
|
|
|
return {
|
|
|
- isFull: false
|
|
|
+ isFull: false,
|
|
|
+ myWidth: '',
|
|
|
+ myHeight: ''
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
@@ -30,7 +31,9 @@ export default {
|
|
|
},
|
|
|
watch: {
|
|
|
src (val) {
|
|
|
- // console.log(val)
|
|
|
+ this.myWidth = this.width
|
|
|
+ this.myHeight = this.height
|
|
|
+ console.log(this.myWidth)
|
|
|
// console.log(this.width, this.height)
|
|
|
}
|
|
|
},
|
|
|
@@ -46,4 +49,9 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+.c-plyr {
|
|
|
+ vertical-align: bottom;
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100% !important;
|
|
|
+}
|
|
|
</style>
|
