vue3使用ckplayer进行摄像头直播视频

初始化配置里的属性说明https://www.ckplayer.com/manual/11.html#m49

---

1.点击下载ckplayer-master压缩包，将里面的ckplayer文件夹放在项目中，我是放在了public中

/**
* video-img是为了直接进去页面，就加载视频资源避免浪费资源流量，需要用户点击进行点击在播放视频
*/
<div class="video">
     <div class="video-img" v-if="flag" @click="clickplay">
          <img class="play" src="https://applet/common/play.svg" alt="">
          <img class="poster" src="https://camera/picUrl/1000048_0.png" alt="">
     </div>
     <div v-else id="video-container"></div>
</div>


<script setup lang="ts">
import { ref, onMounted, reactive, nextTick } from 'vue';
const flag = ref(true);

const clickplay = () => {
    flag.value = false;
    initCKPlayer();
}
const initCKPlayer = () => {
---------------------------------动态加载CKPlayer的JavaScript文件和CSS文件
// 引入CKPlayer的CSS文件
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = '/public/ckplayer/css/ckplayer.css';
    document.head.appendChild(link);
// 引入CKPlayer的JavaScript文件
    const script = document.createElement('script');
    script.src = '/public/ckplayer/js/ckplayer.js';
    document.head.appendChild(script);

    script.onload = () => {
        // 初始化CKPlayer
        const videoObject = {
            poster: '',//封面图片地址,视频第一帧
            container: '#video-container', // 容器选择器
            plug: 'hls.js', // 设置使用hls插件
            autoplay: true, // 自动播放
            live: true,     // 是否为直播
            variable: 'player', // 播放器对象名称
            rotate: 1, // 旋转画面90°
            video: 'https://xxxxxxxx.m3u8',// 视频地址
        };
        nextTick(() => {
            // 创建播放器对象
            const player = new ckplayer(videoObject);

        });
    };
}

</script>

<style lang='scss'>

#video-container {
    width: 100%;
    height: 100%;
    border-radius: 7px;
    //   transform: rotate(90deg);
}

video {
    object-fit: fill;
}

.video-img {
    width: 100%;
    height: 100%;

    .play {
        position: absolute;
        width: 50px;
        height: 50px;
        left: calc(50%);
        top: calc(50% - 10px);
        transform: translate(-50%, -50%) rotate(90deg);
    }

    .poster {
        width: 100%;
        height: 100%;
    }
}
</style>

如果想要在控制栏里面添加自定义按钮，就需要在const player = new ckplayer(videoObject);后面添加如下代码

const Readelement = document.createElement('div')
Readelement .className = 'imgReadClass'
document.getElementsByClassName('ck-bar')[0].appendChild(Readelement)