视频组件配置加载

husq

2023-09-18 7f5e3118a9a162ff4787a4d6464d30fa959b48f8

 src/components/Jessibuca/Jessibuca.vue

@@ -2,32 +2,28 @@
    <div>
        <div class="root">
            <div class="container-shell">
                <div class="container-shell-title">jessibuca demo player</div>
                <div id="container" ref="container"></div>
                <div class="input">
                    <div>输入URL：</div>
                    <input type="input" autocomplete="on" :value="playUrl" />
                    <button v-if="!playing" @click="play">播放</button>
                    <button v-else @click="pause">停止</button>
                </div>
                <div class="input" v-if="loaded">
                    <button @click="destroy">销毁</button>
                </div>
                <div id="container" ref="container" style="width:200px;height:200px"></div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import Jessibuca from '../../../types/jessibuca'
let jessibuca :null | Jessibuca = null
import { onMounted, onUnmounted, ref, defineProps } from 'vue'
import Jessibuca from '../../../public/jessibuca/jessibuca'
const props = defineProps({
  videoUrl: {
    type: String,
    required: true
  }
})
let jessibuca: null | Jessibuca = null
const container = ref(null)
const buffer = ref(null)
const showBandwidth = ref(false)
const showOperateBtns = ref(false)
const showOperateBtns = ref(true)
const forceNoOffscreen = ref(false)
const playUrl = ref('http://flv.bdplay.nodemedia.cn/live/bbb.flv')
// const playUrl = ref()
const playing = ref(false)
const quieting = ref(true)
const loaded = ref(false)
@@ -103,7 +99,7 @@
  })

  jessibuca.on('error', function (error: any) {
    console.log('error', error)
    console.error('error', error)
  })

  jessibuca.on('timeout', function () {
@@ -150,13 +146,14 @@
}
onMounted(() => {
  createJessibuca()
  play()
})
onUnmounted(() => {
  jessibuca && jessibuca.destroy()
})
const play = () => {
  if (playUrl.value) {
    jessibuca?.play(playUrl.value)
  if (props.videoUrl) {
    jessibuca?.play(props.videoUrl)
  }
}
const pause = () => {