vue播放flv和rtsp 格式视频

vue播放flv和rtsp 格式视频

调用

 <znvVideo:vId="'0'":src="url":type="'rtsp'"></znvVideo>

1.播放flv "flv.js":"1.6.2"

新建znVido.vue

<template><div class="box-video" :id="'box-video-' + vId"><video:id="'znv-video-' + vId"class="video-js znv-video":class="type + '-video'"controlslist="noplaybackrate nodownload disablePictureInPicture noremoteplayback"disablePictureInPicturecontrolsmutedautoplay></video><!-- noplaybackrate ：隐藏倍速
nodownload：隐藏下载
disablePictureInPicture：隐藏画中画 --></div>
</template><script>
import flvjs from 'flv.js'
export default {name: 'ZnvVideo',data() {return {flvPlayer: null}},props: {vId: {type: String,required: true,default: ''},src: {type: String,required: true,default: ''},type: {type: String,required: true,default: ''}},mounted() {this.initFlv()},watch: {src() {this.initFlv()}},beforeDestroy() {if (this.flvPlayer) {this.flvPlayer.unload()this.flvPlayer.detachMediaElement()this.flvPlayer.destroy()this.flvPlayer = null}},methods: {initFlv() {if (flvjs.isSupported()) {var videoElement = document.getElementById('znv-video-' + this.vId)this.flvPlayer = flvjs.createPlayer({type: 'flv',url: this.src})this.flvPlayer.attachMediaElement(videoElement)this.flvPlayer.load()this.flvPlayer.play()}}}
}
</script><style lang="scss">
// // 播放按钮
video::-webkit-media-controls-play-button {display: none !important;
}
// 当前播放时间
video::-webkit-media-controls-current-time-display {display: none !important;
}
// 剩余时间
video::-webkit-media-controls-time-remaining-display {display: none !important;
}
// 音量按钮
// video::-webkit-media-controls-volume-control-container {
//   display: none !important;
// }
// 全屏
// video::-webkit-media-controls-fullscreen-button {
//   display: none !important;
// }
// 时间轴
video::-webkit-media-controls-timeline {display: none !important;
}
// 更多选项 --然而并不生效
video::-internal-media-controls-overflow-button {display: none !important;
}
/* 所有控件 */
// video::-webkit-media-controls-enclosure {
//   display: none;
// }.box-video {width: 100%;height: 100%;.znv-video {width: 100%;height: 100%;.vjs-tech {pointer-events: none;// object-fit: cover;object-fit: fill;}}
}
</style>

1.播放rtsp

下载包

  "video.js": "^7.6.6","videojs-flash": "^2.2.1",

新建znVido.vue

<template><div class="box-video" :id="'box-video-' + vId"><video:id="'znv-video-' + vId"class="video-js znv-video":class="type + '-video'"playsinlineautoplay="autoplay"></video></div>
</template><script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {name: "ZnvVideo",data() {return {options: {// techOrder: ["html5", "Flvjs", "Streamedianjs"],autoplay: true, // 是否自动播放controls: false, // 是否显示控制条language: "zh-CN", // 设置语言muted: true, // 是否静音preload: "auto", // 预加载fluid: false, // 自适应宽高// src: this.src, // 要嵌入的视频源的源 URLobjectFit: "cover", // 同css object-fit，作用于video标签notSupportedMessage: "此视频暂无法播放，请稍后再试",controlBar: {// progressControl: false,// liveDisplay: false,fullscreenToggle: true, // 全屏按钮，默认为truepictureInPictureToggle: true, // 画中画按钮，默认为truevolumePanel: true, // 声音面板currentTimeDisplay: false, // 当前播放时间timeDivider: false, // 时间分割线durationDisplay: false, // 总时间remainingTimeDisplay: false, // 剩余时间},},};},props: {vId: {type: String,required: true,default: "",},src: {type: String,required: true,default: "",},type: {type: String,required: true,default: "",},},mounted() {// console.log(this.type, this.src, this.vId,"视频流--------");this.player = videojs("znv-video-" + this.vId, this.options);this.setSrc();},watch: {src() {// this.player.reset()this.setSrc();// this.player.load()// this.player.play()},},methods: {setSrc() {if (this.type === "hls") {this.initHls();} else if (this.type === "rtsp") {this.initRtsp();} else if (this.type === "flv") {this.initFlv();} else if (this.type === "mp4") {this.initMp4();}},initRtsp() {this.player.src({src: this.src,type: "application/x-mpegURL",// withCredentials: false,// bufferDuration: 5,});},initHls() {this.player.src({src: this.src,type: "application/x-mpegURL",});},initFlv() {this.player.src({src: this.src,type: "video/x-flv",});},initMp4() {this.player.src({src: this.src,});},},beforeDestroy() {if (this.player) {this.player.dispose();this.player = null;}},
};
</script><style lang="scss">
.box-video {width: 100%;height: 100%;.znv-video {width: 100%;height: 100%;.vjs-tech {pointer-events: none;object-fit: cover;}}.rtsp-video {.vjs-progress-control {visibility: hidden;}}
}
</style>