关于WEB无插件播放视频的实现

在window系统下，可以使用命令行建立符号链接，命令格式为：

mklink /D d:\srcDir d:\targetDir

本文介绍了数种web播放视频的方案，各有优缺点，需根据实际使用场景选择，其中第一、二种方式在用户体验上皆有明显的不足之处，相对于第二种的物理分割，第三种方式显然根据优势，但由于对MP4文件的了解仍然不足，因此尚未找到合适的取流方案，这将是该方案今后最重要的优化方向。

1 背景

本文旨在提出在web网页中播放视频文件的解决方案，并给出几种版本的代码实现。

在本文的前一篇“关于WEB无插件播放视频的实现”中提到，当前业内实现WEB视频播放的方式主要有：使用OCX 插件、使用 flash 插件、使用HTML5 的 Video 标签、使用canvas实时绘制图片模拟，并分析了这几种方式的优缺点及适合的使用场景。

根据项目的实际情况以及当前的技术水平，本方案将采用HTML5 的 Video 标签播放mp4文件。

2 难点分析

在该项目中，服务器端存储有未经过转码的视频文件，大小不一，视文件时长，小至数M，大至约2G，该类文件非标准MP4文件，使用前需经过转码库转码，该过程在服务端进行，客户端的主要工作为：在WEB页面中嵌入一个视频播放器，以实现视频文件的播放、暂停、快进、慢放、下载、全屏播放、跳转进度等功能。

Figure SEQ Figure \* ARABIC 1 时序图1

 

但如此则加大了服务器端的负荷，并且需要客户端在修改拖动修改进度的时候向服务端发送偏移量，而原生的video标签并不具备此项功能。

更好的做法是，在客户端发送播放请求时，服务端开启转码工作，并生成一个临时文件，读取该临时文件的文件流发送给客户端，这样即便有多个用户请求播放同一个视频文件时，也无需多次执行转码。其工作的时序图如下：

Figure SEQ Figure \* ARABIC 2 时序图2

 

然而，此种方式在播放较大的文件时仍然存在问题，即播放大文件时，虽然在响应头中设置了content-length字段，但在客户端实际抓包时发现该字段并未生效，而是被Transfer-Encoding:chunked字段替代。原因在于：当不能预先确定报文响应体的长度或者报文响应体的长度过大时，无法使用content-length字段来指明报文长度，需要通过Transfer-Encoding域来替代。

Transfer-Encoding:chunked用于http传送过程的分块传输技术，原因是http服务器响应的报文长度经常是不可预测的，使用content-length的实体搜捕并不是总是管用。分块技术的意思是说，实体被分成许多的块（Data chunk），也就是应用层的数据，TCP在传送的过程中，不对它们做任何的解释，而是把应用层产生数据全部理解成二进制流，然后按照一定的长度切成一段的，然后一次性给TCP协议去传输，而具体这些二进制的数据如何做解释，需要应用层来完成，所以在这之前，一快整体应用层的数据需要等它分成的所有TCP segment到达对方，重新组装后，应用程序才使用自己的解码方法还原它们。

因为video标签的请求处理是浏览器原生实现，无法通过js代码强行修改，因此实现大文件播放的主要工作是修改服务器的响应逻辑，迎合video标签发出的请求。

3 代码实现

服务端响应大文件播放请求的关键在于对响应头中的“Content-Length”和“Content-Range”属性以及请求状态码的处理。

播放小文件（一次请求就可传输完整个视频文件内容）的时候，仅需将“Content-Length”设置为文件的大小，并将状态码设置为“200”即可正常播放。但在播放大文件的时候，一次请求无法传输整个视频文件，客户端会与服务端进行多次请求直至完成加载整个视频文件。服务端需要在客户端发出第一次请求后，设置“Content-Length”设置为文件的大小，并设置“Content-Range”，具体的格式为“bytes 0-(f-1)/f”，其中变量f为文件的大小，例如视频文件大小为 96361162，则“Content-Range”的值应当设置为“bytes 0-96361161/96361162”，同时，需要将状态码设置为“206”。

如此客户端可以得知文件的总大小（此过程中可能还包括头文件的内容，因条件所限未做验证，但不影响代码实现），并据此放弃第一次请求，开始分多次加载整个文件的内容。Video之后的每次请求都修改请求头的“Range”属性，这个属性代表偏移量，当用户拖动进度条向服务端传递偏移量时也是通过这个属性。

“Range”属性的格式通常为“byte=a-b”， 其中a代表起始偏移量，b代表终止偏移量，b-a则表示本次请求需要获取的文件块大小。服务端需要根据“Range”属性设置相应的响应头属性“Content-Length”与“Content-Range”，具体规则为：

1、“Content-Length”设置为b减去a加1

