Сцены
Если вы следуете версии с разделением интерфейса и сервера, чтобы научить вас создавать среду локально и запускать проект:
На основе построенного выше проекта сначала проигрывается видеопоток rtmp.
Используйте плагины vue-video-player и videojs-flash в Vue для воспроизведения потока видеофайлов rtmp:
Если вам нужно имитировать эффект локального воспроизведения видео, вам нужно воспроизвести локальный файл mp4.
Примечание:
Блог:
Domineering Rogue Temperament Blog_CSDN Blog-C#, Architecture Road, Blogger в области SpringBoot
Следите за официальной учетной записью
Domineering Programmer
Получайте электронные книги по программированию, обучающие материалы и бесплатные загрузки.
выполнить
1. Как и в предыдущем случае, установите подключаемый модуль vue-video-player.
npm install vue-video-player --saveПросто установите этот плагин здесь
2. Частичное введение на странице
import { videoPlayer } from "vue-video-player";
import 'video.js/dist/video-js.css'объявить в компонентах
components: {
videoPlayer,
},3. Добавьте игрока на страницу
<div id="playWnd" class="playWnd">
<videoPlayer
class="vjs-custom-skin videoPlayer"
ref="videoplayer"
:playsinline="true"
width="800px"
height="600px"
:options="playerOptions"
customEventName="changed"
>
</videoPlayer>4. Установите соответствующие свойства плеера
playerOptions: {
width: "800px",
height: "600px",
language: "zh-CN",
muted: true,// 默认情况下将会消除任何音频
autoplay: true,// 如果true,浏览器准备好时开始回放。
controls: false, //不显示暂停、声音、进度条组件
loop: true, // 视频一结束就重新开始。
sources: [
{
type: "video/mp4",
src: "/video/video2.mp4" // url地址
},
],
},Обратите внимание, что путь, соответствующий URL-адресу, здесь
5. Полный пример кода
<template>
<el-dialog
title="视频监控"
:visible.sync="videoOpen"
width="800px"
height="600px"
append-to-body
@close="videoClose"
class="video_box"
>
<!--视频窗口展示-->
<div id="playWnd" class="playWnd">
<videoPlayer
class="vjs-custom-skin videoPlayer"
ref="videoplayer"
:playsinline="true"
width="800px"
height="600px"
:options="playerOptions"
customEventName="changed"
>
</videoPlayer>
</div>
</el-dialog>
</template>
<script>
import { videoPlayer } from "vue-video-player";
import 'video.js/dist/video-js.css'
export default {
name: "HkVideo",
components: {
videoPlayer,
},
data() {
return {
videoOpen: false,
playerOptions: {
width: "800px",
height: "600px",
language: "zh-CN",
muted: true,// 默认情况下将会消除任何音频
autoplay: true,// 如果true,浏览器准备好时开始回放。
controls: false, //不显示暂停、声音、进度条组件
loop: true, // 视频一结束就重新开始。
sources: [
{
type: "video/mp4",
src: "/video/video2.mp4" // url地址
},
],
},
};
},
destroyed() {},
methods: {
//预览功能
preview() {
console.log("preview");
},
//停止全部预览功能
stopAllPreview() {},
//关闭视频窗口
closeWindow() {},
// 查看摄像
videoChange() {
this.videoOpen = true;
//模拟摄像头预览
},
// 关闭摄像头弹窗
videoClose() {
this.videoOpen = false;
this.closeWindow();
},
},
};
</script>
<style scoped lang="scss">
.video_box {
width: 100%;
height: 100%;
}
.plugin {
width: 100%;
height: 100%;
}
.playWnd {
width: 800px;
height: 600px;
margin: 0;
}
.video_box {
::v-deep .el-dialog__body {
padding: 0 !important;
}
}
</style>