连接网络服务器后，如何在网络浏览器上播放视频？答案

【问题标题】：How can i play the video on web browser when i connected web server?连接网络服务器后，如何在网络浏览器上播放视频？
【发布时间】：2015-12-01 16:10:07
【问题描述】：

我在 Ubuntu 上使用 node.js 制作了 Web 服务器。

我想在播放器连接到网络服务器时显示视频。

index.html

<html>
 <body>
  <video width='400' controls>
   <source src='b.mp4' type='video.mp4'>
  </video>
 </body>
</html>

webserver.js

 var app = require('http').createServer(handler)
        , fs=require('fs');

    app.listen(1233);

    function handler(req, res){
     rs.readFile(__dirname + '/index.html',
     function(err,data){
      if(err){
       res.writeHead(500);
       return res.end('Error loading index.html');
      }
    res.writeHead(200);
    res.end(data);

    }); }

当我运行网络服务器并连接网络服务器时，视频没有在网络浏览器上播放。我只能看到黑匣子和视频控制栏。

但是，当我在 Ubuntu（未运行服务器）上打开 html 文件时，视频播放良好。

连接网络服务器后如何在网络浏览器上播放视频？

谢谢你:)

【问题讨论】：

标签： javascript html video html5-video node.js-stream

【解决方案1】：

当浏览器请求 /b.mp4 时，您的 JavaScript 服务器会获取 index.html 并将其发送到浏览器。

您需要注意所请求的 URL（可通过 req 对象获得）并为其提供适当的内容（使用适当的 content-type 响应标头）。

【讨论】：

【解决方案2】：

我最近开始使用 Node.JS。我想谈谈你的倒数第二行

“当我连接网络服务器时，如何在网络浏览器上播放视频？”

到目前为止，我已经找到了两种使用 nodejs 服务器在客户端浏览器上呈现视频/音频的方法。我将分享两种方式的代码。

一种方法是在客户端的浏览器上加载一个 HTML 页面（index.html，其中已经使用标签嵌入了视频），并准备好播放视频播放器。第二种方法是直接将视频作为服务器的响应发送到您的网络浏览器。后一种方法可能需要也可能不需要 HTML，取决于您真正想要如何实现这一点。

我不想使用像 1233 这样的小端口号，而是想公平对待网络，假设我们要使用 8383 端口号。

方法1：渲染一个已经嵌入视频播放器的HTML页面。我正在考虑您的 webserver.js 和 index.html 文件位于同一目录中。这是满足您要求的东西-

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/'));

var ipAddress = process.env.OPENSHIFT_NODEJS_IP;
var port = process.env.OPENSHIFT_NODEJS_PORT || 8383;

app.listen(port, ipAddress);

运行你的 webserver.js 并在你的浏览器上输入 http://localhost:8383/index.html ！

方法 2 - 如果你想使用 require('http") 来实现它，那么使用下面的代码 -

var http = require('http');
fileSystem = require('fs'),
path = require('path');
util = require('util');

http.createServer(function (req, response) {
    var filePath = path.join('./', 'b.mp4');
    var stat = fileSystem.statSync(filePath);

    response.writeHead(200, {
        "Content-Type": "video/mpeg",
        "content-size": stat.size
    });

    var readStream = fileSystem.createReadStream(filePath);

    readStream.on('data', function (data) {
        var flushed = response.write(data);
        // Pause the read stream when the write stream gets saturated
        if (!flushed)
            readStream.pause();
    });

    response.on('drain', function () {
        // Resume the read stream when the write stream gets hungry 
        readStream.resume();
    });

    readStream.on('end', function () {
        response.end();
    });

}).listen(8383);

运行 webserver.js 后，输入 http://localhost:8383/。

【讨论】：