视频在本地链接时不显示在页面中，但当源是一个URL时，就会显示出来。

Question

所以我在一个叫Goorm的云IDE上练习一些基本的东西，我想创建一个简单的页面，显示我直接上传到服务器上的视频，ejs文件和视频在同一个文件夹里，但是如果我把视频标签的src设置为 "mediadog.webm"，视频就不会显示出来，而只是空白，但是如果我把源设置为一个在线的URL，视频被上传到那里，就会加载。

<div style="text-align:center">
    <h1>
        DOG
    </h1>
    <video autoplay id="video1" width="420">
    <source src="https://somewebsite.com/dog.webm" type="video/webm" >
        Your browser shall not play this video
    </video>
<div/>

这段代码工作，但我几乎不知道为什么当src是 "mediadog.webm "或 "dog.webm "不工作，我已经尝试设置源作为完整的目录，在主文件夹和在同一目录下的.ejs文件和.js文件。我相信当我运行 "node index.js "时，它没有访问媒体内容的权限，所以它不能将本地存储的媒体内容加载到在.ejs文件中制作的页面中。

我期待的代码是下面的代码，如果我在我的机器上把它写成html，它就会工作，但是当Goorm从ejs中运行它时，它就不会工作。我99%确定这只是我遗漏的一个愚蠢的小东西，但我在任何地方都找不到解决方案。

<div style="text-align:center">
    <h1>
        DOG
    </h1>
    <video autoplay id="video1" width="420">
    <source src="media/dog.webm" type="video/webm" >
        Your browser shall not play this video
    </video>
<div/>

更多的信息，其他不加载媒体文件的简单的 ejs 也能顺利显示。我运行在3000端口。Ejs版本是3.1.2，Express版本是4.17.1。NodeJS版本是v10.16.3。Ubuntu 18.04.2 LTS x86_64。

编辑：在下面添加我在nodejs上运行的.js文件。

let express = require("express")
let app = express()

app.get("/", function(req, res){
    res.render("home.ejs")
})

app.get("/ovo/:coisa", function(req, res){
    let ags = req.params.coisa
    res.render("ogs.ejs", {coisaVar: ags})
})

app.get("/dog", function(req, res){
    res.render("dog.ejs")
})

app.listen(3000, function(){
    console.log("Server has started!")
})

Answer 1

你不能服务于你的静态文件（图像，字体，视频）只是这样。你使用的是服务器(node.js)，浏览器会请求html上的静态文件，而你的服务器会单独为它们服务。

所以第一步创建一个 public 文件夹在项目的根目录下。在公共目录里面移动你的视频。

现在配置express.js，让它在你的公共目录下提供任何服务。

let express = require("express")
let app = express()

// this is the line express is waiting for to serve your video !!!
app.use(express.static('public'))


app.get("/", function(req, res){
    res.render("home.ejs")
})

app.get("/ovo/:coisa", function(req, res){
    let ags = req.params.coisa
    res.render("ogs.ejs", {coisaVar: ags})
})

app.get("/dog", function(req, res){
    res.render("dog.ejs")
})

app.listen(3000, function(){
    console.log("Server has started!")
})

这是文档，你应该看看。https:/expressjs.comenstarterstatic-files.html）。

一切正常，现在尝试访问您的视频为 /media/dog.webm 在你的html中。让我知道它是如何进行的。运气好

Answer 2

试试。

"./media/" 相对路径，否则将尝试进入文档根目录。

<div style="text-align:center">
    <h1>
        DOG
    </h1>
    <video autoplay id="video1" width="420">
    <source src="./media/dog.webm" type="video/webm" >
        Your browser shall not play this video
    </video>
<div/>