flvjs的使用案例

最新推荐文章于 2025-05-23 14:17:42 发布

原创最新推荐文章于 2025-05-23 14:17:42 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flvjs的使用案例 #flvjs的使用 #flvjs

javascript 同时被 3 个专栏收录

61 篇文章

订阅专栏

nodejs

21 篇文章

订阅专栏

flvjs

1 篇文章

订阅专栏

本文提供了一个flvjs的使用案例，包括如何下载FLV视频、创建HTTP服务器以及构建HTML文件来播放视频。通过安装ibili下载FLV视频，然后启动HTTP服务器，最后创建包含flvjs播放器的HTML页面，即可实现FLV视频在web上的播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flvjs的使用案例

flvjs是web播放flv视频的解决方案，想了解源代码的可以点击这里
以下是flv的使用案例
第一步：首先最好本地有一个flv格式的视频，如果没有flv格式的视频，要是有其他格式的视频，你可以使用格式工厂转换成flv格式的视频，如果什么都没有，那只能下载flv视频了，以下是一个下载方法：
安装 ibili

npm i ibili

// demo.js
const ibili = require('ibili')
ibili.downloadVideo({
    url:"https://www.bilibili.com/video/av15227278?from=search&seid=6989940095426996551"
}).then(()=>{
    console.log("视频下载完成！")
})

这段代码可以下载周杰伦告白气球MV 的 flv视频，运行 node demo 就可以下载了，另外对 ibili 感兴趣的可以点击这里
下载完之后可以看见，media文件夹下面有一个 24783431-1-15.flv ，准备工作算是完成了
第二步：创建一个 http服务器，内容如下:

// server.js
const http = require('http')
const fs = require("fs")
http.createServer((__req, __res)=>{
    __res.setHeader("Access-Control-Allow-Origin","*")
    __res.setHeader("Content-Type","video/x-flv")
    fs.createReadStream("./media/24783431-1-15.flv").pipe(__res)
}).listen(3000,function(){
    console.log('server is running at http://localhost:3000')
})

运行 node server 启动http服务器
第三步：创建一个 html文件，内容如下：

<!-- demo.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./node_modules/flv.js/dist/flv.min.js"></script>
    <title>Document</title>
</head>
<body>
    <video id="videoElement" controls style="outline: none;"  ></video>
    <script>
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                url: 'http://localhost:3000',
                hasAudio:true,
                hasVideo:true,
                enableStashBuffer: true
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>