In the development of the whole stack when, html page needs to show some pictures, videos and the like resources. These resources are called "static resources", that is, for each user are the same in terms of resources. Writing this blog by comparing before and after the end of the invocation of a static resource record access methods to express under the framework of static resources.
Front-end call static resources
Entering the front of the comrades should know, call the static resources in the front just to test the program, "delaying tactic", because the resource pages must have come from back-end server. Under no circumstances docking server in order to play the video, for example, the front end is how to achieve it.
Since only the front end of that video can only be a resource locally. Video and html files should be in the same directory:
Enter the following code in the video, html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
<p>video:</p>
<video id="video1" controls width="300px" autoplay>
<source src="1.mp4" type="video/mp4">
</video>
</body>
</html>
From the html code path is determined by the video inside the video tag src = "1.mp4" decision, because html files and video files in the same directory, the address to write directly to the file name.
Express access static resources
When the frontend to display static resources back end, it becomes a more meticulous. First, node.js need static files in a static directory.
Static directory approach:
1. Create a new folder in the project named public.
2. The static resources entirely on the public folder, this will 1.mp4 put:
3. Set the static path in app.js, first import the module path:
const path = require('path');
4. Set the static path. __dirname is mean absolute directory of the current file.
app.use('/static',express.static(path.join(__dirname,'public')));
JS code to achieve:
JS code more casual, need only transmit static html page and set the path just fine.
var express = require('express');
var app = express();
const path = require('path');
app.use('/static',express.static(path.join(__dirname,'public')));
app.get('/', function (req, res) {
res.sendFile( __dirname + "/" + "video.html" );
});// 显示html页面
var server = app.listen(8080, function () {
var host = server.address().address;
var port = server.address().port;
// 服务器IP地址为127.0.0.1 端口为8888
console.log( "server is running"+host+port);
});
HTML5 code to achieve:
html5 code requires slightly modified path. The original 1.mp4 modify the static / 1.mp4. The project is the project root directory, and video in a subdirectory in the project, and therefore need to add the file directory virtual path identifier + "static".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
</head>
<body>
<p>video:</p>
<video id="video1" controls width="300px" autoplay>
<source src="static/1.mp4" type="video/mp4">
</video>
</body>
</html>
Code run, completed:
