{"id":288,"date":"2025-11-29T09:18:17","date_gmt":"2025-11-29T01:18:17","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=288"},"modified":"2025-11-29T09:18:17","modified_gmt":"2025-11-29T01:18:17","slug":"flv-js%e7%9a%84%e5%85%b7%e4%bd%93%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/11\/29\/flv-js%e7%9a%84%e5%85%b7%e4%bd%93%e4%bd%bf%e7%94%a8\/","title":{"rendered":"flv.js\u7684\u5177\u4f53\u4f7f\u7528"},"content":{"rendered":"\n<p>\u597d\u7684\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd <strong>flv.js \u7684\u5b8c\u6574\u4f7f\u7528\u6307\u5357\u4e0e\u793a\u4f8b<\/strong>\uff0c\u4ece\u57fa\u7840\u5230\u8fdb\u9636\uff0c\u9002\u5408\u7f51\u9875\u64ad\u653e FLV \u89c6\u9891\u6d41\uff08\u4e3b\u8981\u7528\u4e8e HTTP-FLV \/ HLS \u7684\u524d\u7aef\u64ad\u653e\uff09\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>1. flv.js \u7b80\u4ecb<\/strong><\/h1>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>flv.js<\/code> \u662f\u4e00\u4e2a\u7eaf\u524d\u7aef <strong>JavaScript FLV \u64ad\u653e\u5e93<\/strong>\uff0c\u57fa\u4e8e <strong>Media Source Extensions (MSE)<\/strong> \u5b9e\u73b0\u64ad\u653e\u3002<\/li>\n\n\n\n<li>\u7279\u70b9\uff1a\n<ul class=\"wp-block-list\">\n<li>\u652f\u6301 HTTP-FLV \u6d41\u5f0f\u64ad\u653e<\/li>\n\n\n\n<li>\u7eaf\u524d\u7aef\uff0c\u4e0d\u4f9d\u8d56 Flash<\/li>\n\n\n\n<li>\u53ef\u5728 Chrome\/Firefox\/Edge \u7b49\u73b0\u4ee3\u6d4f\u89c8\u5668\u64ad\u653e FLV<\/li>\n\n\n\n<li>\u652f\u6301\u76f4\u64ad\u548c\u70b9\u64ad<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p>\u5b98\u7f51\/GitHub\uff1a<a href=\"https:\/\/github.com\/bilibili\/flv.js\">https:\/\/github.com\/bilibili\/flv.js<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>2. \u5b89\u88c5<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2460 CDN \u5f15\u5165<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;script src=&quot;https:\/\/cdn.jsdelivr.net\/npm\/flv.js\/dist\/flv.min.js&quot;&gt;&amp;lt;\/script&gt;\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2461 NPM \u5b89\u88c5<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nnpm install flv.js\n\n<\/pre><\/div>\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport flvjs from &#039;flv.js&#039;;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>3. \u57fa\u672c\u4f7f\u7528<\/strong><\/h1>\n\n\n\n<p>HTML\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;video id=&quot;videoElement&quot; controls width=&quot;640&quot; height=&quot;360&quot;&gt;&amp;lt;\/video&gt;\n\n<\/pre><\/div>\n\n\n<p>JavaScript\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nif (flvjs.isSupported()) {\n    var videoElement = document.getElementById(&#039;videoElement&#039;);\n    var flvPlayer = flvjs.createPlayer({\n        type: &#039;flv&#039;,\n        url: &#039;https:\/\/example.com\/live\/stream.flv&#039;  \/\/ HTTP-FLV URL\n    });\n    flvPlayer.attachMediaElement(videoElement);\n    flvPlayer.load();\n    flvPlayer.play();\n}\n\n<\/pre><\/div>\n\n\n<p><strong>\u89e3\u91ca\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>type: 'flv'<\/code>\uff1a\u6307\u5b9a FLV \u7c7b\u578b<\/li>\n\n\n\n<li><code>url<\/code>\uff1aHTTP-FLV \u89c6\u9891\u5730\u5740<\/li>\n\n\n\n<li><code>attachMediaElement(videoElement)<\/code>\uff1a\u7ed1\u5b9a HTML5 <code>&lt;video><\/code> \u6807\u7b7e<\/li>\n\n\n\n<li><code>load()<\/code>\uff1a\u52a0\u8f7d\u89c6\u9891<\/li>\n\n\n\n<li><code>play()<\/code>\uff1a\u64ad\u653e<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>4. \u76f4\u64ad FLV \u793a\u4f8b<\/strong><\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nvar flvPlayer = flvjs.createPlayer({\n    type: &#039;flv&#039;,\n    isLive: true,                \/\/ \u8868\u793a\u8fd9\u662f\u76f4\u64ad\u6d41\n    url: &#039;https:\/\/example.com\/live\/stream.flv&#039;\n});\n\nflvPlayer.attachMediaElement(document.getElementById(&#039;videoElement&#039;));\nflvPlayer.load();\nflvPlayer.play();\n\n<\/pre><\/div>\n\n\n<p><strong>\u53c2\u6570\u8bf4\u660e\uff1a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>isLive: true<\/code> \u2192 \u5f00\u542f\u76f4\u64ad\u6a21\u5f0f\uff0c\u7981\u7528\u7f13\u5b58\u548c\u9884\u52a0\u8f7d<\/li>\n\n\n\n<li><code>url<\/code> \u2192 FLV \u76f4\u64ad\u6d41 HTTP \u5730\u5740<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>5. \u4e8b\u4ef6\u76d1\u542c<\/strong><\/h1>\n\n\n\n<p><code>flv.js<\/code> \u63d0\u4f9b\u4e30\u5bcc\u4e8b\u4ef6\u63a5\u53e3\uff1a<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nflvPlayer.on(flvjs.Events.LOADING_COMPLETE, function() {\n    console.log(&#039;\u89c6\u9891\u52a0\u8f7d\u5b8c\u6210&#039;);\n});\n\nflvPlayer.on(flvjs.Events.ERROR, function(type, detail, info) {\n    console.error(&#039;\u64ad\u653e\u9519\u8bef&#039;, type, detail, info);\n});\n\nflvPlayer.on(flvjs.Events.MEDIA_INFO, function(mediaInfo) {\n    console.log(&#039;\u5a92\u4f53\u4fe1\u606f&#039;, mediaInfo);\n});\n\n<\/pre><\/div>\n\n\n<p>\u5e38\u7528\u4e8b\u4ef6\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>LOADING_COMPLETE<\/code> \u2192 \u6570\u636e\u52a0\u8f7d\u5b8c\u6210<\/li>\n\n\n\n<li><code>ERROR<\/code> \u2192 \u64ad\u653e\u9519\u8bef<\/li>\n\n\n\n<li><code>MEDIA_INFO<\/code> \u2192 \u89c6\u9891\u97f3\u9891\u4fe1\u606f<\/li>\n\n\n\n<li><code>STALLED<\/code> \u2192 \u64ad\u653e\u88ab\u963b\u585e<\/li>\n\n\n\n<li><code>BUFFER_FLUSH<\/code> \u2192 \u7f13\u51b2\u6e05\u7a7a<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>6. \u8fdb\u9636\u4f7f\u7528<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2460 \u81ea\u5b9a\u4e49\u7f13\u51b2\u548c\u7f13\u5b58\u7b56\u7565<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nvar flvPlayer = flvjs.createPlayer({\n    type: &#039;flv&#039;,\n    url: &#039;https:\/\/example.com\/live\/stream.flv&#039;,\n    isLive: true,\n    cors: true,\n    withCredentials: false,\n    \/\/ \u7f13\u51b2\u5927\u5c0f\u548c\u7b56\u7565\n    \/\/ lazyLoad: false,\n    \/\/ lazyLoadMaxDuration: 3*60,\n    \/\/ enableStashBuffer: true\n});\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>\u2461 \u9500\u6bc1\u64ad\u653e\u5668<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nflvPlayer.unload();\nflvPlayer.detachMediaElement();\nflvPlayer.destroy();\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>7. Vue \/ React \u4e2d\u4f7f\u7528\u793a\u4f8b<\/strong><\/h1>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>React<\/strong><\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport React, { useEffect, useRef } from &#039;react&#039;;\nimport flvjs from &#039;flv.js&#039;;\n\nexport default function FlvPlayer({ url }) {\n    const videoRef = useRef(null);\n\n    useEffect(() =&gt; {\n        if (flvjs.isSupported()) {\n            const player = flvjs.createPlayer({\n                type: &#039;flv&#039;,\n                url: url\n            });\n            player.attachMediaElement(videoRef.current);\n            player.load();\n            player.play();\n\n            return () =&gt; {\n                player.destroy();\n            };\n        }\n    }, &#x5B;url]);\n\n    return &amp;lt;video ref={videoRef} controls width=&quot;640&quot; height=&quot;360&quot;&gt;&amp;lt;\/video&gt;;\n}\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>8. \u6ce8\u610f\u4e8b\u9879<\/strong><\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u6d4f\u89c8\u5668\u652f\u6301\uff1a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u4ec5\u652f\u6301 MSE \u7684\u6d4f\u89c8\u5668\uff08Chrome\u3001Firefox\u3001Edge \u7b49\uff09<\/li>\n\n\n\n<li>Safari \u5bf9 MSE \u7684\u652f\u6301\u4e0d\u5b8c\u5584\uff0c\u9700\u8981 HLS \u6216\u5176\u4ed6\u65b9\u5f0f<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u8de8\u57df\u95ee\u9898\uff1a<\/strong>\n<ul class=\"wp-block-list\">\n<li>FLV \u6e90\u5fc5\u987b\u652f\u6301 CORS\uff0c\u5426\u5219\u6d4f\u89c8\u5668\u4f1a\u62a5\u9519<\/li>\n\n\n\n<li><code>Access-Control-Allow-Origin: *<\/code> \u6216\u4f60\u7684\u57df\u540d<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>HTTPS \u4e0e HTTP-FLV \u6df7\u7528\uff1a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u9875\u9762 HTTPS \u2192 FLV URL \u4e5f\u5fc5\u987b HTTPS\uff0c\u5426\u5219\u4f1a\u88ab\u6d4f\u89c8\u5668\u963b\u6b62<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6027\u80fd\u4f18\u5316\uff1a<\/strong>\n<ul class=\"wp-block-list\">\n<li>\u76f4\u64ad\u6d41\u53ef\u5f00\u542f <code>isLive<\/code> \u548c <code>enableStashBuffer<\/code><\/li>\n\n\n\n<li>\u5c0f\u7a97\u53e3\u64ad\u653e\u53ef\u964d\u4f4e\u5206\u8fa8\u7387\u6216\u5e27\u7387<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u597d\u7684\uff0c\u6211\u7ed9\u4f60\u6574\u7406\u4e00\u4efd flv.js \u7684\u5b8c\u6574\u4f7f\u7528\u6307\u5357\u4e0e\u793a\u4f8b\uff0c\u4ece\u57fa\u7840\u5230\u8fdb\u9636\uff0c\u9002\u5408\u7f51\u9875&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/11\/29\/flv-js%e7%9a%84%e5%85%b7%e4%bd%93%e4%bd%bf%e7%94%a8\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-288","post","type-post","status-publish","format-standard","hentry","category-12"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=288"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/288\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/288\/revisions\/289"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}