vue video播放m3u8源_chc高清电影m3u8_外码斯迪的博客-CSDN博客
注意:
客户给了监控的直播源列表文件,就是一个网址
<template>
<div>
<div class="some">{{ one }}</div>
<!-- <video
width="600"
autoplay
muted
controls
loop
src="https://cmgw-"
></video> -->
</div>
<div>
<video ref="videoPlayer" id="videoPlayer"></video>
</div>
</template>
<script setup lang="ts">
import videojs from "video.js"
import "video.js/dist/video-js.css"
import { ref, onMounted } from "vue"
//播放器的配置选项
const playerOptions = {
autoplay: true,
muted: true,
loop: true,
sources: [
{
type: "application/x-mpegURL",
src: "https://cmgw-vpc.lechange.com:8890/LCO/.m3u8?proto=https"
}
],
controlBar: {
timeDivider: true,
fullscreenToggle: true
}
}
const one = ref("haha")
onMounted(() => {
//拿到dom
const playDom: any = document.getElementById("videoPlayer")
// 用插件拿到实例对象
const player: any = videojs(playDom, playerOptions)
//播放
player.play()
})
</script>
<style lang="scss" scoped>
.some {
border-style: $BORDER;
background: $BG;
color: red;
}
</style>
这样直播的实时视频就可以播放了,感觉很简单