"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[87],{3905:function(e,t,n){n.d(t,{Zo:function(){return u},kt:function(){return m}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function s(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=a.createContext({}),p=function(e){var t=a.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):s(s({},t),e)),n},u=function(e){var t=p(e.components);return a.createElement(i.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},d=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,i=e.parentName,u=o(e,["components","mdxType","originalType","parentName"]),d=p(n),m=r,v=d["".concat(i,".").concat(m)]||d[m]||c[m]||l;return n?a.createElement(v,s(s({ref:t},u),{},{components:n})):a.createElement(v,s({ref:t},u))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,s=new Array(l);s[0]=d;var o={};for(var i in t)hasOwnProperty.call(t,i)&&(o[i]=t[i]);o.originalType=e,o.mdxType="string"==typeof e?e:r,s[1]=o;for(var p=2;p<l;p++)s[p]=n[p];return a.createElement.apply(null,s)}return a.createElement.apply(null,n)}d.displayName="MDXCreateElement"},9713:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return i},default:function(){return m},frontMatter:function(){return o},metadata:function(){return p},toc:function(){return c}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),s=["components"],o={title:"\u7b2c\u4e09\u65b9\u5e93",sidebar_position:7,slug:"/zh-cn/libraries"},i=void 0,p={unversionedId:"zh-cn/Libraries",id:"zh-cn/Libraries",title:"\u7b2c\u4e09\u65b9\u5e93",description:"\u7b80\u4ecb",source:"@site/docs/zh-cn/Libraries.mdx",sourceDirName:"zh-cn",slug:"/zh-cn/libraries",permalink:"/document/zh-cn/libraries",draft:!1,tags:[],version:"current",sidebarPosition:7,frontMatter:{title:"\u7b2c\u4e09\u65b9\u5e93",sidebar_position:7,slug:"/zh-cn/libraries"},sidebar:"zh-cn",previous:{title:"\u5b9e\u4f8b\u4e8b\u4ef6",permalink:"/document/zh-cn/events"},next:{title:"\u5f39\u5e55\u5e93\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/danmuku"}},u={},c=[{value:"\u7b80\u4ecb",id:"\u7b80\u4ecb",level:2},{value:"flv.js",id:"flvjs",level:2},{value:"hls.js",id:"hlsjs",level:2},{value:"dash.js",id:"dashjs",level:2},{value:"shaka-player",id:"shaka-player",level:2},{value:"webtorrent",id:"webtorrent",level:2}],d={toc:c};function m(e){var t=e.components,n=(0,r.Z)(e,s);return(0,l.kt)("wrapper",(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"\u7b80\u4ecb"},"\u7b80\u4ecb"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"\u901a\u8fc7\u9009\u9879 ",(0,l.kt)("inlineCode",{parentName:"p"},"customType")," \u53ef\u4ee5\u5f88\u5bb9\u6613\u7684\u96c6\u6210\u7b2c\u4e09\u65b9\u7684\u89c6\u9891\u89e3\u7801\u5e93\uff0c\u5b58\u5728\u591a\u4e2a\u89e3\u7801\u5668\u65f6\uff0c\u4f60\u53ef\u4ee5\u628a\u4ed6\u4eec\u90fd\u6dfb\u52a0\u5230 ",(0,l.kt)("inlineCode",{parentName:"p"},"customType")," \u91cc\uff0c\u89e3\u7801\u5e93\u592a\u5927\u65f6\uff0c\u4f60\u8fd8\u53ef\u4ee5\u4f7f\u7528 ",(0,l.kt)("inlineCode",{parentName:"p"},"js")," \u52a8\u6001\u5bfc\u5165")),(0,l.kt)("li",{parentName:"ul"},(0,l.kt)("p",{parentName:"li"},"\u64ad\u653e\u5668\u9ed8\u8ba4\u4f1a\u89e3\u6790\u51fa ",(0,l.kt)("inlineCode",{parentName:"p"},"url")," \u9009\u9879\u7684\u89c6\u9891\u7c7b\u578b\uff08\u5982 ",(0,l.kt)("inlineCode",{parentName:"p"},"m3u8"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"flv"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"mpd"),"\uff09, \u5047\u5982\u65e0\u6cd5\u89e3\u6790\u51fa\u6b63\u786e\u7684\u89c6\u9891\u7c7b\u578b\u65f6\uff0c\u4f60\u53ef\u4ee5\u6dfb\u52a0 ",(0,l.kt)("inlineCode",{parentName:"p"},"type")," \u9009\u9879\u6307\u660e\u89c6\u9891\u7c7b\u578b"))),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"// \u73b0\u5728\u8fd9\u4e2a\u64ad\u653e\u5668\u53ef\u4ee5\u540c\u65f6\u64ad\u653e: m3u8, flv, mpd\nvar art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.m3u8',\n    type: 'm3u8', // \u53ef\u9009\uff0c\u4f46\u6700\u597d\u586b\u4e0a\n    customType: {\n        m3u8: async function (video, url) {\n            const { default: Hls } = await import('hls.js');\n        },\n        flv: async function (video, url) {\n            const { default: flvjs } = await import('flv.js').default;\n        },\n        mpd: async function (video, url) {\n            const { default: dashjs } = await import('dash.js').default;\n        },\n    },\n});\n\n// \u4f60\u53ef\u4ee5\u5207\u6362\u65b0\u7684\u89c6\u9891\u5730\u5740\nart.url = '/assets/sample/video-new.m3u8';\n\n// \u4f60\u8fd8\u53ef\u4ee5\u5207\u6362\u65b0\u7684\u89c6\u9891\u7c7b\u578b\nart.type = 'flv';\nart.url = '/assets/sample/video.flv';\n\nart.type = 'mpd';\nart.url = '/assets/sample/video.mpd';\n")),(0,l.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"\u63d0\u793a")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"\u5047\u5982\u4f7f\u7528\u4e86 ",(0,l.kt)("inlineCode",{parentName:"p"},"customType"),"\uff0c\u90a3\u4e48\u5207\u6362\u5730\u5740\u524d\uff0c\u8981\u9500\u6bc1\u4e0a\u4e00\u4e2a\u89e3\u7801\u5668\u5b9e\u4f8b\uff0c\u5426\u5219\u4f1a\u5f15\u8d77\u5185\u5b58\u6cc4\u6f0f"))),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var hls = null;\nvar art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.m3u8',\n    type: 'm3u8',\n    customType: {\n        m3u8: async function (video, url) {\n            const { default: Hls } = await import('hls.js');\n\n            // \u5207\u6362\u5730\u5740\u524d\uff0c\u8981\u9500\u6bc1\u4e0a\u4e00\u4e2a\u89e3\u7801\u5668\u5b9e\u4f8b\n            if (hls) {\n                hls.destroy();\n            }\n\n            hls = new Hls();\n            hls.loadSource(url);\n            hls.attachMedia(video);\n        },\n    },\n});\n\n// \u5207\u6362\u65b0\u7684\u89c6\u9891\u5730\u5740\nart.url = '/assets/sample/video-new.m3u8';\n")),(0,l.kt)("h2",{id:"flvjs"},"flv.js"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u4e3b\u9875: ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/Bilibili/flv.js"},"https://github.com/Bilibili/flv.js"))),(0,l.kt)("div",{className:"run-code","data-libs":"https://unpkg.com/flv.js@1.6.2/dist/flv.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    autoplay: true,\n    url: '/assets/sample/video.flv',\n    customType: {\n        flv: function (video, url) {\n            if (flvjs.isSupported()) {\n                const flvPlayer = flvjs.createPlayer({\n                    type: 'flv',\n                    url: url,\n                });\n                flvPlayer.attachMediaElement(video);\n                flvPlayer.load();\n            } else {\n                art.notice.show = '\u4e0d\u652f\u6301\u64ad\u653e\u683c\u5f0f\uff1aflv';\n            }\n        },\n    },\n});\n")),(0,l.kt)("h2",{id:"hlsjs"},"hls.js"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u4e3b\u9875: ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/video-dev/hls.js"},"https://github.com/video-dev/hls.js"))),(0,l.kt)("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    autoplay: true,\n    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',\n    customType: {\n        m3u8: function (video, url) {\n            if (Hls.isSupported()) {\n                const hls = new Hls();\n                hls.loadSource(url);\n                hls.attachMedia(video);\n            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {\n                video.src = url;\n            } else {\n                art.notice.show = '\u4e0d\u652f\u6301\u64ad\u653e\u683c\u5f0f\uff1am3u8';\n            }\n        },\n    },\n});\n")),(0,l.kt)("h2",{id:"dashjs"},"dash.js"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u4e3b\u9875: ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/Dash-Industry-Forum/dash.js"},"https://github.com/Dash-Industry-Forum/dash.js"))),(0,l.kt)("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.6.3/dash.all.min.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    autoplay: true,\n    url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd',\n    customType: {\n        mpd: function (video, url) {\n            var player = dashjs.MediaPlayer().create();\n            player.initialize(video, url, true);\n        },\n    },\n});\n")),(0,l.kt)("h2",{id:"shaka-player"},"shaka-player"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u4e3b\u9875: ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/google/shaka-player"},"https://github.com/google/shaka-player"))),(0,l.kt)("div",{className:"run-code","data-libs":"https://unpkg.com/shaka-player@3.3.1/dist/shaka-player.compiled.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    autoplay: true,\n    url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd',\n    customType: {\n        mpd: function (video, url) {\n            shaka.polyfill.installAll();\n            var player = new shaka.Player(video);\n            player.load(url);\n        },\n    },\n});\n")),(0,l.kt)("h2",{id:"webtorrent"},"webtorrent"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u4e3b\u9875: ",(0,l.kt)("a",{parentName:"li",href:"https://github.com/webtorrent/webtorrent"},"https://github.com/webtorrent/webtorrent"))),(0,l.kt)("div",{className:"run-code","data-libs":"https://unpkg.com/webtorrent@1.8.1/index.js"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n    container: '.artplayer-app',\n    autoplay: true,\n    url: 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4',\n    type: 'torrent',\n    customType: {\n        torrent: function (video, url, art) {\n            var client = new WebTorrent();\n            art.loading.show = true;\n            client.add(url, function (torrent) {\n                var file = torrent.files[0];\n                file.renderTo(video, {\n                    autoplay: true,\n                });\n            });\n        },\n    },\n});\n\nart.on('ready', () => {\n    art.template.$video.controls = false;\n});\n")))}m.isMDXComponent=!0}}]);