node.js作為后端,前端頁面播放視頻時,無法拖動視頻控件進度條的解決辦法。


1. 前端的HTML頁面中直接寫視頻的地址,雖然可以播放,但是視頻的進度條將無法工作。

                <div class="watcht" >
                    <video id="player" width="620" height="452" controls>
                        <source src="/vedio/1-2.mp4" type="video/mp4">
                    </video>
                </div>

2. 后端需接受前端播放視頻時的GET請求,並回復對應的請求頭。

 var file = path.resolve(__dirname, "../vedio/1-2.mp4");
        fs.stat(file, function (err, stats) {
            if (err) {
                res.end(err);
            }
            var range = req.headers.range;
            var positions = range.replace(/bytes=/, "").split("-");
            var start = parseInt(positions[0], 10);
            var total = stats.size;
            var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
            var chunksize = (end - start) + 1;

            res.writeHead(206, {
                "Content-Range": "bytes " + start + "-" + end + "/" + total,
                "Accept-Ranges": "bytes",
                "Content-Length": chunksize,
                "Content-Type": "video/mp4"
            });

3. 發送請求頭后需創建文件流,發出請求的視頻文件

   var stream = fs.createReadStream(file, {start: start, end: end})
                .on("open", function () {
                    stream.pipe(res);
                }).on("error", function (err) {
                    res.end(err);
                });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM