@[组件解决视频不能播放问题]，一个组件直接搞定！！！！
子组件
`<template>
<div class="videoBox">
<video ref="videoPlayer" class="video-js vjs-default-skin vjs-big-play-centered"></video>
</div>
</template>
<script setup lang="ts">
import videojs from "video.js";
import "video.js/dist/video-js.css";
import "videojs-flvjs-es6";
import "videojs-flash";
import { ref, onMounted,onBeforeUnmount } from 'vue';
import zhCN from 'video.js/dist/lang/zh-CN.json';
const props = defineProps({
videoUrl: {
type: String,
default: ""
}
});
const videoPlayer = ref(null);
const handelVideoUrl = () => {
let options = {
muted: true,
controls: true,
autoplay: true,
loop: true,
languages: {
'zh-CN': zhCN
},
language: "zh-CN",
preload: "auto",
notSupportedMessage: '此视频暂无法播放，请稍后再试',
textTrackDisplay: false
};
const url = props.videoUrl.replace(/\s+/g, "");
if (url.includes("rtmp")) {
options = {
...options,
techOrder: ["html5", "flash"],
sources: [{ src: props.videoUrl, type: "rtmp/flv" }]
};
} else if (url.endsWith(".flv")) {
options = {
...options,
techOrder: ["html5", "flvjs"],
flvjs: {
mediaDataSource: {
isLive: false,
cors: true,
withCredentials: false
}
},
sources: [{ src: props.videoUrl, type: "video/x-flv" }]
};
} else if (url.endsWith(".m3u8")) {
options = {
...options,
sources: [{ src: props.videoUrl, type: "application/x-mpegURL" }]
};
} else {
options = {
...options,
sources: [{ src: props.videoUrl, type: "video/mp4" }]
};
}
videoPlayer.value = videojs(videoPlayer.value, { ...options });
};
onMounted(() => {
handelVideoUrl();
});
onBeforeUnmount(() => {
if (videoPlayer.value) {
videoPlayer.value.dispose();
}
});
</script>
<style lang="less" scoped>
.videoBox {
height: 100%;
width: 100%;
}
</style>`
在父组件中直接引入即可
1.引入文章来源：https://www.toymoban.com/news/detail-848898.html
import Video from '../../../components/video/index.vue';
2.使用文章来源地址https://www.toymoban.com/news/detail-848898.html
<Video :videoUrl="item.CameraUrl" class="video-item"></Video>
到了这里，关于【vue3播放监控视频的组件video】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
