@[组件解决视频不能播放问题],一个组件直接搞定!!!!
子组件
`
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();
}
});
.videoBox {
height: 100%;
width: 100%;
}
`
在父组件中直接引入即可
1.引入
import Video from '../../../components/video/index.vue';
2.使用
参考阅读
发表评论