장면
프런트엔드 및 백엔드 분리 버전을 따라 로컬에서 환경을 빌드하고 프로젝트를 실행하는 방법을 가르치는 경우:
프론트엔드와 백엔드 분리 버전을 따르면 로컬에서 환경을 구축하고 프로젝트를 실행하는 방법을 배우게 됩니다.
위에서 구축한 프로젝트를 기반으로 rtmp 비디오 스트림이 먼저 재생됩니다.
Vue에서 vue-video-player 및 videojs-flash 플러그인을 사용하여 rtmp 비디오 파일 스트림을 재생합니다.
Vue에서 vue-video-player 및 videojs-flash 플러그인을 사용하여 rtmp 비디오 파일 스트림 재생 - Programmer Sought
비디오를 로컬에서 재생하는 효과를 시뮬레이트해야 하는 경우 로컬 mp4 파일을 재생해야 합니다.
메모:
블로그:
Domineering Rogue Temperament Blog_CSDN Blog-C#, Architecture Road, SpringBoot 분야의 Blogger
공식 계정
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>