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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
| <template>
| <div class="ui-jessibuca"></div>
| </template>
|
| <script>
| export default {
| name: 'ui-jessibuca',
| props: {
| videoUrl: {
| type: String,
| default: ''
| },
| showBandwidth: {
| type: Boolean,
| default: true
| },
| fullscreenFlag: {
| type: Boolean,
| default: true
| },
| screenshotFlag: {
| type: Boolean,
| default: true
| },
| playFlag: {
| type: Boolean,
| default: true
| },
| audioFlag: {
| type: Boolean,
| default: true
| }
| },
| data () {
| return {
| jessibuca: null
| }
| },
| watch: {
| videoUrl: {
| immediate: true,
| handler (newVal, oldVal) {
| if (newVal) {
| this.init()
| setTimeout(() => {
| this.jessibuca.play(newVal)
| }, 100)
| } else if (this.jessibuca) {
| this.jessibuca.destroy()
| this.jessibuca = null
| }
| }
| }
| },
| created () {},
| mounted () {
| this.init()
| },
| beforeDestroy () {
| this.jessibuca && this.jessibuca.destroy()
| },
| methods: {
| init () {
| const that = this
| if (!this.jessibuca && this.$el) {
| this.jessibuca = new window.Jessibuca({
| container: this.$el,
| videoBuffer: 0.2, // 缓存时长
| isResize: false,
| text: '',
| loadingText: '加载中',
| debug: false,
| useMSE: true, // 开启硬编码
| showBandwidth: this.showBandwidth, // 显示网速
| controlAutoHide: true,
| operateBtns: {
| fullscreen: this.fullscreenFlag,
| screenshot: this.screenshotFlag,
| play: this.playFlag,
| audio: this.audioFlag
| },
| forceNoOffscreen: true,
| isNotMute: false
| })
| this.jessibuca.on('error', function (error) {
| console.log('error:', error)
| })
|
| this.jessibuca.on('fullscreen', function (flag) {
| console.log('is fullscreen', flag)
| that.$emit('fullscreen', flag)
| })
|
| this.jessibuca.on('webFullscreen', function (flag) {
| console.log('is webFullscreen', flag)
| that.$emit('webFullscreen', flag)
| })
| }
| },
| setFullscreen (flag) {
| this.jessibuca.setFullscreen(flag)
| }
| }
| }
| </script>
| <style src="./assets/css/index.scss" lang="scss"></style>
|
|
