{"id":13912489,"url":"https://github.com/zhw2590582/FlvPlayer","last_synced_at":"2025-07-18T12:31:10.042Z","repository":{"id":57239233,"uuid":"185755391","full_name":"zhw2590582/FlvPlayer","owner":"zhw2590582","description":":lollipop: FlvPlayer.js is a JavaScript player for decode flv to the canvas","archived":true,"fork":false,"pushed_at":"2021-11-21T10:39:44.000Z","size":15228,"stargazers_count":307,"open_issues_count":5,"forks_count":83,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-24T23:16:20.722Z","etag":null,"topics":["aac","audiocontext","canvas","flv","h264","http-flv","player","video","webassembly","webgl","websocket-flv","worker"],"latest_commit_sha":null,"homepage":"https://flvplayer.js.org","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhw2590582.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-05-09T08:09:47.000Z","updated_at":"2024-11-21T03:12:57.000Z","dependencies_parsed_at":"2022-08-29T22:22:23.015Z","dependency_job_id":null,"html_url":"https://github.com/zhw2590582/FlvPlayer","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhw2590582%2FFlvPlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhw2590582%2FFlvPlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhw2590582%2FFlvPlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhw2590582%2FFlvPlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhw2590582","download_url":"https://codeload.github.com/zhw2590582/FlvPlayer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226403801,"owners_count":17619725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aac","audiocontext","canvas","flv","h264","http-flv","player","video","webassembly","webgl","websocket-flv","worker"],"created_at":"2024-08-07T01:01:29.788Z","updated_at":"2024-11-25T21:31:15.390Z","avatar_url":"https://github.com/zhw2590582.png","language":"JavaScript","funding_links":["https://www.patreon.com/artplayer","https://www.paypal.me/harveyzack"],"categories":["others","video"],"sub_categories":[],"readme":"# FlvPlayer\n\n[![Build Status](https://www.travis-ci.org/zhw2590582/FlvPlayer.svg?branch=master)](https://www.travis-ci.org/zhw2590582/FlvPlayer)\n![version](https://badgen.net/npm/v/flvplayer)\n![license](https://badgen.net/npm/license/flvplayer)\n![size](https://badgen.net/bundlephobia/minzip/flvplayer)\n[![npm Downloads](https://img.shields.io/npm/dt/flvplayer.svg)](https://www.npmjs.com/package/flvplayer)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com)\n[![dependencies Status](https://david-dm.org/zhw2590582/flvplayer/status.svg)](https://david-dm.org/zhw2590582/flvplayer)\n\n\u003e FlvPlayer.js is a JavaScript player for decode flv to the canvas\n\n## Homepage\n\n[https://flvplayer.js.org](https://flvplayer.js.org)\n\n## Mobile Demo\n\n![Mobile Demo](./images/mobile-demo.png)\n\n## Install player\n\nInstall with `npm`\n\n```bash\n$ npm install flvplayer\n```\n\nOr install with `yarn`\n\n```bash\n$ yarn add flvplayer\n```\n\n```js\nimport FlvPlayer from 'flvplayer';\n```\n\nOr umd builds are also available\n\n```html\n\u003cscript src=\"path/to/flvplayer.js\"\u003e\u003c/script\u003e\n```\n\nWill expose the global variable to `window.FlvPlayer`.\n\n## Install control(optional)\n\nYou should load the control before load the player.\n\n```js\nimport 'path/to/flvplayer-control.js';\n```\n\nOr umd builds are also available\n\n```html\n\u003cscript src=\"path/to/flvplayer-control.js\"\u003e\u003c/script\u003e\n```\n\nWill expose the global variable to `window.FlvplayerControl`.\n\n## Usage\n\n```html\n\u003cdiv class=\"flvplayer-app\"\u003e\u003c/div\u003e\n```\n\n```js\nif (FlvPlayer.isSupported()) {\n    var flv = new FlvPlayer({\n        // Accept http url, websocket url, and file type\n        url: '',\n\n        // Accept dom element, dom selector\n        container: '',\n\n        // Video poster url\n        poster: '',\n\n        // Whether to print debug information\n        debug: false,\n\n        // Whether live mode\n        live: false,\n\n        // Whether the video loops, in non-live mode\n        loop: false,\n\n        // Whether to use hotkeys, if the control exists\n        hotkey: true,\n\n        // Whether to turn off the volume\n        muted: false,\n\n        // On the mobile side, try to activate the audio after the user touches the screen.\n        touchResume: true,\n\n        // Video chunk size, the default is 1M\n        videoChunk: 1024 * 1024,\n\n        // Audio chunk size, the default is 16kb\n        audioChunk: 16 * 1024,\n\n        // Whether to play automatically\n        autoPlay: false,\n\n        // Whether it contains an audio stream\n        hasAudio: true,\n\n        // Whether to cache the video frame to play\n        cache: true,\n\n        // Maximum time difference between audio and video, unit is ms\n        // used to automatically adjust audio and video synchronization\n        maxTimeDiff: 200,\n\n        // Whether to display the control, if the control exists\n        control: true,\n\n        // Indicates whether to do http fetching with cookies\n        withCredentials: true,\n\n        // Indicates total file size of media file, in bytes\n        filesize: Infinity,\n\n        // Indicates whether to enable CORS for http fetching\n        cors: true,\n\n        // Volume from 0 to 1, the default is 0.7\n        volume: 0.7,\n\n        // Initialize the frame rate, which will be covered by the actual frame rate of the file\n        frameRate: 30,\n\n        // Initialize the width, which will be covered by the actual width of the file\n        width: 400,\n\n        // Initialize the height, which will be covered by the actual height of the file\n        height: 300,\n\n        // Initialize http headers\n        headers: {},\n\n        // The path of the video decoder, currently optional flvplayer-decoder-baseline.js and flvplayer-decoder-multiple.js\n        decoder: 'flvplayer-decoder-baseline.js',\n    });\n} else {\n    console.warn('Your browser does not support Flvplayer.js');\n}\n```\n\n## Question\n\nQ: What is the difference between `flvplayer-decoder-baseline.js` and `flvplayer-decoder-multiple.js`.\n\n-   `flvplayer-decoder-baseline.js` only supports flv in this `Baseline` profile, only 200k size.\n-   `flvplayer-decoder-multiple.js` supports flv in this `Baseline`、`Main`、`Extended` and `High` profile, but have 2M size.\n\n## API\n\n### Instance methods and properties\n\nPlay video:\n\n```js\nflv.play();\n```\n\nPause video:\n\n```js\nflv.pause();\n```\n\nSwitch whether to play:\n\n```js\nflv.toggle();\n```\n\nDestroy instance:\n\n```js\nflv.destroy();\n```\n\nWhether it is playing:\n\n```js\nflv.playing;\n```\n\nIs the stream being pulled:\n\n```js\nflv.streaming;\n```\n\nGet the current time of the video:\n\n```js\nflv.currentTime;\n```\n\nGet the duration of the video:\n\n```js\nflv.duration;\n```\n\nGet the loaded of the video:\n\n```js\nflv.loaded;\n```\n\nWhether it is focus:\n\n```js\nflv.isFocus;\n```\n\nSet whether to turn off the volume:\n\n```js\nflv.muted;\n```\n\nSet the volume:\n\n```js\nflv.volume;\n```\n\nGet canvas elements:\n\n```js\nflv.$canvas;\n```\n\n### Instance event\n\n| Name          | Description                   |\n| ------------- | ----------------------------- |\n| `destroy`     | When destroying an instance   |\n| `streamStart` | Start pulling the stream      |\n| `streaming`   | When pulling stream           |\n| `streamEnd`   | At the end of the pull stream |\n| `demuxDone`   | Demux completed               |\n| `resize`      | When container resize         |\n| `play`        | When video play               |\n| `timeupdate`  | When video timeupdate         |\n| `waiting`     | When video waiting            |\n| `ended`       | When video ended              |\n| `loop`        | When video loop               |\n| `pause`       | When video pause              |\n| `seeked`      | When video seeked             |\n| `ready`       | When video ready              |\n| `streamRate`  | Stream Rate                   |\n| `demuxRate`   | Demux Rate                    |\n| `decoderRate` | Decoder Rate                  |\n| `drawRate`    | Draw Rate                     |\n\nExample:\n\n```js\nflv.on('play', function () {\n    console.log('Video is play!');\n});\n```\n\n### Class methods and properties\n\nGet all instances:\n\n```js\nFlvPlayer.instances;\n```\n\nCheck if support:\n\n```js\nFlvPlayer.isSupported;\n```\n\nGet the version:\n\n```js\nFlvPlayer.version;\n```\n\nGet the env:\n\n```js\nFlvPlayer.env;\n```\n\n## Contribution\n\nInstallation dependency\n\n```bash\n$ npm install\n```\n\nRun the developer mode\n\n```bash\n$ npm run dev\n```\n\nOpen web server\n\n```bash\n$ npm start\n```\n\n## Donations\n\nWe accept donations through these channels:\n\n![pay](./images/pay.png)\n\n-   [Patreon](https://www.patreon.com/artplayer)\n-   [Paypal](https://www.paypal.me/harveyzack)\n\n## QQ Group\n\n![QQ Group](./images/qqgroup.png)\n\n## License\n\nMIT © [Harvey Zack](https://sleepy.im/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhw2590582%2FFlvPlayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhw2590582%2FFlvPlayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhw2590582%2FFlvPlayer/lists"}