Showing
4 changed files
with
23 additions
and
19 deletions
| ... | ... | @@ -6,12 +6,12 @@ |
| 6 | 6 | </div> |
| 7 | 7 | </template> |
| 8 | 8 | <script lang="ts"> |
| 9 | - // @ts-nocheck | |
| 10 | 9 | import { onMounted, onUnmounted, ref, nextTick } from 'vue'; |
| 10 | + import Jessibuca from '../types/jessibuca'; | |
| 11 | 11 | export default { |
| 12 | 12 | name: 'JessibucaDemo', |
| 13 | 13 | setup() { |
| 14 | - let jessibuca = null; | |
| 14 | + let jessibuca: Jessibuca | null = null; | |
| 15 | 15 | const container = ref(null); |
| 16 | 16 | const buffer = ref(null); |
| 17 | 17 | const showBandwidth = ref(false); |
| ... | ... | @@ -42,7 +42,7 @@ |
| 42 | 42 | ifFlv: false, |
| 43 | 43 | forceNoOffscreen: forceNoOffscreen.value, |
| 44 | 44 | isNotMute: false, |
| 45 | - decoder: '/public/jessibuca/decoder.js', | |
| 45 | + decoder: '/jessibuca/decoder.js', | |
| 46 | 46 | }) as Jessibuca; |
| 47 | 47 | |
| 48 | 48 | // jessibuca.on('load', function () { |
| ... | ... | @@ -128,7 +128,7 @@ |
| 128 | 128 | onMounted(async () => { |
| 129 | 129 | createJessibuca(); |
| 130 | 130 | await nextTick(); |
| 131 | - jessibuca.play(playUrl.value); | |
| 131 | + jessibuca?.play(playUrl.value); | |
| 132 | 132 | }); |
| 133 | 133 | |
| 134 | 134 | onUnmounted(() => { |
| ... | ... | @@ -137,11 +137,12 @@ |
| 137 | 137 | |
| 138 | 138 | const play = () => { |
| 139 | 139 | if (playUrl.value) { |
| 140 | - jessibuca.play(playUrl.value); | |
| 140 | + jessibuca?.play(playUrl.value); | |
| 141 | 141 | } |
| 142 | 142 | }; |
| 143 | + | |
| 143 | 144 | const pause = () => { |
| 144 | - jessibuca.pause(); | |
| 145 | + jessibuca?.pause(); | |
| 145 | 146 | playing.value = false; |
| 146 | 147 | }; |
| 147 | 148 | ... | ... |
| ... | ... | @@ -74,16 +74,16 @@ export const searchFormSchema: FormSchema[] | any = [ |
| 74 | 74 | placeholder: '请选择设备类型', |
| 75 | 75 | }, |
| 76 | 76 | }, |
| 77 | - { | |
| 78 | - field: 'channelName', | |
| 79 | - label: '通道名称', | |
| 80 | - component: 'Input', | |
| 81 | - colProps: { span: 6 }, | |
| 82 | - componentProps: { | |
| 83 | - maxLength: 255, | |
| 84 | - placeholder: '请输入通道名称', | |
| 85 | - }, | |
| 86 | - }, | |
| 77 | + // { | |
| 78 | + // field: 'channelName', | |
| 79 | + // label: '通道名称', | |
| 80 | + // component: 'Input', | |
| 81 | + // colProps: { span: 6 }, | |
| 82 | + // componentProps: { | |
| 83 | + // maxLength: 255, | |
| 84 | + // placeholder: '请输入通道名称', | |
| 85 | + // }, | |
| 86 | + // }, | |
| 87 | 87 | { |
| 88 | 88 | field: 'manufacturer', |
| 89 | 89 | label: '厂家', | ... | ... |
| ... | ... | @@ -34,6 +34,8 @@ |
| 34 | 34 | |
| 35 | 35 | const videoPlayEl = ref<HTMLVideoElement>(); |
| 36 | 36 | |
| 37 | + const JessibucaRef = ref(); | |
| 38 | + | |
| 37 | 39 | const videoPlayInstance = ref<Nullable<VideoJsPlayer>>(); |
| 38 | 40 | |
| 39 | 41 | const getOptions = computed(() => { |
| ... | ... | @@ -80,8 +82,7 @@ |
| 80 | 82 | emit('ready', unref(videoPlayInstance)); |
| 81 | 83 | }); |
| 82 | 84 | }; |
| 83 | - | |
| 84 | - //播放/暂停 | |
| 85 | + //播放/暂停s | |
| 85 | 86 | const handleClick = () => { |
| 86 | 87 | console.log('播放/暂停'); |
| 87 | 88 | unref(isPlay) && unref(videoPlayInstance)?.pause(); |
| ... | ... | @@ -89,6 +90,7 @@ |
| 89 | 90 | }; |
| 90 | 91 | |
| 91 | 92 | const handleTopClick = async () => { |
| 93 | + console.log(unref(JessibucaRef), 'JessibucaRef'); | |
| 92 | 94 | console.log('上'); |
| 93 | 95 | handleControl('up'); |
| 94 | 96 | setTimeout(() => { |
| ... | ... | @@ -171,6 +173,7 @@ |
| 171 | 173 | |
| 172 | 174 | <JessibucaDemo |
| 173 | 175 | class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full" |
| 176 | + ref="JessibucaRef" | |
| 174 | 177 | /> |
| 175 | 178 | <div class="!w-2/10 bg-white flex items-center flex-col"> |
| 176 | 179 | <h1>云台控制</h1> | ... | ... |