鍍金池/ 問答/HTML/ webvideoctrl在vue中總是無法被引用到

webvideoctrl在vue中總是無法被引用到

使用webvideoctrl+vue做視頻監(jiān)控的功能,webvideoctrl.js是??低暤膚eb監(jiān)控視頻組件提供的純js文件,我在對(duì)應(yīng)vue文件中import它,source里面可以看到它被引用了,但是控制臺(tái)一直在報(bào)
Uncaught ReferenceError: WebVideoCtrl is not defined
的錯(cuò)誤,組件中引用的其它js文件和css文件都能正確引用

clipboard.png

頁面上也沒有視頻的任何顯示

clipboard.png

<template>

<div class="container">
    <el-form ref="form" :model="form"  label-width="80px" v-loading="loading">
<div class="listchoice">
        <label>選擇通道</label>
        <select v-model="videoAddress" placeholder="請(qǐng)選擇索要查看的視頻監(jiān)控地點(diǎn)" class="selected"  @change="clickStartRealPlay(videoaddress);">
            <option v-for="item in facaddress" :label="item.name" :value="item.id" :key="item.id"></option>
        </select>    
        <table cellpadding="0" cellspacing="3" border="0" style="display:none;">
        <tr>
            <td><input id="loginip" type="text" class="txt" v-model="form.ipAddr" /></td>
            <td><input id="port" type="text" class="txt" v-model="form.port" /></td>
        </tr>
        <tr>
            <td><input id="username" type="text" class="txt" v-model="form.username" /></td>
            <td><input id="password" type="password" class="txt" v-model="form.password"/></td>
        </tr>
    </table>
</div>
    <div class="video_info">
        <!--<video id="divPlugin" class="plugin" controls preload="auto" :style="'text-align:'+'center'">
                 <source   :src="videos" type="application/x-mpegURL">
        </video>-->
        <div id="divPlugin" class="plugin"></div>
    </div>

</el-form>

</div>

</template>
<script>

import  '../../../js/jquery-1.7.1.min.js'
import webVideoCtrlNU from '../../../js/webVideoCtrl.js'
import demoNU from '../../../js/demo.js'
var obj;

export default{

...webVideoCtrlNU,
...demoNU,
created(){
    this.$http({
                  method: 'get',
                  responseType : 'json',
                  url: this.$store.state.baseUrl+'/'+this.module+'/'+this.$route.params.id+'/',
                  params: {
                    access_token:this.$store.state.token
                  }
                }).then(response=>{
                    this.form=response.data
                    //this.$store.state.baseUrl+"/upload/image"+this.form.url
                }).catch(error => {
                         this.loading=false
                         
                    if (error.response) {
                        
                  // 請(qǐng)求已發(fā)出,但服務(wù)器響應(yīng)的狀態(tài)碼不在 2xx 范圍內(nèi)
                          if(error.response.status==403){
                              this.$message({message:'登錄過期',type:'error',showClose:true});
                              this.$store.commit('logout')
                              this.$router.push({ path: ('/login') })
                          }else if(error.response.status==401){
                              this.$message({message:'用戶名/密碼錯(cuò)誤',type:'error',showClose:true});
                          }else if(error.response.status==400){
                              this.$message({message:error.response.data.msg,type:'error',showClose:true});
                          }
                        } 

// else {
// this.$message({message:'服務(wù)器異常,請(qǐng)聯(lián)系管理員',type:'error',showClose:true});
// }

                       // console.log(error.config);
                    //this.$message({message:'用戶名/密碼錯(cuò)誤',type:'error',showClose:true});
                    })
    
},
        
data(){
    return{
        loading:false,
        module:'videoConfig',
        factorys:[],
        facaddress:[],
        videoIp:[],
        query:{
        key:'',
        factoryId:'',
    },
        form:{
                
        },
    }
    
},
methods:{
    
    clickStartRealPlay(){
        
    },
    clickStopRealPlay(){
        
    },
},
mounted(){

// this.search(obj,function(obj){
// for(var key in obj){
// alert(obj[key].ipAddr);
// }
// })

}

}
</script>

<style>

.container{
    width:100%;
    height:680px;
}
.listchoice{
    width:20%;
    float:left;
    border-right:solid #eee 1px;
    height:680px;
    padding-top:10px;
    box-sizing:border-box;
}
.listchoice label{
    width:40%;
    display:left;
    display:block;
    text-align:center;
    margin:0 auto;
    height:30px;
    box-sizing:border-box;
    float:left;
    line-height:30px;
    font-size:16px;
}
.selected{
    width:50%;
    margin:0 auto;
    text-align:center;
    display:block;
    height:30px;
    box-sizing:border-box;
}
.video_info{
    width:77%;
    border:solid #eee 1px;
    float:right;
    height:680px;
    margin-right:2%;
}
.listchoice input{
    width:40%;
    display:block;
    float:left;
    margin:5%;
    box-sizing:border-box;
}

</style>

新建了一個(gè)vue項(xiàng)目來引用后界面顯示Deleting local variable in strict mode錯(cuò)誤,控制臺(tái)報(bào)錯(cuò):

clipboard.png

我開始懷疑是jquery和vue中的$沖突,在demo.js中var jq=jQuery.noConflict();后還是同樣的錯(cuò)誤,沒有影響,同時(shí),直接alert內(nèi)容有效果,所以應(yīng)該是WevVideoCtrl的對(duì)象無法引用

怎么能夠正確引用webVideoCtrl并且使前端和demo一樣正常顯示,選擇通道下拉框能讀到webVideoCtr.js給的數(shù)據(jù)并且右側(cè)有視頻畫面,如demo所示

clipboard.png

回答
編輯回答
歆久

js文件應(yīng)該放在static里面,然后用index.HTML引用
雖然你問題已經(jīng)解決,但是我還是要傳一下解決方法,方便后來人


另外我考試過了,不用你養(yǎng)我了/手動(dòng)滑稽

2018年2月18日 19:56
編輯回答
冷咖啡

是js引用錯(cuò)誤,應(yīng)該將三個(gè)需要引用的js放在static文件夾里,然后在index.html里進(jìn)行引用

clipboard.png

clipboard.png

2018年5月21日 07:39