当我连接网络服务器时,如何在网络浏览器上播放视频?

时间:2015-09-05 17:50:26

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

我在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文件(没有运行服务器)时,视频播放效果很好。

当我连接网络服务器时,如何在网络浏览器上播放视频?

谢谢:)

2 个答案:

答案 0 :(得分:0)

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

您需要注意所请求的网址(可通过req对象获取)并为其提供相应的内容(使用相应的content-type响应标头)。

答案 1 :(得分:0)

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

  

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

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

一种方法是在客户端的浏览器上加载HTML页面(index.html,其中视频已使用标记嵌入),视频播放器已准备好播放。第二种方式是直接将视频作为服务器响应发送到您的Web浏览器。后一种方法可能需要也可能不需要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/