我在React App中的渲染过程之后在React App中分配所需的媒体(视频)。但是在渲染完成后,它将不会将我的媒体文件视为静态文件。我所需模块的浏览器EncodeURL。
我有一堆CCTV录制文件,其位置存储在文本文件中。文本文件提供了一个响应应用的地址,该地址是需要应用内的各个模块。
import React, {Component, Fragment} from "react";
import {Header} from "./header";
import * as fs from 'browserify-fs';
import ReactFileReader from 'react-file-reader';
import dirlist from "./data.txt";
export default class Cam extends Component {
constructor(props)
{
super(props);
this.state={
text: "",
resource:[],
};
}
componentDidMount()
{
this.readTextFile(this.props.txt);
// this.timerFun()
}
readTextFile = file => {
var rawFile = new XMLHttpRequest();
rawFile.open("GET", dirlist, true);
rawFile.onreadystatechange = () => {
if (rawFile.readyState === 4) {
if (rawFile.status === 200 || rawFile.status == 0) {
var allText = rawFile.responseText;
this.setState({
text: allText
});
}
}
};
rawFile.send(null);
};
render ()
{
let myar= [];
let string = this.state.text.split("\n");
for (var entry of string.entries()) {
var entry = 'require("./' +entry+'")'
// console.log(entry)
this.state.resource.push(entry.replace(/[0-9],/,""))
}
console.log(this.state.resource)
// console.log(this.state.data)
return (
// <Header></Header>
// WRITE autoPlay in Beteween Video Tag for Auto Play
<Fragment>
<nav className="d-flex align-items-center">
<div className="nav-title mr-auto">Sunbots</div>
</nav>
<div className="camui">
<video ref="vidF" onEnded={this.next.bind(this)} width="440vw" height="230vh" controls src="" poster="https://i0.wp.com/anglicanfrontiers.com/wp-content/uploads/2019/01/Video-icon.png?ssl=1"></video>
</Fragment>
);
}
}
网络面板显示
当前:
http://localhost:3000/require(%22./cam04_2019_06_19__12_00_06.mp4%22)
(此处无法播放视频,因为javascript生成了所需模块的数组)
预期地址:
http://localhost:3000/static/media/cam01_2019_06_19__12_00_06.a6576fe4.mp4
(这里可以播放视频,因为我已在文件中将文件预定义为必需的模块)