"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[467],{3905:function(e,n,t){t.d(n,{Zo:function(){return s},kt:function(){return d}});var r=t(7294);function a(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function i(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function l(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?i(Object(t),!0).forEach((function(n){a(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):i(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function m(e,n){if(null==e)return{};var t,r,a=function(e,n){if(null==e)return{};var t,r,a={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(a[t]=e[t]);return a}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var p=r.createContext({}),o=function(e){var n=r.useContext(p),t=n;return e&&(t="function"==typeof e?e(n):l(l({},n),e)),t},s=function(e){var n=o(e.components);return r.createElement(p.Provider,{value:n},e.children)},c={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},u=r.forwardRef((function(e,n){var t=e.components,a=e.mdxType,i=e.originalType,p=e.parentName,s=m(e,["components","mdxType","originalType","parentName"]),u=o(t),d=a,f=u["".concat(p,".").concat(d)]||u[d]||c[d]||i;return t?r.createElement(f,l(l({ref:n},s),{},{components:t})):r.createElement(f,l({ref:n},s))}));function d(e,n){var t=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var i=t.length,l=new Array(i);l[0]=u;var m={};for(var p in n)hasOwnProperty.call(n,p)&&(m[p]=n[p]);m.originalType=e,m.mdxType="string"==typeof e?e:a,l[1]=m;for(var o=2;o<i;o++)l[o]=t[o];return r.createElement.apply(null,l)}return r.createElement.apply(null,t)}u.displayName="MDXCreateElement"},534:function(e,n,t){t.r(n),t.d(n,{assets:function(){return s},contentTitle:function(){return p},default:function(){return d},frontMatter:function(){return m},metadata:function(){return o},toc:function(){return c}});var r=t(7462),a=t(3366),i=(t(7294),t(3905)),l=["components"],m={title:"Iframe \u63d2\u4ef6",sidebar_position:3},p=void 0,o={unversionedId:"zh-cn/Plugins/iframe",id:"zh-cn/Plugins/iframe",title:"Iframe \u63d2\u4ef6",description:"\u8bf4\u660e",source:"@site/docs/zh-cn/Plugins/iframe.mdx",sourceDirName:"zh-cn/Plugins",slug:"/zh-cn/Plugins/iframe",permalink:"/document/zh-cn/Plugins/iframe",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Iframe \u63d2\u4ef6",sidebar_position:3},sidebar:"zh-cn",previous:{title:"\u5e7f\u544a\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/ads"},next:{title:"Hls \u753b\u8d28\u63d2\u4ef6",permalink:"/document/zh-cn/Plugins/hls-quality"}},s={},c=[{value:"\u8bf4\u660e",id:"\u8bf4\u660e",level:2},{value:"\u6f14\u793a",id:"\u6f14\u793a",level:2},{value:"\u5b89\u88c5",id:"\u5b89\u88c5",level:2},{value:"\u901a\u8fc7 <code>npm</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-npm-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>yarn</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-yarn-\u5b89\u88c5",level:3},{value:"\u901a\u8fc7 <code>script</code> \u5b89\u88c5\uff1a",id:"\u901a\u8fc7-script-\u5b89\u88c5",level:3},{value:"\u4f7f\u7528",id:"\u4f7f\u7528",level:2},{value:"index.html",id:"indexhtml",level:3},{value:"iframe.html",id:"iframehtml",level:3},{value:"\u5b9e\u4f8b\u63a5\u53e3",id:"\u5b9e\u4f8b\u63a5\u53e3",level:2},{value:"commit",id:"commit",level:3},{value:"message",id:"message",level:3},{value:"destroy",id:"destroy",level:3},{value:"Iframe \u63a5\u53e3",id:"iframe-\u63a5\u53e3",level:2},{value:"inject",id:"inject",level:3},{value:"postMessage",id:"postmessage",level:3}],u={toc:c};function d(e){var n=e.components,t=(0,a.Z)(e,l);return(0,i.kt)("wrapper",(0,r.Z)({},u,t,{components:n,mdxType:"MDXLayout"}),(0,i.kt)("h2",{id:"\u8bf4\u660e"},"\u8bf4\u660e"),(0,i.kt)("p",null,"\u901a\u8fc7\u8be5\u63d2\u4ef6\uff0c\u4f60\u53ef\u4ee5\u8f7b\u677e\u5728 ",(0,i.kt)("inlineCode",{parentName:"p"},"\u4e3b\u9875\u9762")," \u91cc\u63a7\u5236 ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," \u9875\u9762\u91cc\u7684\u64ad\u653e\u5668\u3002"),(0,i.kt)("p",null,"\u5982\u5728 ",(0,i.kt)("inlineCode",{parentName:"p"},"\u4e3b\u9875\u9762")," \u91cc\u901a\u8fc7\u4ee3\u7801\u63a7\u5236 ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," \u64ad\u653e\u5668\u7684\u529f\u80fd\uff0c\u6216\u8005\u83b7\u53d6 ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," \u64ad\u653e\u5668\u7684\u503c\u7b49\u7b49"),(0,i.kt)("h2",{id:"\u6f14\u793a"},"\u6f14\u793a"),(0,i.kt)("p",null,"\ud83d\udc49 ",(0,i.kt)("a",{parentName:"p",href:"https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe"},"\u67e5\u770b\u5b8c\u6574\u6f14\u793a")),(0,i.kt)("h2",{id:"\u5b89\u88c5"},"\u5b89\u88c5"),(0,i.kt)("h3",{id:"\u901a\u8fc7-npm-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"h3"},"npm")," \u5b89\u88c5\uff1a"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"$ npm install artplayer-plugin-iframe\n")),(0,i.kt)("h3",{id:"\u901a\u8fc7-yarn-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"h3"},"yarn")," \u5b89\u88c5\uff1a"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-bash"},"$ yarn add artplayer-plugin-iframe\n")),(0,i.kt)("h3",{id:"\u901a\u8fc7-script-\u5b89\u88c5"},"\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"h3"},"script")," \u5b89\u88c5\uff1a"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html"},'\x3c!-- \u672c\u5730 --\x3e\n<script src="path/to/artplayer-plugin-iframe.js"><\/script>\n\n\x3c!-- jsdelivr --\x3e\n<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"><\/script>\n\n\x3c!-- unpkg --\x3e\n<script src="https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"><\/script>\n')),(0,i.kt)("p",null,"\u7136\u540e\u4f60\u53ef\u4ee5\u901a\u8fc7 ",(0,i.kt)("inlineCode",{parentName:"p"},"window.artplayerPluginIframe")," \u8bbf\u95ee\u5230\u63d2\u4ef6\u51fd\u6570"),(0,i.kt)("h2",{id:"\u4f7f\u7528"},"\u4f7f\u7528"),(0,i.kt)("h3",{id:"indexhtml"},"index.html"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'showLineNumbers title="index.html"',showLineNumbers:!0,title:'"index.html"'},"<!DOCTYPE html>\n<html>\n    <head>\n        <title>ArtPlayer</title>\n        <meta charset=\"UTF-8\" />\n    </head>\n    <body>\n        <iframe id=\"iframe\"></iframe>\n        <script src=\"path/to/artplayer-plugin-iframe.js\"><\/script>\n        <script>\n            const iframe = new ArtplayerPluginIframe({\n                // iframe \u5143\u7d20\n                iframe: document.querySelector('#iframe'),\n                // iframe \u5730\u5740\n                url: 'path/to/iframe.html',\n            });\n\n            // \u5411 iframe \u53d1\u9001\u6d88\u606f\n            iframe.commit(() => {\n                var art = new Artplayer({\n                    container: '.artplayer-app',\n                    url: 'path/to/video.mp4',\n                });\n            });\n        <\/script>\n    </body>\n</html>\n")),(0,i.kt)("h3",{id:"iframehtml"},"iframe.html"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'showLineNumbers title="iframe.html"',showLineNumbers:!0,title:'"iframe.html"'},'<!DOCTYPE html>\n<html>\n    <head>\n        <title>ArtPlayer</title>\n        <meta charset="UTF-8" />\n        <style>\n            html,\n            body {\n                width: 100%;\n                height: 100%;\n                margin: 0;\n                padding: 0;\n            }\n        </style>\n    </head>\n    <body>\n        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>\n        <script src="path/to/artplayer.js"><\/script>\n        <script src="path/to/artplayer-plugin-iframe.js"><\/script>\n        <script>\n            // \u6ce8\u5165\u811a\u672c\uff0c\u63a5\u6536\u6765\u81ea\u5b9e\u4f8b\u7684\u6d88\u606f\n            ArtplayerPluginIframe.inject();\n        <\/script>\n    </body>\n</html>\n')),(0,i.kt)("h2",{id:"\u5b9e\u4f8b\u63a5\u53e3"},"\u5b9e\u4f8b\u63a5\u53e3"),(0,i.kt)("h3",{id:"commit"},"commit"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,i.kt)("inlineCode",{parentName:"li"},"Function"))),(0,i.kt)("p",null,"\u5c06\u6d88\u606f\u63a8\u9001\u5230 iframe\uff0c\u8be5\u51fd\u6570\u5c06\u5728 iframe \u5185\u90e8\u8fd0\u884c"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"iframe.commit(() => {\n    var art = new Artplayer({\n        container: '.artplayer-app',\n        url: 'path/to/video.mp4',\n    });\n});\n\niframe.commit(() => {\n    art.seek = 5;\n});\n\n// \u83b7\u53d6\u6765\u81ea iframe \u7684\u503c\n(async function () {\n    // \u4f7f\u7528 return \u5173\u952e\u8bcd\n    var currentTime = await iframe.commit(() => {\n        return art.currentTime;\n    });\n\n    // \u6216\u8005\u4f7f\u7528 resolve \u65b9\u6cd5\n    var currentTime2 = await iframe.commit((resolve) => {\n        setTimeout(() => {\n            resolve(art.currentTime);\n        }, 1000);\n    });\n})();\n")),(0,i.kt)("h3",{id:"message"},"message"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,i.kt)("inlineCode",{parentName:"li"},"Function"))),(0,i.kt)("p",null,"\u63a5\u6536\u6765\u81ea iframe \u7684\u6d88\u606f"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"iframe.message((event) => {\n    console.log(event);\n});\n")),(0,i.kt)("h3",{id:"destroy"},"destroy"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,i.kt)("inlineCode",{parentName:"li"},"Function"))),(0,i.kt)("p",null,"\u9500\u6bc1\u5b9e\u4f8b\uff0c\u9500\u6bc1\u540e\u65e0\u6cd5\u4e0e iframe \u901a\u4fe1"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"iframe.destroy();\n")),(0,i.kt)("h2",{id:"iframe-\u63a5\u53e3"},"Iframe \u63a5\u53e3"),(0,i.kt)("div",{className:"admonition admonition-danger alert alert--danger"},(0,i.kt)("div",{parentName:"div",className:"admonition-heading"},(0,i.kt)("h5",{parentName:"div"},(0,i.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,i.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,i.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"}))),"Tip")),(0,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},(0,i.kt)("inlineCode",{parentName:"p"},"Iframe \u63a5\u53e3")," \u53ea\u80fd\u8fd0\u884c\u5728 ",(0,i.kt)("inlineCode",{parentName:"p"},"iframe")," \u91cc"))),(0,i.kt)("h3",{id:"inject"},"inject"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,i.kt)("inlineCode",{parentName:"li"},"Function"))),(0,i.kt)("p",null,"\u6ce8\u5165\u811a\u672c\uff0c\u63a5\u6536\u6765\u81ea\u5b9e\u4f8b\u7684\u6d88\u606f"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"ArtplayerPluginIframe.inject();\n")),(0,i.kt)("h3",{id:"postmessage"},"postMessage"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"\u7c7b\u578b: ",(0,i.kt)("inlineCode",{parentName:"li"},"Function"))),(0,i.kt)("p",null,"\u5c06\u6d88\u606f\u63a8\u9001\u5230\u5b9e\u4f8b"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"iframe.message((event) => {\n    console.log(event);\n});\n\niframe.commit(() => {\n    ArtplayerPluginIframe.postMessage({\n        type: 'currentTime',\n        data: art.currentTime,\n    });\n});\n")))}d.isMDXComponent=!0}}]);