2、“Content-Range”设置为“bytes a-b/f”，f为文件的总大小

3、a与b皆为可选参数，但至少要有一个，若a为空，则默认为f减去b，若b为空，则默认为f减去1。

流程图如下：

Figure 3 服务端请求处理流程图

 

由此可以看出video第一次发送请求时，请求头中的“Range”属性为“byte=0-”，事实上也确实如此。此外，服务端本次请求回传给客户端的文件内容大小也需要遵循此规则。

下面给出NodeJS版与java版的服务器代码实现：

 

NodeJS版本：

 

// 初始化需要的对象

var http = require("http");

var fs = require("fs");

var path = require("path");

var url = require("url");

 

// 初始的目录

//var initFolder = "D:\\work\\node\\workspace\\video";

var initFolder = process.cwd()

 

// MIME字典

var mimeNames = {

    ".css": "text/css",

    ".html": "text/html",

    ".js": "application/javascript",

    ".mp3": "audio/mpeg",

    ".mp4": "video/mp4",

    ".ogg": "application/ogg",

    ".ogv": "video/ogg",

    ".oga": "audio/ogg",

    ".txt": "text/plain",

    ".wav": "audio/x-wav",

    ".webm": "video/webm"

};

// 创建服务，监听8080端口

http.createServer(httpListener).listen(8080);

 

// 发送响应

function sendResponse(response, responseStatus, responseHeaders, readable) {

    response.writeHead(responseStatus, responseHeaders);

 

    if (readable == null)

        response.end();

    else

        readable.on("open", function () {

            readable.pipe(response);

        });

 

    return null;

}

 

function getMimeNameFromExt(ext) {

    var result = mimeNames[ext.toLowerCase()];

    //默认值

    if (result == null) result = "application/octet-stream";=

    return result;

}

 

function readRangeHeader(range, totalLength) {

    if (range == null || range.length == 0) return null;

    var array = range.split(/bytes=([0-9]*)-([0-9]*)/);

    var start = parseInt(array[1]);

    var end = parseInt(array[2]);

    var result = {

        Start: isNaN(start) ? 0 : start,

        End: isNaN(end) ? (totalLength - 1) : end

    };

   

    if (!isNaN(start) && isNaN(end)) {

        result.Start = start;

        result.End = totalLength - 1;

    }

    if (isNaN(start) && !isNaN(end)) {

        result.Start = totalLength - end;

        result.End = totalLength - 1;

    }

    return result;

}

 

// 监听http请求

function httpListener(request, response) {

    // We will only accept 'GET' method. Otherwise will return 405 'Method Not Allowed'.

    if (request.method != 'GET') {

        sendResponse(response, 405, { 'Allow': 'GET' }, null);

        return null;

    }

 

    var filename =

        initFolder + url.parse(request.url, true, true).pathname.split('/').join(path.sep);

 

    // Check if file exists. If not, will return the 404 'Not Found'.

    if (!fs.existsSync(filename)) {

        sendResponse(response, 404, null, null);

        return null;

    }

 

    var responseHeaders = {};

    var stat = fs.statSync(filename);

    var rangeRequest = readRangeHeader(request.headers['range'], stat.size);

 

    // If 'Range' header exists, we will parse it with Regular Expression.

    if (rangeRequest == null) {

        responseHeaders['Content-Type'] = getMimeNameFromExt(path.extname(filename));

        responseHeaders['Content-Length'] = stat.size;  // File size.

        responseHeaders['Accept-Ranges'] = 'bytes';

 

        //  If not, will return file directly.

        sendResponse(response, 200, responseHeaders, fs.createReadStream(filename));

        return null;

    }

 

    var start = rangeRequest.Start;

    var end = rangeRequest.End;

 

    // If the range can't be fulfilled.

    if (start >= stat.size || end >= stat.size) {

        // Indicate the acceptable range.

        responseHeaders['Content-Range'] = 'bytes */' + stat.size; // File size.

 

        // Return the 416 'Requested Range Not Satisfiable'.

        sendResponse(response, 416, responseHeaders, null);

        return null;

    }

 

    // Indicate the current range.

    responseHeaders['Content-Range'] = 'bytes ' + start + '-' + end + '/' + stat.size;

    responseHeaders['Content-Length'] = start == end ? 0 : (end - start + 1);

    responseHeaders['Content-Type'] = getMimeNameFromExt(path.extname(filename));

    responseHeaders['Accept-Ranges'] = 'bytes';

    responseHeaders['Cache-Control'] = 'no-cache';

 

    // Return the 206 'Partial Content'.

    console.log(start,end)

    sendResponse(response, 206,

        responseHeaders, fs.createReadStream(filename, { start: start, end: end }));

}