鍍金池/ 問(wèn)答/HTML5  HTML/ vue 中使用html5 video標(biāo)簽動(dòng)態(tài)獲取src報(bào)錯(cuò)

vue 中使用html5 video標(biāo)簽動(dòng)態(tài)獲取src報(bào)錯(cuò)

在使用vue并配合elementUI開(kāi)發(fā)中,將video放到一個(gè)彈窗插件中,頁(yè)面的渲染正常,能夠獲得src,但是控制臺(tái)報(bào):
GET http://xxxx.xxx.xxxx.com/vide... 403 (Forbidden)

<template>

<div class="app-container">
    <div class="container-wrapper">
        <Header></Header>

        <Nav></Nav>

        <div class="main-wrapper yzb light-overscroll">
            <section class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/collisionUpload' }">碰撞上傳</el-breadcrumb-item>
                    <el-breadcrumb-item>上傳記錄</el-breadcrumb-item>
                </el-breadcrumb>
            </section>

            <section class="formation">
                <el-form ref="ruleForm" :label-position="labelPosition" v-loading="tableloading" label-width="80px">
                    <el-form-item label="手機(jī)號(hào)碼" prop="sortId">
                        {{phone}}
                    </el-form-item>
                    <el-form-item label="上傳視頻次數(shù)" prop="nickname">
                        {{num}}
                    </el-form-item>
                    <el-form-item label="詳情">
                        <section class="table">

                            <el-table :data="tableData" style="width: 80%;">
                                <el-table-column label="上傳時(shí)間">
                                    <template scope="scope"><p>{{ scope.row.createdDateStr }}</p></template>
                                </el-table-column>
                                <el-table-column label="視頻大小">
                                    <template scope="scope"><p>{{ scope.row.size }}</p></template>
                                </el-table-column>
                                <el-table-column label="操作" width="65">
                                    <template scope="scope">
                                        <el-button size="small" class="button-link" @click="handleDetail(scope.row)">{{activeBtn}}</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </section>
                    </el-form-item>
                    <div class="button-box">
                        <el-button type="primary" size="large" class="button-cancle" @click.native="historyBack">返回</el-button>
                    </div>
                </el-form>
            </section>

        </div>

        <el-dialog :visible.sync="videoVisible" class="videoBox">
           <video :src="url" controls width="960">
             您的瀏覽器不支持 video 標(biāo)簽。
             Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 video 標(biāo)簽。
           </video>
        </el-dialog>
        
    </div>
</div>

</template>

<script>
import { dangerMediaUploadLog } from "../api/api";

export default {
data() {

return {
  imei: this.$route.query.imei,
  num: this.$route.query.num,
  phone: this.$route.query.phone,
  tableData: [],
  labelPosition: "right",
  tableloading: false,
  videoVisible: false,
  url:'',
  activeBtn: "",
};

},
mounted() {

this.getTopicDetails();

},

methods: {

/****************************/
// 返回上一級(jí)
/****************************/
historyBack() {
  this.$router.go(-1);
},
/****************************/
// 獲取頁(yè)面信息
/****************************/
getTopicDetails() {
  if (!this.imei) {
    return false;
  }
  this.tableloading = true;
  let param = { imei: this.imei };

  dangerMediaUploadLog(param).then(res => {
    this.tableloading = false;
    let { msg, code, data } = res;

    if (code !== 0) {
      this.$message({ message: msg, type: "error" });
    } else {
      this.tableData = data.list;
      for (let i = 0; i <= data.list.length; i++) {
        let url = data.list[i].url;
        let d = /\.[^\.]+$/.exec(url);
        if (d[0] == ".ts") {
          this.activeBtn = "下載";
        } else {
          this.activeBtn = "播放";
        }
      }
    }
  });
},
/****************************/
// 播放
/****************************/
handleDetail(row) {
  let d = /\.[^\.]+$/.exec(row.url);
  if (d[0] == ".ts") {
    window.location.href = row.url;
  } else {
    this.videoVisible = true;
    let _this = this;
    setTimeout(function() {
      _this.url = row.url;
    },1000)
  }
}

}
};
</script>

回答
編輯回答
離魂曲

遇到同樣的問(wèn)題 解決了嗎?

2018年2月7日 13:00