Skip to content

X
xxx_phase2_web
Commit deb50e5d authored by 以墨为白's avatar 以墨为白 🎧
Browse files
Options

视频播放组件

parent dc2f0f1b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 646 additions and 393 deletions
package-lock.json
View file @ deb50e5d
This diff is collapsed.
package.json
View file @ deb50e5d
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
"element-ui": "^2.15.2", "element-ui": "^2.15.2",
"esri-loader": "^3.1.0", "esri-loader": "^3.1.0",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"flv.js": "^1.6.2",
"gsap": "^3.12.2", "gsap": "^3.12.2",
"html2canvas": "^1.4.1", "html2canvas": "^1.4.1",
"jquery": "^3.6.0", "jquery": "^3.6.0",
...@@ -58,6 +59,7 @@ ...@@ -58,6 +59,7 @@
"relation-graph": "^1.1.0", "relation-graph": "^1.1.0",
"spark-md5": "^3.0.2", "spark-md5": "^3.0.2",
"vanilla-tilt": "^1.8.1", "vanilla-tilt": "^1.8.1",
"video.js": "^8.6.1",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.5.2", "vue-router": "^3.5.2",
......
src/components/common/video_player.vue 0 → 100644
View file @ deb50e5d
<template>
<div>
<video style="height: 100%;width: 100%;" id="my-player" v-if="this.src.endsWith('flv')" preload="auto" muted autoplay controls>
</video>
<video style="height: 100%;width: 100%;" id="my-player" v-if="!this.src.endsWith('flv')" class="video-js" preload="auto" muted autoplay controls>
</video>
</div>
</template>
<script>
import flvjs from "flv.js";
import videozhCN from "video.js/dist/lang/zh-CN.json";
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
props: ['src'],
data() {
return {
flvPlayer: null,
mp4Player: null
};
},
mounted() {
if (this.src.endsWith("flv")) {
if (flvjs.isSupported()) {
var videoElement = document.getElementById('my-player');
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: this.src,//flv格式流地址
}, {
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
});
this.flvPlayer.attachMediaElement(videoElement);
this.flvPlayer.load(); //加载
this.flvPlayer.play();//播放
}
} else {
this.mp4Player = videojs('my-player', {
sources: [{
language: "zh-CN",
src: this.src,
autoplay: true,
playbackRates: [0.5, 1, 1.5, 2] //倍速播放
}]
}, function () {
console.log("videojs播放器初始化成功");
});
videojs.addLanguage("zh-CN", videozhCN);
this.mp4Player.play();
}
},
destroyed() {
this.flvPlayer && this.flvPlayer.unload();
this.flvPlayer && this.flvPlayer.detachMediaElement()
this.flvPlayer && this.flvPlayer.destroy();
this.mp4Player && this.mp4Player.pause()
this.mp4Player && this.mp4Player.dispose();
}
}
</script>
\ No newline at end of file
src/view/flfg/znfx.vue
View file @ deb50e5d
...@@ -113,16 +113,14 @@ ...@@ -113,16 +113,14 @@
{{ item.file.type.toUpperCase() }} {{ item.file.type.toUpperCase() }}
</span> </span>
</div> --> </div> -->
<div <div class="tx-bg" style="display: flex;justify-content: center;"
class="tx-bg" :class="[item.imgUrl == undefined ? 'animate__animated animate__infinite animate__pulse' : '']">
style="display: flex;justify-content: center;" <span v-if="item.imgUrl == undefined">
:class="[item.imgUrl==undefined?'animate__animated animate__infinite animate__pulse':'']"
>
<span v-if="item.imgUrl==undefined">
{{ item.file.type.toUpperCase() }} {{ item.file.type.toUpperCase() }}
</span> </span>
<div style="width: 60px;height: 60px;" v-else> <div style="width: 60px;height: 60px;" v-else>
<img :src="item.imgUrl==null?'':item.imgUrl" :onerror="errimg" style="background-size: 100% 100%;width: 100%;height: 100%;border-radius: 0px 10px"/> <img :src="item.imgUrl == null ? '' : item.imgUrl" :onerror="errimg"
style="background-size: 100% 100%;width: 100%;height: 100%;border-radius: 0px 10px" />
</div> </div>
</div> </div>
...@@ -354,8 +352,9 @@ ...@@ -354,8 +352,9 @@
</el-dialog> </el-dialog>
<el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px"> <el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px">
<div style="height: 400px; position: relative"> <div style="height: 400px; position: relative">
<video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%" <!-- <video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
controlslist="nodownload" :src="video_src" disablePictureInPicture></video> controlslist="nodownload" :src="video_src" disablePictureInPicture autoplay muted></video> -->
<VideoPlayer v-if="centerDialogVisible_video" :src="video_src"></VideoPlayer>
</div> </div>
</el-dialog> </el-dialog>
...@@ -383,6 +382,7 @@ import { uuid } from "../../util/data_util"; ...@@ -383,6 +382,7 @@ import { uuid } from "../../util/data_util";
import VanillaTilt from "vanilla-tilt"; import VanillaTilt from "vanilla-tilt";
import "animate.css"; import "animate.css";
import { queryDoc, searchFiles } from '../../api/zfclk/wxgl'; import { queryDoc, searchFiles } from '../../api/zfclk/wxgl';
import VideoPlayer from "../../components/common/video_player.vue"
export default { export default {
data() { data() {
return { return {
...@@ -442,6 +442,9 @@ export default { ...@@ -442,6 +442,9 @@ export default {
tab_actives: "-1", //表格切换 tab_actives: "-1", //表格切换
}; };
}, },
components: {
VideoPlayer
},
props: { props: {
clientDetails: { clientDetails: {
type: Object, type: Object,
...@@ -500,7 +503,7 @@ export default { ...@@ -500,7 +503,7 @@ export default {
queryDoc(pageNum, _this.pageSize, _this.paramData).then((data) => { queryDoc(pageNum, _this.pageSize, _this.paramData).then((data) => {
setTimeout(() => { setTimeout(() => {
if (data.list.length != 0) { if (data.list.length != 0) {
data.list.forEach(item=>{ data.list.forEach(item => {
//用户判断此格式是否是视频格式 //用户判断此格式是否是视频格式
let video_type = false; let video_type = false;
//用户判断此格式是否是音频格式 //用户判断此格式是否是音频格式
...@@ -515,8 +518,8 @@ export default { ...@@ -515,8 +518,8 @@ export default {
img_type = true; img_type = true;
} }
}); });
if(video_type || img_type){ if (video_type || img_type) {
item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName='+item.file.uuid+'&'+new Date().getTime(); item.imgUrl = 'api/rest/file/viewPicture/DocumentPicture?objectName=' + item.file.uuid + '&' + new Date().getTime();
} }
}) })
_this.tableData = data.list; _this.tableData = data.list;
...@@ -594,16 +597,17 @@ export default { ...@@ -594,16 +597,17 @@ export default {
} }
}); });
if (video_type) { if (video_type) {
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
_this.title = "正在播放视频---" + row.name; _this.title = "正在播放视频---" + row.name;
_this.centerDialogVisible_video = true; _this.centerDialogVisible_video = true;
setTimeout(function () { // setTimeout(function () {
// let path_srt = "api/rest/file/download/Document/"; // // let path_srt = "api/rest/file/download/Document/";
// path_srt = path_srt + row.file.uuid; // // path_srt = path_srt + row.file.uuid;
// _this.video_src = path_srt; // // _this.video_src = path_srt;
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}` // _this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
if (document.getElementById("video").currentTime != 0) // if (document.getElementById("video").currentTime != 0)
document.getElementById("video").currentTime = 0; // document.getElementById("video").currentTime = 0;
}, 500); // }, 500);
} else if (sound_type) { } else if (sound_type) {
_this.title_sound = "正在播放音频---" + row.name; _this.title_sound = "正在播放音频---" + row.name;
_this.centerDialogVisible_sound = true; _this.centerDialogVisible_sound = true;
......
src/view/fzjc/znfx.vue
View file @ deb50e5d
This diff is collapsed.
src/view/sjgl/wxk_public.vue
View file @ deb50e5d
...@@ -271,8 +271,10 @@ ...@@ -271,8 +271,10 @@
<el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px"> <el-dialog :title="title" :visible.sync="centerDialogVisible_video" center width="800px">
<div style="height: 400px; position: relative"> <div style="height: 400px; position: relative">
<video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%" <!-- <video id="video" class="" preload="meta" controls width="100%" object-fit="fill" height="100%"
controlslist="nodownload" :src="video_src" disablePictureInPicture muted autoplay></video> controlslist="nodownload" :src="video_src" disablePictureInPicture muted autoplay type="video/x-flv"></video> -->
<VideoPlayer v-if="centerDialogVisible_video" :src="video_src"></VideoPlayer>
</div> </div>
</el-dialog> </el-dialog>
...@@ -300,7 +302,7 @@ import { ...@@ -300,7 +302,7 @@ import {
import { uuid } from "../../util/data_util"; import { uuid } from "../../util/data_util";
import BigfileUpload from "../../components/common/bigfile_upload.vue"; import BigfileUpload from "../../components/common/bigfile_upload.vue";
import { fileMd5Sum, getFileMD5Progress } from '../../util/file_md5.js'; import { fileMd5Sum, getFileMD5Progress } from '../../util/file_md5.js';
import VideoPlayer from "../../components/common/video_player.vue"
export default { export default {
data() { data() {
return { return {
...@@ -370,7 +372,8 @@ export default { ...@@ -370,7 +372,8 @@ export default {
}; };
}, },
components: { components: {
BigfileUpload BigfileUpload,
VideoPlayer
}, },
props: { props: {
clientDetails: { clientDetails: {
...@@ -516,17 +519,18 @@ export default { ...@@ -516,17 +519,18 @@ export default {
} }
}); });
if (video_type) { if (video_type) {
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
_this.title = "正在播放视频---" + row.name; _this.title = "正在播放视频---" + row.name;
_this.centerDialogVisible_video = true; _this.centerDialogVisible_video = true;
setTimeout(function () { // setTimeout(function () {
// let path_srt = "api/rest/file/download/Document/"; // // let path_srt = "api/rest/file/download/Document/";
// path_srt = path_srt + row.file.uuid; // // path_srt = path_srt + row.file.uuid;
// _this.video_src = path_srt; // // _this.video_src = path_srt;
_this.video_src = `api/rest/file/playVideo/Document?objectName=${row.file.uuid}`
if (document.getElementById("video").currentTime != 0) // // if (document.getElementById("video").currentTime != 0)
document.getElementById("video").currentTime = 0; // // document.getElementById("video").currentTime = 0;
}, 500); // }, 500);
} else if (sound_type) { } else if (sound_type) {
_this.title_sound = "正在播放音频---" + row.name; _this.title_sound = "正在播放音频---" + row.name;
_this.centerDialogVisible_sound = true; _this.centerDialogVisible_sound = true;
......
video.html
View file @ deb50e5d
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<script type="text/javascript"> <script type="text/javascript">
var myPlayer = videojs('my-video', { var myPlayer = videojs('my-video', {
sources: [{ sources: [{
src: "http://192.168.168.213:8081/rest/file/playVideo/Document?objectName=wu_1hglhdmhs5u313gdtm816b8166eb2.mp4", src: "http://192.168.168.213:8081/rest/file/playVideo/Document?objectName=352D6E02-E21E-4A63-96BC-9C2B60BB4DF7.mp4",
autoplay: true, autoplay: true,
playbackRates: [0.5, 1, 1.5, 2] //倍速播放 playbackRates: [0.5, 1, 1.5, 2] //倍速播放
}] }]
......
video1.html 0 → 100644
View file @ deb50e5d
<!DOCTYPE html>
<html lang="en">
<head>
<title>video</title>
<script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
</head>
<body>
<div>
<video id="my-player" preload="auto" muted autoplay >
<source src="">
</video>
</div>
</body>
</html>
<script>
// 获取video节点
videoElement = document.getElementById('my-player');
if (flvjs.isSupported()) {
flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: 'http://192.168.168.213:8081/rest/file/playVideo/Document?objectName=B34A2275-17FE-4CBB-8324-F97E5ACD37FB.flv',//flv格式流地址
},{
enableWorker: false, //不启用分离线程
enableStashBuffer: false, //关闭IO隐藏缓冲区
reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
autoCleanupSourceBuffer: true //自动清除缓存
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
flvPlayer.play();//播放
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment