');content:"";width:10px;height:10px;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--wrapper{width:100%;float:left;margin:0;padding:0}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--duplicate-content,.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--subcategory-inline{display:none!important}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title{margin:0;color:#458ee1;font-size:.9em;font-weight:400}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--title:before{content:"#";font-weight:700;color:#458ee1;display:inline-block}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text{margin:4px 0 0;display:block;line-height:1.4em;padding:5.33333px 8px;background:#f8f8f8;font-size:.85em;opacity:.8}.algolia-autocomplete .suggestion-layout-simple .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight{color:#3f4145;font-weight:700;box-shadow:none}.algolia-autocomplete .algolia-docsearch-footer{width:110px;height:20px;z-index:2000;margin-top:10.66667px;float:right;font-size:0;line-height:0}.algolia-autocomplete .algolia-docsearch-footer--logo{background-image:url("data:image/svg+xml;utf8, ");background-repeat:no-repeat;background-position:50%;background-size:100%;overflow:hidden;text-indent:-9000px;padding:0!important;width:100%;height:100%;display:block}.header-module--githubLink--31ZQG{width:32px;height:32px;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzlFQkFERkU4NkJCMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzlFQkFERkQ4NkJCMTFFM0FBNTJFRTMzNTJEMUJDNDYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU1MTc4QTJFOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU1MTc4QTJGOTlBMDExRTI5QTE1QkMxMDQ2QTg5MDREIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Kk5lQwAABYxJREFUeNrkm29oVXUYx3+7bM3V1FnbqlltrtXWtYRa1nqxooY5E7EhKWGuaTDBagol9SIMDCKICASj+cISw/DPi16ZBakrUBnoC7nNoTMWy6I1c+LmVq6t78N9jpyu555znt855+536IHPi939/jzP95zznN+/kzc1NaUitirwJJgPasF94DZQDG7hMqNgBFwEZ5kU+AH0R+lcXgQCJMBT4EXwLKgM2N7P4FvwJegCk6YKUA5eB23grogu2C/gc7AN/GGKABTsZtAOZqjc2DjYAT5kUfSNBNCkAGwGo1PTZ6PsQ4FuHLp3QD3YDR5QZtgZsAac1ElYokcGbATHDApesS/kUwf7GEkOKAK7wAvKbNsPXgZjYQowG3wNnlDxsONgCbgchgAU/GHwiIqXUT5o8hLBKwfcDA7FMHgrUR/iGLQEoGTyBWhQ8bUGjiFPR4A3QIuKv7VwLKIcQMnue5Dv0fjT/IwtAM3g+RyMBmkU+BXf3qc5Rx3xqDPBE7LjfkaCheCcj1HYKYe6JeBt8GcEo75L3HaJQ7+nfNQ/x7H9p67TFX4L1Pi4EocdfhsGH4BPwVbwqu0xGwI/8vT2N/77Gv+vAJSCO3n6PJ//Vjz72w62cPtORnfAwx7+1nBsW93ugGow7vOKtPkYa9eDl0Clxji9kuvW+yjb5tPncY7xet3MhjoFt2RzgIlU2DQL/O6017W/Be4BawXJqMCgTH+ToOxajvWG1+AmYVBlBglQKrxwmzIFoB9XCzt91CABpL6sti62JcBiXtKS2GMGCSD1pZxjvi7AKmED9PraYJAAG2yvVL+2yi7AImHl90C3QQJ03/B+97ZF1lCYVlN6BBV/BffykNQkoyF4H5grqJOkO6BR2NF2A4O35gifCOs0JjTW9vYaPPPbJ11LJAFqBRVoDf68wQLQI3BBUL424XPiY1lvDOb/ZwRla0iAOYIKv8dAgEFB2VtJgJmCChMxEEAyHigmAQoFFWbFQIDZgrKF0p2hmTEQQOQjCTAmKD8vBgJUCcqOkQBXBBXosEORwcEXKdmBjCskwICgQr5h0+BMW6i8V7LtNkAC9As7WWqwAM8Jy/cnhBMhspVKvq2eC0uwbxLrSWhMa+dpdJQLW6mRpLtpOlyuMcL7CTwErhoSPG2ApjQEuD3BQ0fp0ZJqlT6pZYpt0wieYh60nuWDGp2+At4xIPgt7IvU0jHzBkFdgD27HWDGNGyGFHHfulaXuTN0IkBjZ8EykJeDwKmPFtAXwN8TTltjrVkKfwcawXJW3G3v8DTYCKoiCLwGvAl6QthpbnU6J5jP2f1uh1Wgxbbxwv0qvT/vtZRGA6wuzs50+Pkb8JdgQtPMq1VJld7bnxtSzhjgJD5hzwEW611OZK6xlSvzeYbAsl3Cx4PK7ozodOl6t93hfJByqbzOVnYh+MdHhxfBLI1bnuoMhRx8imPMKgDR5LG/nrSVfddHpx8HeO4/ClmApsw+snXsdk7gYMat+r5Hp0sDCLAkxOA7nfrI1nGxx2tmQUb5x8FuzgvD4Dw4wNm2MIAA1SEF38cx+RaAeBCMZGlwb44GOyUhBD/CsTj24TatpddXq3L+RIVmXnE4QzjJMaSylvBxFdqzKHsVrDD8Dmj36sOvIx0unewHDRENg4MI0BH2FyP0RcZOlzW3Ib7VLvPqDK0z1PEq7bDmLVwCLgnr0AhvnUp/0eJp0k9m6HO4fUp2nGZODgUY5PzUJVlHkxg1TEfnjxqY8I6yb12SSjqLm7T9/Ax4TaW/+JxuIx862KcL4toBk1QFT1omXZLRHQHaL3Npl/r8jH3QjiGsbJ3kGd/fDo6WBWi31KG9a9xXMgzfw35tVfCR9l52dk8Ibe7htnq57YowfY7i4+lYWUL9z+1fAQYACqstE4NCc18AAAAASUVORK5CYII=) no-repeat;background-size:32px;margin-left:20px}.header-module--githubLink--31ZQG span{display:none}
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{font:inherit;margin:0;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{box-sizing:content-box;-webkit-appearance:textfield}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{margin:0 2px;padding:.35em .625em .75em;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}.content .method-list .param code,.content h1,.content h2,.content h3,.content h4,.content h5,.content h6,body,html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:16px}.content h1,.content h2,.content h3,.content h4,.content h5,.content h6{font-weight:700}.content .method-list .function-type,.content .method-list .type,.content pre{font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:13px;line-height:1.5}body,html{height:100%;margin:0;padding:0;color:#162d3d;background-color:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:none}.header{position:fixed;z-index:200;top:0;left:0;display:flex;box-sizing:border-box;width:100%;height:60px;padding-right:15px;background:#1c1f21;align-items:center}.header .logo-wrapper{flex-grow:2;padding:0 15px}.header .logo{width:100px}.header input.search{line-height:40px;padding:0 15px 0 35px;-webkit-transition:background .3s;transition:background .3s;color:#fff;border:0;border-radius:40px;outline:none;background:transparent url(data:image/svg+xml;base64,PHN2ZyBhbHQ9IlNlYXJjaCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxwYXRoIGQ9IgogICAgICBNNi4wMjk0NSwxMC4yMDMyN2E0LjE3MzgyLDQuMTczODIsMCwxLDEsNC4xNzM4Mi00LjE3MzgyQTQuMTU2MDksNC4xNTYwOSwKICAgICAgMCwwLDEsNi4wMjk0NSwxMC4yMDMyN1ptOS42OTE5NSw0LjIxOTlMMTAuODk4OSw5LjU5OTc5QTUuODgwMjEsNS44ODAyMSwKICAgICAgMCwwLDAsMTIuMDU4LDYuMDI4NTYsNi4wMDQ2Nyw2LjAwNDY3LDAsMSwwLDkuNTk5NzksMTAuODk4OWw0LjgyMzM4LAogICAgICA0LjgyMzM4YS44OTcyOS44OTcyOSwwLDAsMCwxLjI5OTEyLDAsLjg5NzQ5Ljg5NzQ5LDAsMCwwLS4wMDA4Ny0xLjI5OTA5WiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==) no-repeat;background-position-x:10px;background-position-y:center;background-size:16px 16px}.header input.search:focus{background-color:hsla(0,0%,100%,.1)}#toc{overflow:hidden;font-size:12px}#toc li{line-height:26px}#toc>ul>li>a>span{float:right;width:20px;border-radius:40px;background-color:#2484ff}.toc-wrapper{font-size:14px;position:fixed;z-index:30;top:60px;bottom:0;left:0;overflow-x:hidden;overflow-y:auto;width:420px;padding-top:40px;-webkit-transition:left .3s ease-in-out;transition:left .3s ease-in-out;border-right:1px solid #f0f4f7;background-color:#fafcfc}.toc-wrapper.single{width:220px}.toc-wrapper .lang-selector{display:none}.toc-wrapper .lang-selector a{padding-top:.5em;padding-bottom:.5em}.toc-wrapper>img{display:block;max-width:100%}.toc-wrapper li,.toc-wrapper ul{line-height:32px;margin:0;padding:0;list-style:none}.toc-wrapper li{-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-property:background;transition-property:background;color:#4c555a}.toc-wrapper .toc-link.active{color:#0099e5}.toc-wrapper .toc-link.active-parent{color:#0099e5;background-color:#1e2224}.toc-wrapper .toc-h1{font-size:14px;line-height:32px;font-weight:600}.toc-wrapper .toc-list-h2{margin-bottom:15px}.toc-wrapper .toc-h2{padding-left:25px}.toc-wrapper .toc-h3{padding-left:35px}.toc-wrapper .toc-footer{float:left;width:220px;border-right:1px solid #dadada;padding-bottom:10px}.toc-footer li,.toc-link,.toc-wrapper .toc-footer a,.toc-wrapper .toc-footer li{text-decoration:none;color:#4c555a}.toc-footer li,.toc-link{display:block;overflow-x:hidden;padding:0 25px;-webkit-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-duration:.13s;transition-duration:.13s;-webkit-transition-property:background;transition-property:background;text-overflow:ellipsis}#nav-button{font-weight:700;line-height:16px;position:fixed;z-index:201;top:60px;left:0;display:none;padding:0 1.5em 5em 0;-webkit-transition:left .3s ease-in-out;transition:left .3s ease-in-out;text-decoration:none;opacity:.7;color:#000}#nav-button span{display:block;padding:6px;-webkit-transform:rotate(-90deg) translate(-100%);transform:rotate(-90deg) translate(-100%);-webkit-transform-origin:0 0;transform-origin:0 0;border-radius:0 0 0 5px;background-color:hsla(0,0%,100%,.7)}#nav-button img{height:16px;vertical-align:bottom}#nav-button:hover{opacity:1}#nav-button.open{left:420px}.page-wrapper{position:relative;z-index:10;min-height:100%;margin-top:60px;margin-left:420px;padding-bottom:1px;background-color:#fff}.page-wrapper.single-navigation{margin-left:220px}.page-wrapper .dark-box{position:absolute;top:0;right:0;bottom:0;width:50%;background-color:#2e3336}.page-wrapper .lang-selector{position:fixed;z-index:50;border-bottom:5px solid #2e3336}.lang-selector{font-weight:700;width:100%;background-color:#1e2224}.lang-selector a{line-height:30px;display:block;float:left;padding:0 10px;text-decoration:none;color:#fff;outline:0}.lang-selector a:active,.lang-selector a:focus{color:#fff;background-color:#111}.lang-selector a.active{color:#fff;background-color:#2e3336}.lang-selector:after{display:block;clear:both;content:""}.content{position:relative;z-index:30;overflow:hidden;padding-bottom:100px;-webkit-transform:translateZ(0)}.content:after{display:block;clear:both;content:""}.simple-layout .content{max-width:800px;margin:auto}.content>.method-list,.content>aside,.content>dl,.content>h1,.content>h2,.content>h3,.content>h4,.content>h5,.content>h6,.content>ol,.content>p,.content>table,.content>ul{display:block;box-sizing:border-box;margin-right:50%;padding:0 28px}.simple-layout .content>.method-list,.simple-layout .content>aside,.simple-layout .content>dl,.simple-layout .content>h1,.simple-layout .content>h2,.simple-layout .content>h3,.simple-layout .content>h4,.simple-layout .content>h5,.simple-layout .content>h6,.simple-layout .content>ol,.simple-layout .content>p,.simple-layout .content>table,.simple-layout .content>ul{margin-right:0}.content>ol,.content>ul{padding-left:43px}.content>h1,.content>h2{clear:both}.content a{color:#3899ec}.content h1{font-size:25px;font-weight:400;margin-top:40px;margin-bottom:21px}.content h2{font-size:19px;margin-top:3.2em;margin-bottom:1.2em}.content h3,.content h4,.content h5,.content h6{font-size:15px;margin-top:2.5em;margin-bottom:.8em}.content h4,.content h5,.content h6{font-size:10px}.content hr{margin:2em 0;border-top:2px solid #2e3336;border-bottom:2px solid #fff}.content table{overflow:auto;margin-bottom:1em}.content table td,.content table th{line-height:26px;vertical-align:top}.content table td code,.content table th code{white-space:nowrap}.content table th{font-size:12px;font-weight:400;padding:5px 10px;text-align:left;vertical-align:bottom;color:#939da3}.content table th:first-child{padding-left:0}.content table td{padding:10px}.content table tr{border-bottom:1px solid #f0f4f7}.content dt{font-weight:700}.content dd{margin-left:15px}.content dd,.content dt,.content li{line-height:26px;margin-top:0}.content p{line-height:26px}.content img{max-width:100%}.content aside{line-height:26px;margin:1.5em calc(28px + 50%) 1.5em 28px;padding-top:1em;padding-bottom:1em;border-left:3px solid #3181b3;border-radius:2px;background-color:#eaf7ff}.content aside.warning{background-color:#c97a7e}.content aside.success{background-color:#6ac174}.content aside:before{font-size:14px;padding-right:.5em;vertical-align:middle}.content .search-highlight{margin:-3px;padding:2px;border:1px solid #f7e633;border-radius:4px;background:-webkit-gradient(linear,right bottom,left top,from(#f7e633),to(#f1d32f));background:linear-gradient(to top left,#f7e633 0,#f1d32f)}.content .method-list{clear:none;font-size:13px}.content .method-list table{display:table;table-layout:fixed;width:100%}.content .method-list .title{width:140px}.content .method-list td p{margin:0}.content .method-list .param{width:140px;text-align:right}.content .method-list .param code{padding:0;background-color:transparent;vertical-align:top;line-height:1.5;font-weight:700;font-size:13px}.content .method-list .function-type,.content .method-list .type{display:block;color:#939da3}.content .method-list .function-type{margin-left:20px;text-indent:-20px;white-space:normal}.content .method-list code{padding:3px;border-radius:3px;background-color:rgba(254,240,186,.5)}.content .title-anchor{position:absolute;margin:2px 0 0 -22px;text-decoration:none;color:#d9dee3}.content .title-anchor:hover{color:#3899ec}.content blockquote,.content pre{float:right;clear:right;box-sizing:border-box;width:50%;margin:0;color:#fff;background-color:#1e2224}.simple-layout .content blockquote,.simple-layout .content pre{width:auto;float:none;margin:28px;border-radius:2px}.content blockquote>p,.content pre>p{margin:0}.content blockquote a,.content pre a{text-decoration:none;color:#fff;border-bottom:1px dashed #ccc}.content blockquote>p{padding:13px 28px;color:#eee;background-color:#191d1f}.content pre{padding:2em 28px}@media (max-width:930px){.toc-wrapper{left:-420px}.toc-wrapper.open{left:0}.page-wrapper{margin-left:0}#nav-button{display:block}.toc-link{padding-top:.3em;padding-bottom:.3em}.content .method-list tr{display:block}.content .method-list td{display:block;padding:10px 0}.content .method-list .param{width:auto;text-align:left}.content .method-list .type{display:inline}}@media (max-width:510px){.dark-box{display:none}.content>.method-list,.content>aside,.content>dl,.content>h1,.content>h2,.content>h3,.content>h4,.content>h5,.content>h6,.content>ol,.content>p,.content>table,.content>ul{margin-right:0}.toc-wrapper .lang-selector{display:block}.page-wrapper .lang-selector{display:none}.content blockquote,.content pre{float:none;width:auto}.content>blockquote+.method-list,.content>blockquote+aside,.content>blockquote+dl,.content>blockquote+h1,.content>blockquote+h2,.content>blockquote+h3,.content>blockquote+h4,.content>blockquote+h5,.content>blockquote+h6,.content>blockquote+ol,.content>blockquote+p,.content>blockquote+table,.content>blockquote+ul,.content>pre+.method-list,.content>pre+aside,.content>pre+dl,.content>pre+h1,.content>pre+h2,.content>pre+h3,.content>pre+h4,.content>pre+h5,.content>pre+h6,.content>pre+ol,.content>pre+p,.content>pre+table,.content>pre+ul{margin-top:28px}.method-list{overflow:auto}.toc-wrapper{width:230px}#nav-button.open{left:230px}.toc-wrapper .toc-footer{width:100%;float:none;border:none;border-bottom:1px dashed #666}}.highlight .c,.highlight .c1,.highlight .cm,.highlight .cs{color:#909090}.highlight,.highlight .w{background-color:#1e2224}.PlayableDemo-module--playableDemo--pk_qD{width:744px;height:418px}:not(pre)>code[class*=language-]{font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;font-size:13px;line-height:1.5}pre>code[class*=language-],pre[class*=language-]{font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;line-height:1.5;text-align:left;white-space:pre;word-spacing:normal;word-wrap:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none;color:#f8f8f2;background:none;text-shadow:0 1px rgba(0,0,0,.3);-ms-hyphens:none}pre[class*=language-]{overflow:auto;padding:28px;background:#272b2d}pre[class*=language-]>code{padding:0;background-color:transparent}:not(pre)>code[class*=language-]{padding:3px;border-radius:3px;background-color:rgba(254,240,186,.5);white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
playable This app works best with JavaScript enabled. playable
Embed a video player into your web application. No hassle, no fuss, just nice and easy code for your project.
IMPORTANT As we did the clean-up and consistency improvements, some changes in 2.0.0 version are incompatible with the earlier versions! Find the detailed changes and the information that helps you migrate your code from version 1.x.x to 2.0.0 here .
Quick links: Installation | Configuration | How to use | Customization
What's playable?
Playable is a JavaScript component for video playback:
Easy-to-use --- Quick bootstrap and super-flexible customization.
Accessibility --- You may rely on the keyboard shortcuts to control the playback for the best accessibility in the open source.
Reliable --- Uses HTML5 video and Media Source Extensions .
Modern browsers support -- We support compatibility with the latest Safari, Chrom, Firefox, Edge, and IE11.
Customizable -- Make simple changes like modify UI texts and progress bar colors or go mad and customize player core and modules behaviour.
Flexible and efficient --- Supports both adaptive streaming and progressive download . When you provide the content in multiple formats as an array of source video URLs, playable considers the environment and identifies the most efficient source to play in the given circumstances. Read more in Video Sources
Note: Adaptive streaming sources have higher priority than those with progressive download. Native browser support has higher priority than MSE-enabled playback.
Extensible --- Supported formats: MP4, WebM, HLS, DASH. New formats support may be added via adapters, along with the new behaviour and UI/UX.
Installation
To install the stable version, use one of the following methods:
$ npm install playable -- save
import Playable from 'playable' ;
< script src = " https://unpkg.com/playable@2.10.3/dist/statics/playable.bundle.min.js" > </ script>
< script>
var Playable = window. Playable;
</ script>
you can play with the demo here
Configuration
For the reference of the configuration options, please, see the Configuration .
How to use
To use playable in your project, import it, configure the necessary parameters (e.g. width, height, UI texts), initialize the player and attach it to the parent element.
Sample:
< div id = " content" /> ;
import Playable from 'playable' ;
document. addEventListener ( 'DOMContentLoaded' , function ( ) {
const config = {
width: 700 ,
height: 394 ,
src: 'http://my-url/video.mp4' ,
} ;
const player = Playable. create ( config) ;
player. attachToElement ( document. getElementById ( 'content' ) ) ;
} ) ;
In the src parameter, provide a video URL or an array of alternative format URLs to play. The video player supports the following video formats: MP4
, WebM
, HLS
, DASH
manifest. Read more about Video Source .
Integration
Call public methods of the player instanse to control its behaviour, look and feel, and the playback process.
Process the events triggered by video player.
Customization
Out-of-the-box, you can configure your player UI with:
Big thanks!
Cross-browser Testing Platform and Open Source <3 Provided by Sauce Labs