VUE3使用jessibuca播放器

• 参考

VUE3使用jessibuca播放器-CSDN博客文章浏览阅读223次。【代码】VUE3使用jessibuca播放器。_vue3使用jessibucahttps://blog.csdn.net/quantum7/article/details/146020484

• 播放代码

<template>
    <j-modal
        visible
        width="900px"
        height="440px"
        @cancel="emits('update:visible', false)"
        @ok="emits('update:visible', false)"
        :maskClosable="false" >

    <j-form>

    <div class="root">
        <div class="column">
            <div class="container-shell" 
                 id="video-container" ref="video-container">
            </div>
        </div>
    </div>
    
    </j-form>
  </j-modal>
</template>

<script setup lang="ts">

import { reactive } from "vue";

const emits = defineEmits(['confirm', 'update:visible']);

const props = defineProps<{
    data: {
        type: Object,
    },
    visible: boolean;
}>();

onMounted(() => {
  var container = document.getElementById('video-container');
  const jessibuca = new window.Jessibuca(
          Object.assign(
              {
                  decoder: "/js/jessibuca/decoder.js",
                  container: container,
                  isResize: false,
                  text: "",
                  loadingText: "疯狂加载中...",
                  // hasAudio:false,
                  hotKey: true,
                  // hasAudio:false,
                  controlAutoHide: true,
                  supportDblclickFullscreen: true,
                  showBandwidth: true, // 显示网速
                  forceNoOffscreen: true,
                  isNotMute: true,
                  timeout: 10,
              }
          )
      );

      jessibuca.play(videoUrl);
});

</script>

<style scoped>
.root {
    display: flex;
    place-content: center;
    margin-top: 3rem;
}

.column {
  flex: 1; /* 让每个列平分空间 */
  margin: 5px; /* 可选：添加一些间距 */
}

.container-shell {
    position: relative;
    backdrop-filter: blur(5px);
    background: #A0A0A0;
    
    padding: 30px 4px 10px 4px;
    /* border: 2px solid black; 
    background: hsla(0, 0%, 50%, 0.5);
    width: auto; */
    width: 640px;
    height: 360px;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 10px 20px;
}

</style>