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_API_BASEURL = http://1.203.161.103:2800/api
#VUE_APP_WS_API = 'ws://localhost:8000' #VUE_APP_WS_API = 'ws://localhost:8000'
#VUE_APP_API_BASEURL = http://222.222.144.147:6013/api #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://10.99.5.79:20309/api
VUE_APP_API_BASEURL = http://127.0.0.1:8000/api #VUE_APP_API_BASEURL = http://127.0.0.1:8000/api
#VUE_APP_BASEURL = http://127.0.0.1:8000 #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> <template>
<div style="height: 100%;width: 100%;"> <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> </div>
</template> </template>
<script> <script>
@ -13,6 +17,7 @@ export default {
}, },
data() { data() {
return { return {
Player: null,
flvPlayer: null, flvPlayer: null,
params: { params: {
json: { json: {
@ -29,7 +34,8 @@ export default {
created() { created() {
const scriptInfo = document.createElement("script"); const scriptInfo = document.createElement("script");
scriptInfo.setAttribute("data-callType", "callScript"); 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); document.head.appendChild(scriptInfo);
}, },
mounted() { mounted() {
@ -37,32 +43,63 @@ export default {
that.params.json.data.channelId = that.channelCode; that.params.json.data.channelId = that.channelCode;
that.$API.am.video.item.req(that.params).then((res) => { that.$API.am.video.item.req(that.params).then((res) => {
that.url = res.url; that.url = res.url;
debugger;
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); let URLS = res.url.replace('192.168.10.253',sysConfig.VUE_APP_VIDEOHOST);
debugger; debugger;
console.log(URLS) console.log(URLS);
that.flvPlayer = flvjs.createPlayer({ if (flvjs.isSupported()) {
type: "flv", var mediaDataSource = {
url: URLS, type: 'flv',
}); hasAudio:false,
that.flvPlayer.attachMediaElement(videoElement); hasVideo:true,
that.flvPlayer.load(); isLive:false,
that.flvPlayer.play(); 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(){ beforeUnmount(){
let that = this; let that = this;
that.flvPlayer.pause(); that.player.pause();
that.flvPlayer.unload(); that.player.unload();
that.flvPlayer.detachMediaElement(); that.player.detachMediaElement();
that.flvPlayer.destroy(); that.player.destroy();
that.flvPlayer = null; that.player = null;
}, },
}; };
</script> </script>
<style>
.centeredVideo{
width: 100%;
height: 60vh;
}
</style>