zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

videoView

This commit is contained in:
shijing 2022-10-27 08:34:39 +08:00
parent f9766e1a80
commit 346ccb5fe7
3 changed files with 11361 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -8,8 +8,8 @@ VUE_APP_TITLE = '曲阳金隅安全智能管控平台'
#VUE_APP_API_BASEURL = http://1.203.161.103:2800/api
#VUE_APP_WS_API = 'ws://localhost:8000'
#VUE_APP_API_BASEURL = http://222.222.144.147:6013/api
#VUE_APP_API_BASEURL = http://10.99.5.79:20309/api
VUE_APP_API_BASEURL = http://127.0.0.1:8000/api
VUE_APP_API_BASEURL = http://10.99.5.79:20309/api
#VUE_APP_API_BASEURL = http://127.0.0.1:8000/api
#VUE_APP_BASEURL = http://127.0.0.1:8000

11301
src/utils/flv.js Normal file
View File

File diff suppressed because it is too large Load Diff

79
src/views/am/videoView.vue
View File

@ -1,6 +1,10 @@
<template>
<div style="height: 100%;width: 100%;">
<video id="videoElement" muted="muted" style="object-fit:fill"></video>
<div class="video-container">
<video name="videoElement" class="centeredVideo" controls autoplay>
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
</div>
</template>
<script>
@ -13,6 +17,7 @@ export default {
},
data() {
return {
Player: null,
flvPlayer: null,
params: {
json: {
@ -29,7 +34,8 @@ export default {
created() {
const scriptInfo = document.createElement("script");
scriptInfo.setAttribute("data-callType", "callScript");
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
// scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
scriptInfo.src = "../../utils/flv.js";
document.head.appendChild(scriptInfo);
},
mounted() {
@ -37,32 +43,63 @@ export default {
that.params.json.data.channelId = that.channelCode;
that.$API.am.video.item.req(that.params).then((res) => {
that.url = res.url;
let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
debugger;
console.log(URLS);
if (flvjs.isSupported()) {
debugger;
console.log(sysConfig.VUE_APP_VIDEOHOST);
debugger;
let videoElement = document.getElementById("videoElement");
let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
debugger;
console.log(URLS)
that.flvPlayer = flvjs.createPlayer({
type: "flv",
url: URLS,
});
that.flvPlayer.attachMediaElement(videoElement);
that.flvPlayer.load();
that.flvPlayer.play();
var mediaDataSource = {
type: 'flv',
hasAudio:false,
hasVideo:true,
isLive:false,
withCredentials:false,
url:URLS
};
that.flv_load(mediaDataSource);
}
});
},
methods:{
flv_load(mediaDataSource) {
debugger;
let that = this;
var element = document.getElementsByName('videoElement')[0];
if (that.player != null) {
that.player.unload();
that.player.detachMediaElement();
that.player.destroy();
that.player = null;
}
that.player = flvjs.createPlayer(mediaDataSource, {
enableWorker: false,
lazyLoadMaxDuration: 3 * 60,
seekType: 'range',
});
that.player.attachMediaElement(element);
that.player.load();
},
flv_start() {
that.player.play();
},
flv_pause() {
that.player.pause();
}
},
beforeUnmount(){
let that = this;
that.flvPlayer.pause();
that.flvPlayer.unload();
that.flvPlayer.detachMediaElement();
that.flvPlayer.destroy();
that.flvPlayer = null;
that.player.pause();
that.player.unload();
that.player.detachMediaElement();
that.player.destroy();
that.player = null;
},
};
</script>
<style>
.centeredVideo{
width: 100%;
height: 60vh;
}
</style>