CINXE.COM
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="theme-color" content="#663399"/><meta data-react-helmet="true" name="twitter:description" content="Make your player yours with the internet's most popular open source video player framework"/><meta data-react-helmet="true" name="twitter:title" content="Video.js Blog"/><meta data-react-helmet="true" name="twitter:creator" content="@videojs"/><meta data-react-helmet="true" name="twitter:card" content="summary"/><meta data-react-helmet="true" property="og:type" content="website"/><meta data-react-helmet="true" property="og:description" content="Make your player yours with the internet's most popular open source video player framework"/><meta data-react-helmet="true" property="og:title" content="Video.js Blog"/><meta data-react-helmet="true" name="description" content="Make your player yours with the internet's most popular open source video player framework"/><meta name="generator" content="Gatsby 4.14.1"/><style data-href="/styles.1ad258bbdf842cc9b298.css" data-identity="gatsby-global-css">.vjs-svg-icon{fill:currentColor;background-position:50%;background-repeat:no-repeat;display:inline-block;height:1.8em;width:1.8em}.vjs-svg-icon:before{content:none!important}.vjs-control:focus .vjs-svg-icon,.vjs-svg-icon:hover{filter:drop-shadow(0 0 .25em #fff)}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-modal-dialog,.vjs-button>.vjs-icon-placeholder:before,.vjs-modal-dialog .vjs-modal-dialog-content{height:100%;left:0;position:absolute;top:0;width:100%}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.vjs-button>.vjs-icon-placeholder:before{text-align:center}@font-face{font-family:VideoJS;font-style:normal;font-weight:400;src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABTsAAsAAAAAIpAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZRiV32Y21hcAAAAYQAAAEJAAAD5p42+VxnbHlmAAACkAAADtIAABckI4l972hlYWQAABFkAAAAKwAAADYsvIjpaGhlYQAAEZAAAAAdAAAAJA+RCL1obXR4AAARsAAAABcAAAC8Q2YAAGxvY2EAABHIAAAAYAAAAGB7CIGGbWF4cAAAEigAAAAfAAAAIAFAAI9uYW1lAAASSAAAASUAAAIK1cf1oHBvc3QAABNwAAABfAAAAnXdFqh1eJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGR7yDiBgZWBgaWQ5RkDA8MvCM0cwxDOeI6BgYmBlZkBKwhIc01hcPjI+FGPHcRdyA4RZgQRADaGCyYAAHic7dPXbcMwAEXRK1vuvffem749XAbKV3bjBA6fXsaIgMMLEWoQJaAEFKNnlELyQ4K27zib5PNF6vl8yld+TKr5kH0+cUw0xv00Hwvx2DResUyFKrV4XoMmLdp06NKjz4AhI8ZMmDJjzoIlK9Zs2LJjz4EjJ85cuHLjziPe/0UWL17mf2tqKLz/9jK9f8tXpGCoRdPKhtS0RqFkWvVQNtSKoVYNtWaoddPXEBqG2jQ9XWgZattQO4baNdSeofYNdWCoQ0MdGerYUCeGOjXUmaHODXVhqEtDXRnq2lA3hro11J2h7g31YKhHQz0Z6tlQL4Z6NdSbod4N9WGoT9MfHF6GmhnZLxyDcRMAAAB4nJ1YC1hU17U+a5/HMA4iA3NmVBDmoQwP5TFnHlFeA4gYiUFRQINoSCBAyK3G2yi+0aipYtFcHYo2xsb4NiY3+VrNxSaX5uvt495ozNdoYoxmem2/L8HGpLc+InB279pnhlGr5mvL4eyz99nrrL32eu1/DQcc/okdYgdHOA6MQKp4r9gx0EcMHMezOalVasW5BM7NcXoSb9fFgE6KtSSBxWz1FYDPG+vMBGcKb9cebu2VS5s2aaTkCvRSf6C7Y+Ppibm5E09v7IDs2/3uZQtbD0zIyppwoHXh/93ukmyYgdePNRp65p5v+3v/9otQl2O7wP34cT88p8Md2YxpYLQZoRcy6FlSBRnwnGAe6BPMSCZo+7NJVqS0cE4uHendzhSnbPH6TDqL1+Nme5LZXkCHnGyoH0kne30WH+gswhm3q+pt/mTas9NLS64GnjmSlTPw0wVQT/ewRaBgxtydy3cuUB9/6SW+vb5yRvr+t0eOfPKJZ/9t3+4tL7xj32Xd3thCxi+ge6ifdsAN+l5+wi5HQ/cCoeull1AszS7CUfEcJzK7sKWJAdJhCd0sPM4+EY7QDm5ov08hXRQXE5bf6PV5Q5+IjW7X7Nku92Ask4l2hCRRD6TPqISiCJeQna3SCFwrhrNzXHzo4yFevBwxpzxk8WCIIfkvVEKVy32SbT8n68gzgaslpaiO2zIGIyuSb7RNf9HSuN26y/7OC1tgEmpiyA6aD4qcgTOiLThwGG0eB694FI8NHLLN6OBlRVaMxNAFS4JdXUG6mW8PwpKuYLCLXKGbu8iwYNdgO06Sn3Th+/vyZAxs8Ro30DjHe9gy8Fywi24OMm7Qyzh3MTZVOMYhLBnoC+J79lpTUyQmorjhnMwlcQ5uPEYGpDjsOkkH49BjQLQBqs3jFtFdJNlksYmoQFDArLh8Xh+Qd6Ghcsb6FUuehDi+U/lqD71K/qiegeV1imcwjl7ExwiSrf4BZyCujV6cVcFo6VX+G9IcPyFjJnUufbU/jzrL1X99as36reXl8K32nFaOr+E8jWJEcJ55DpMVfSMe95/AJaOsGBH2GJCNpiRQbK4C8BjdmQA22QY2j03Em13i2YHqtNLU1NI04Yj2HJgA6fQc6VPNpA/D+Ryks554NnVy2mB72uRUfPLsqR4N0LOBQKArwJYO+5W2fgZX8oC1HR6HjNaQTVIG2FPwnTcXXGZZfNB7TE6pTKZUwaw91XWLAoFFGcnB5PHjsckgBjbWutrL+0h5Y1xw3DRGDumsnXb3MJwXrJIN5U7m0rgJ3yG5w4he5ckFG4pmNEkOm0/xOO4r4yL87wqtQM+hiJIVp+6iG2wPBKD35ElGkDx+UfC2v1mFG1o+M3AjNFty8biKMXwzyxnZLds8wYD2BxmCPHAldPOeLsy/0BugftYhVYFAhO8SqQ0j3oK7dHJZnI/jxmUS4onlxskSF8thmvNZjIrRZwEPxr0lBuLRuz3oy/FOHCsxwOPYh2M+e9u3J5pgPYz9gp6G7C9m0A11F9ddqKMfV+4sbq45/YspOysXvT+3pdFdYNg2fHbW8Dz301MqDVuGrz0Fuh0YMW8mddrpqzST7rV9BcvqPoNvadRndWp0p8HvbiqrFj5yFQ/vNFSXDpxpLEFWp+DcrF3FT1afWshFcmCfeAMjEvO65i0Y6XijQfSRPWx3TV/Df7Km3E1l+kLt56s/rwVzuRusNMhudznkwdLaS+QNdeal2jDPP4l9qHc98vTYZOSkxzD+njBWVWjFPKgipx6DkWvXQiW8OYcewVHE5yukinDMcfGgc0opDltYKDxIGBedkzc6jSfE7tlvESCDFUw0Hx0opS+U0lHCxNottbNWSxX9zZVvEhKWUSyBpaXwBc2a98M6UqPeXAs/GDon8Ax7hsthO8cM5HU7Ad0UvRR9lHmtyQKZ4MAe814X5h9MSUkQmhf96eVJ6p90OjIiqSIjvykvr2l5U55O/fPQKD+jIomYpNyGJQ25uQ2kIikRfAmuBHCPsWqkSDEqgZ5KDI2sifS/R43MbZg0idFHbCPNxXxZws1ACVE6hAhOdJwRkJLFBLPZpRGYJ50pko6XzMkgmSx40ljik6AQcKhFnLcQE6rF7PXFe1Ocoj0T3AXgSgJTDIhHRfHlYZKuSzc6uievOJGXY+i5GJkkTp7UM3y0LqATDbtFcbdBxO7o4T25JYlEjoH0uynUh8rapkxp62QN70svSF+hT4gGPlovlmcm/ComLi7mV4kTykV9NFWjE/QrwgQ4uIcAP0rQF4VZYRP2o3PhHHzfPMJj9Ir+uzKUlrH49ntT18AVvj1sc3YGjUT/Mt2Dxawa8ArcA7bCQIpvfwAYu22vEG/No/5RvPdA7g+AelLrPwzy+LtkLPhnpIxH14m4EYq8eeMHbPEPNm6G7Nv9B4jcFPZ8bJj0SEjP3MPgQdKTqqEoy2v6G32P/Y6dxOv04AxnoAeq+GILvUavtYCBXm+BaIhuodcfrN5B/V2EYMCPh+SxavjGyPwV0x4CJgUPGT0mQaODGBACIJZGsMXwAD0LGXx7l3CdAcKMIKI+f5CepWeD0BvyU/GcdBxPF8SwejC6LGZmAURFdsSWKR5HyHld2kbdIZO1Ixx+bnnzU7n5+blPNV9jnUDWhP2tC68tbN3PVIldsQPxSAcSpjOav7Q05uXn5zW2LLvDXn9B6syscPy9iDLEMmSrJz6nYuWMipukjM0AH8JkGS+XFyMRkzSCH7KD/hwm172SAyZYumHlefr5AddrtA0O0TnwaVZxcRY9Bfukn9Gf05N1r9DV9MoBsJ1f+ZrqUvtPHizJAntWybv7hmqLt6QLuK6ZS9Fqi1jO5rDoWPZXXII5Tgajg53cIXCjDCGIcYrRIY2n6+mXOa/W0bdhau3ryiEYe2FV/5oeaIYK/5w5frCyll6/cYO8DiNhw6t1MBWmznt91QX62UF1N7l0eHBZTRGpKaqpKVIPF9UcIzmReud9TSY75+K899GHbBu6wjoR7RKKZVYiYxSPf5/2wJT5e3NAhmUbVn5KLx1Ujg0+BGvpAIh0DezInTkzF37KVocxrKU3r1+XLtAe2lO3l66kfQfB/unKY+q8N375Ru8bc4pJXfEcESU95q+p8ZNZRTWH1d9FzvUdYXk5rLkcdkEisoKKVHQW/b3GEx6tPaYcoJfOr9wAbSBnv1IHpep0OExr4LPMkpJM+j7sly7UHkOzXjoAZljHCGiyegtNlwljM0v+c19ET9Pvst09a2Mtgcf5/ZSzYO5h1156+eyydfAsxGa9XAuF6vzjh6CssLq6ECysperXX0sX5h5ZdpZe3guxsGIPEtHk/aqXX1hVqP5HYVVVISkrrNqvXorIc+5Ou91Hnr/LcD2afi6eX7UBloOcs7cOpqgGaNfs1g7bNbs9z6wASaylN69d0/TFTIz6Ws8+oGV3mE2612wRTHKcVUbhjKadebloMc+dyXgMVtVK6BwMB/+mVW09igdRBWaRtNQX59d/VD//xdQ0TCiYNj1KT9sq6Wdu5WTbqk3qDXyDaLa1fv621LS01G3z61sD6lH8lAxDLicV921s6Bf92JOYvzNYCL1khbqBXEFUzC521N5NyzNaQIWhjyFyDoBIVrAjmv2UEaLlI+c6zw1jmVIPLLLZZUTj6GxGHW+mq1tgHXR2D85p4Q934+jLbtjVLcyCdS10NVzpHqxp4Q/hK7WopY/NRGx9HGsPGdFjOjcpjBnGYMVqY/4eqT5khWEHWUup2A/pTw7pdWgsWft7ETUERL96nRg0HNFPmCYba6pylECaExX89A9WLUOVB4oKLu/o1oqSYHCgLzBUlAz8hNFDRpeSU1XT+LRmDUgPaKbYdHDn9suF/tu13nHJij0N97LfS0QmqONuyONk7zvUI6Qa0pF9f2+oABL92AT6e0U//z9YqAiWtJLU1JK0gS+1aacwamiNqK067u9ZQ8f1d4qLodMzz3uL89Z68V/Hnr++hXWUuHgw8dfi972PeTyPefu3aNNucemQ74qFuIaJnVkOu4Q+yjuwmmC1FqZpl1i4uzoPxjkpPf3Xv545tl26Rr+dOvUd+omqJzch9dOeU7f10Y64nMcKK137DccIZq2WdXtdZjbEoLSzHwiMtrjYLDxpHQW8gjMX6XFYAE2zSWVD04EGYSs9MbO6sEo20BMEAB4mpvSypsKjZ4Stgzb+c3A9/MQT2+vrBy+qvyFxLUtLlSRF/Ri2wjfZ2dus2Q8lXx4608/jnqK5OOap6NY2PSjYYnECCjiEeLJll/pbmqfeIK+ps3+MxrlEhqmTPipVP7kqlF4VhpEb6r+Q7YOJg38kJ9SHBf3NBl6+9YchfbUjb5ahLSzUM3kPHmwFAsZ5rpai0S7E5xWzZ1j+fW7zsUWP2g5NXTw52ySCTrgG0+lbw60l2Y/CB185CoA8NK+tbRKxfjy6pm5hzQRRR+cMqv1Jbiw6STivtEvt3DRcy0QEh92JlUGo2PG4tSKHl00YD6xc8CK+YPYyy3io2lN8BcSjKRzrIV6ypOAobqxViJPaT9M9Hy5szY33mp7OX/Zu89L/7Ww5vqY2Y8b0pKgoiUhG5cPDPzq8qTV/WkzUOIvXVVA96kmjcBrr3HrYC/Wn+fYP6Z7T1rqy3zknbvqma/FvVk96fNXGkuaXrdHW5JGSxZT/2I/O73v+yNWafMdzc5NdxYurHs6h86e01sLKLz9EBrg+x36rxAaED7hRnAMx7Vzu+9wabh3zG8XLQjx0ablUJzmxdErxYT3kzQSd0SSafVqF5PXgpp0OyYJ1EyNHpGUZmvK575ySzd85JSqF7IBzSAbMM04+MbE58xF3/njXOGecSaermlw2y9PsSQdytLJVr8t+wg+rR8cZYoeNxVIzNdk3Bngi8U5LAlgTFoQnzJCa5EsCgYhCaGL+qPj7TdhG31p9tej3R04N//PXxNwJvyUqwaJqRPJY98TJ5TPndmflRAkAhBfe46sfKW5wizSge08Xb7Ca/GUVs55trngkKkrUS2WPzKttaaqq+idmahugkY+W6fN0I6i3gPt/x88U4wAAeJxjYGRgYADiGU9YXsXz23xl4GZnAIFH7fO+IdMc/WBxDgYmEAUASbMKwAB4nGNgZGBgZwABjj4Ghv//OfoZGBlQgT4ARicDZAAAAHicY2BgYGAfxJijD8Fmu4EqBwCSpgKpAAAAAAAADgBoAH4AzADgAQIBQgFsAZgB7gIuAooC0AL8A2IDjAOoA+AEMASwBNoFCAVaBcAGCAYuBnAGrAb2B04HigfSCCoIcAiGCJwIyAkkCVYJiAmsCfIKIApWCsQLknicY2BkYGDQZ2hmYGcAASYg5gJCBob/YD4DABqrAdAAeJxdkE1qg0AYhl8Tk9AIoVDaVSmzahcF87PMARLIMoFAl0ZHY1BHdBJIT9AT9AQ9RQ9Qeqy+yteNMzDzfM+88w0K4BY/cNAMB6N2bUaPPBLukybCLvleeAAPj8JD+hfhMV7hC3u4wxs7OO4NzQSZcI/8Ltwnfwi75E/hAR7wJTyk/xYeY49fYQ/PztM+jbTZ7LY6OWdBJdX/pqs6NYWa+zMxa13oKrA6Uoerqi/JwtpYxZXJ1coUVmeZUWVlTjq0/tHacjmdxuL90OR8O0UEDYMNdtiSEpz5XQGqzlm30kzUdAYFFOb8R7NOZk0q2lwAyz1i7oAr1xoXvrOgtYhZx8wY5KRV269JZ5yGpmzPTjQhvY9je6vEElPOuJP3mWKnP5M3V+YAAAB4nG2ReVPbMBDF/ULi2EkDBFqO3gdHLxUzDB9IkdexBllydRD49ihO3Ckz7B/a31utZnafkkGyiXnyclxhgB0MMUKKMTLkmGCKV5hhF3vYxxwHOMRrvMERjnGCU7zFO7zHB3zEJ3zGF3zFN5zhHBe4xHf8wE/8wm8w/MEVimTYKv44XR9MSCsUjVoeHE3vjQoNsSZ4mmxZmVWPjSz7jlou6/0qKOWEJdKMtCe793/hQfqxa6XWZHMXFl56RS4TvPXSaDeoy0zUUZB109KstDK8lHo5q6Qi1hcOnqkImubPS6aqRq7mlnaEWabub4iYblba3SRmgldS0+FWdhNtt04F14JUaqkl7tcpOpJtErvNt3Bd9HRT5JWxK25Ldjvp6br4hzfFiIdSmlzTg2fSUzNrLd1LE1ynxq4OVaVoKLjzJ60UPtj1RKzHzsbjly6inVnFBS2MucviPncU7Rr7lfTxRepDs1A2j3ZHRc7PuzFYSfE3ZOd4kjwBy227hA==) format("woff")}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder,.vjs-icon-play{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-big-play-button .vjs-icon-placeholder:before,.video-js .vjs-play-control .vjs-icon-placeholder:before,.vjs-icon-play:before{content:"\f101"}.vjs-icon-play-circle{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-play-circle:before{content:"\f102"}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,.vjs-icon-pause{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before,.vjs-icon-pause:before{content:"\f103"}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder,.vjs-icon-volume-mute{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder:before,.vjs-icon-volume-mute:before{content:"\f104"}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder,.vjs-icon-volume-low{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before,.vjs-icon-volume-low:before{content:"\f105"}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder,.vjs-icon-volume-mid{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before,.vjs-icon-volume-mid:before{content:"\f106"}.video-js .vjs-mute-control .vjs-icon-placeholder,.vjs-icon-volume-high{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-mute-control .vjs-icon-placeholder:before,.vjs-icon-volume-high:before{content:"\f107"}.video-js .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-enter{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-enter:before{content:"\f108"}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder,.vjs-icon-fullscreen-exit{font-family:VideoJS;font-style:normal;font-weight:400}.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before,.vjs-icon-fullscreen-exit:before{content:"\f109"}.vjs-icon-spinner{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-spinner:before{content:"\f10a"}.video-js .vjs-subs-caps-button .vjs-icon-placeholder,.video-js .vjs-subtitles-button .vjs-icon-placeholder,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-subtitles{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js .vjs-subtitles-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-AU) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-GB) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-IE) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js.video-js:lang(en-NZ) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-subtitles:before{content:"\f10b"}.video-js .vjs-captions-button .vjs-icon-placeholder,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder,.vjs-icon-captions{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-captions-button .vjs-icon-placeholder:before,.video-js:lang(en) .vjs-subs-caps-button .vjs-icon-placeholder:before,.video-js:lang(fr-CA) .vjs-subs-caps-button .vjs-icon-placeholder:before,.vjs-icon-captions:before{content:"\f10c"}.vjs-icon-hd{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-hd:before{content:"\f10d"}.video-js .vjs-chapters-button .vjs-icon-placeholder,.vjs-icon-chapters{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-chapters-button .vjs-icon-placeholder:before,.vjs-icon-chapters:before{content:"\f10e"}.vjs-icon-downloading{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-downloading:before{content:"\f10f"}.vjs-icon-file-download{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-file-download:before{content:"\f110"}.vjs-icon-file-download-done{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-file-download-done:before{content:"\f111"}.vjs-icon-file-download-off{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-file-download-off:before{content:"\f112"}.vjs-icon-share{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-share:before{content:"\f113"}.vjs-icon-cog{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-cog:before{content:"\f114"}.vjs-icon-square{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-square:before{content:"\f115"}.video-js .vjs-play-progress,.video-js .vjs-volume-level,.vjs-icon-circle,.vjs-seek-to-live-control .vjs-icon-placeholder{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-play-progress:before,.video-js .vjs-volume-level:before,.vjs-icon-circle:before,.vjs-seek-to-live-control .vjs-icon-placeholder:before{content:"\f116"}.vjs-icon-circle-outline{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-circle-outline:before{content:"\f117"}.vjs-icon-circle-inner-circle{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-circle-inner-circle:before{content:"\f118"}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder,.vjs-icon-cancel{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-control.vjs-close-button .vjs-icon-placeholder:before,.vjs-icon-cancel:before{content:"\f119"}.vjs-icon-repeat{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-repeat:before{content:"\f11a"}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder,.vjs-icon-replay{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-play-control.vjs-ended .vjs-icon-placeholder:before,.vjs-icon-replay:before{content:"\f11b"}.video-js .vjs-skip-backward-5 .vjs-icon-placeholder,.vjs-icon-replay-5{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-skip-backward-5 .vjs-icon-placeholder:before,.vjs-icon-replay-5:before{content:"\f11c"}.video-js .vjs-skip-backward-10 .vjs-icon-placeholder,.vjs-icon-replay-10{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-skip-backward-10 .vjs-icon-placeholder:before,.vjs-icon-replay-10:before{content:"\f11d"}.video-js .vjs-skip-backward-30 .vjs-icon-placeholder,.vjs-icon-replay-30{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-skip-backward-30 .vjs-icon-placeholder:before,.vjs-icon-replay-30:before{content:"\f11e"}.video-js .vjs-skip-forward-5 .vjs-icon-placeholder,.vjs-icon-forward-5{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-skip-forward-5 .vjs-icon-placeholder:before,.vjs-icon-forward-5:before{content:"\f11f"}.video-js .vjs-skip-forward-10 .vjs-icon-placeholder,.vjs-icon-forward-10{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-skip-forward-10 .vjs-icon-placeholder:before,.vjs-icon-forward-10:before{content:"\f120"}.video-js .vjs-skip-forward-30 .vjs-icon-placeholder,.vjs-icon-forward-30{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-skip-forward-30 .vjs-icon-placeholder:before,.vjs-icon-forward-30:before{content:"\f121"}.video-js .vjs-audio-button .vjs-icon-placeholder,.vjs-icon-audio{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-audio-button .vjs-icon-placeholder:before,.vjs-icon-audio:before{content:"\f122"}.vjs-icon-next-item{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-next-item:before{content:"\f123"}.vjs-icon-previous-item{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-previous-item:before{content:"\f124"}.vjs-icon-shuffle{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-shuffle:before{content:"\f125"}.vjs-icon-cast{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-cast:before{content:"\f126"}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-enter{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-enter:before{content:"\f127"}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder,.vjs-icon-picture-in-picture-exit{font-family:VideoJS;font-style:normal;font-weight:400}.video-js.vjs-picture-in-picture .vjs-picture-in-picture-control .vjs-icon-placeholder:before,.vjs-icon-picture-in-picture-exit:before{content:"\f128"}.vjs-icon-facebook{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-facebook:before{content:"\f129"}.vjs-icon-linkedin{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-linkedin:before{content:"\f12a"}.vjs-icon-twitter{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-twitter:before{content:"\f12b"}.vjs-icon-tumblr{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-tumblr:before{content:"\f12c"}.vjs-icon-pinterest{font-family:VideoJS;font-style:normal;font-weight:400}.vjs-icon-pinterest:before{content:"\f12d"}.video-js .vjs-descriptions-button .vjs-icon-placeholder,.vjs-icon-audio-description{font-family:VideoJS;font-style:normal;font-weight:400}.video-js .vjs-descriptions-button .vjs-icon-placeholder:before,.vjs-icon-audio-description:before{content:"\f12e"}.video-js{background-color:#000;box-sizing:border-box;color:#fff;display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:1;padding:0;position:relative;vertical-align:top;word-break:normal}.video-js:-moz-full-screen{position:absolute}.video-js:-webkit-full-screen{height:100%!important;width:100%!important}.video-js[tabindex="-1"]{outline:none}.video-js *,.video-js :after,.video-js :before{box-sizing:inherit}.video-js ul{font-family:inherit;font-size:inherit;line-height:inherit;list-style-position:outside;margin:0}.video-js.vjs-1-1,.video-js.vjs-16-9,.video-js.vjs-4-3,.video-js.vjs-9-16,.video-js.vjs-fluid{max-width:100%;width:100%}.video-js.vjs-1-1:not(.vjs-audio-only-mode),.video-js.vjs-16-9:not(.vjs-audio-only-mode),.video-js.vjs-4-3:not(.vjs-audio-only-mode),.video-js.vjs-9-16:not(.vjs-audio-only-mode),.video-js.vjs-fluid:not(.vjs-audio-only-mode){height:0}.video-js.vjs-16-9:not(.vjs-audio-only-mode){padding-top:56.25%}.video-js.vjs-4-3:not(.vjs-audio-only-mode){padding-top:75%}.video-js.vjs-9-16:not(.vjs-audio-only-mode){padding-top:177.7777777778%}.video-js.vjs-1-1:not(.vjs-audio-only-mode){padding-top:100%}.video-js .vjs-tech,.video-js.vjs-fill:not(.vjs-audio-only-mode){height:100%;width:100%}.video-js .vjs-tech{left:0;position:absolute;top:0}.video-js.vjs-audio-only-mode .vjs-tech{display:none}body.vjs-full-window,body.vjs-pip-window{height:100%;margin:0;padding:0}.vjs-full-window .video-js.vjs-fullscreen,body.vjs-pip-window .video-js{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:1000}.video-js.vjs-fullscreen:not(.vjs-ios-native-fs),body.vjs-pip-window .video-js{display:block;height:100%!important;padding-top:0!important;width:100%!important}.video-js.vjs-fullscreen.vjs-user-inactive{cursor:none}.vjs-pip-container .vjs-pip-text{background-color:#000000b3;bottom:10%;font-size:2em;padding:.5em;position:absolute;text-align:center;width:100%}.vjs-layout-small.vjs-pip-container .vjs-pip-text,.vjs-layout-tiny.vjs-pip-container .vjs-pip-text,.vjs-layout-x-small.vjs-pip-container .vjs-pip-text{bottom:0;font-size:1.4em}.vjs-hidden{display:none!important}.vjs-disabled{cursor:default;opacity:.5}.video-js .vjs-offscreen{height:1px;left:-9999px;position:absolute;top:0;width:1px}.vjs-lock-showing{display:block!important;opacity:1!important;visibility:visible!important}.vjs-no-js{background-color:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:18px;height:150px;margin:0 auto;padding:20px;text-align:center;width:300px}.vjs-no-js a,.vjs-no-js a:visited{color:#66a8cc}.video-js .vjs-big-play-button{background-color:#2b333f;background-color:#2b333fb3;border:.06666em solid #fff;border-radius:.3em;cursor:pointer;display:block;font-size:3em;height:1.63332em;left:50%;line-height:1.5em;margin-left:-1.5em;margin-top:-.81666em;opacity:1;padding:0;position:absolute;top:50%;transition:all .4s;width:3em}.vjs-big-play-button .vjs-svg-icon{height:1em;left:50%;line-height:1;position:absolute;top:50%;transform:translate(-50%,-50%);width:1em}.video-js .vjs-big-play-button:focus,.video-js:hover .vjs-big-play-button{background-color:#73859f;background-color:#73859f80;border-color:#fff;transition:all 0s}.vjs-controls-disabled .vjs-big-play-button,.vjs-error .vjs-big-play-button,.vjs-has-started .vjs-big-play-button,.vjs-using-native-controls .vjs-big-play-button{display:none}.vjs-has-started.vjs-paused.vjs-show-big-play-button-on-pause:not(.vjs-seeking,.vjs-scrubbing,.vjs-error) .vjs-big-play-button{display:block}.video-js button{-webkit-appearance:none;appearance:none;background:none;border:none;color:inherit;display:inline-block;font-size:inherit;line-height:inherit;text-decoration:none;text-transform:none;transition:none}.video-js.vjs-spatial-navigation-enabled .vjs-button:focus{box-shadow:none;outline:.0625em solid #fff}.vjs-control .vjs-button{height:100%;width:100%}.video-js .vjs-control.vjs-close-button{cursor:pointer;height:3em;position:absolute;right:0;top:.5em;z-index:2}.video-js .vjs-modal-dialog{background:#000c;background:linear-gradient(180deg,#000c,#fff0);overflow:auto}.video-js .vjs-modal-dialog>*{box-sizing:border-box}.vjs-modal-dialog .vjs-modal-dialog-content{font-size:1.2em;line-height:1.5;padding:20px 24px;z-index:1}.vjs-menu-button{cursor:pointer}.vjs-menu-button.vjs-disabled{cursor:default}.vjs-workinghover .vjs-menu-button.vjs-disabled:hover .vjs-menu{display:none}.vjs-menu .vjs-menu-content{display:block;font-family:Arial,Helvetica,sans-serif;margin:0;overflow:auto;padding:0}.vjs-menu .vjs-menu-content>*{box-sizing:border-box}.vjs-scrubbing .vjs-control.vjs-menu-button:hover .vjs-menu{display:none}.vjs-menu li{display:flex;font-size:1.2em;justify-content:center;line-height:1.4em;list-style:none;margin:0;padding:.2em 0;text-align:center;text-transform:lowercase}.js-focus-visible .vjs-menu li.vjs-menu-item:hover,.vjs-menu li.vjs-menu-item:focus,.vjs-menu li.vjs-menu-item:hover{background-color:#73859f;background-color:#73859f80}.js-focus-visible .vjs-menu li.vjs-selected:hover,.vjs-menu li.vjs-selected,.vjs-menu li.vjs-selected:focus,.vjs-menu li.vjs-selected:hover{background-color:#fff;color:#2b333f}.js-focus-visible .vjs-menu li.vjs-selected:hover .vjs-svg-icon,.vjs-menu li.vjs-selected .vjs-svg-icon,.vjs-menu li.vjs-selected:focus .vjs-svg-icon,.vjs-menu li.vjs-selected:hover .vjs-svg-icon{fill:#000}.js-focus-visible .vjs-menu :not(.vjs-selected):focus:not(.focus-visible),.video-js .vjs-menu :not(.vjs-selected):focus:not(:focus-visible){background:none}.vjs-menu li.vjs-menu-title{cursor:default;font-size:1em;font-weight:700;line-height:2em;margin:0 0 .3em;padding:0;text-align:center;text-transform:uppercase}.vjs-menu-button-popup .vjs-menu{border-top-color:#2b333fb3;bottom:0;display:none;height:0;left:-3em;margin-bottom:1.5em;position:absolute;width:10em}.vjs-pip-window .vjs-menu-button-popup .vjs-menu{left:unset;right:1em}.vjs-menu-button-popup .vjs-menu .vjs-menu-content{background-color:#2b333f;background-color:#2b333fb3;bottom:1.5em;max-height:15em;position:absolute;width:100%}.vjs-layout-tiny .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:5em}.vjs-layout-small .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:10em}.vjs-layout-medium .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:14em}.vjs-layout-huge .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content,.vjs-layout-x-large .vjs-menu-button-popup .vjs-menu .vjs-menu-content{max-height:25em}.vjs-menu-button-popup .vjs-menu.vjs-lock-showing,.vjs-workinghover .vjs-menu-button-popup.vjs-hover .vjs-menu{display:block}.video-js .vjs-menu-button-inline{overflow:hidden;transition:all .4s}.video-js .vjs-menu-button-inline:before{width:2.222222222em}.video-js .vjs-menu-button-inline.vjs-slider-active,.video-js .vjs-menu-button-inline:focus,.video-js .vjs-menu-button-inline:hover{width:12em}.vjs-menu-button-inline .vjs-menu{height:100%;left:4em;margin:0;opacity:0;padding:0;position:absolute;top:0;transition:all .4s;width:auto}.vjs-menu-button-inline.vjs-slider-active .vjs-menu,.vjs-menu-button-inline:focus .vjs-menu,.vjs-menu-button-inline:hover .vjs-menu{display:block;opacity:1}.vjs-menu-button-inline .vjs-menu-content{height:100%;margin:0;overflow:hidden;width:auto}.video-js .vjs-control-bar{background-color:#2b333f;background-color:#2b333fb3;bottom:0;display:none;height:3em;left:0;position:absolute;right:0;width:100%}.video-js.vjs-spatial-navigation-enabled .vjs-control-bar{gap:1px}.video-js:not(.vjs-controls-disabled,.vjs-using-native-controls,.vjs-error) .vjs-control-bar.vjs-lock-showing{display:flex!important}.vjs-audio-only-mode .vjs-control-bar,.vjs-has-started .vjs-control-bar{display:flex;opacity:1;transition:visibility .1s,opacity .1s;visibility:visible}.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:0;pointer-events:none;transition:visibility 1s,opacity 1s;visibility:visible}.vjs-controls-disabled .vjs-control-bar,.vjs-error .vjs-control-bar,.vjs-using-native-controls .vjs-control-bar{display:none!important}.vjs-audio-only-mode.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar,.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar{opacity:1;pointer-events:auto;visibility:visible}.video-js .vjs-control{flex:none;height:100%;margin:0;padding:0;position:relative;text-align:center;width:4em}.video-js .vjs-control.vjs-visible-text{padding-left:1em;padding-right:1em;width:auto}.vjs-button>.vjs-icon-placeholder:before{font-size:1.8em;line-height:1.67}.vjs-button>.vjs-icon-placeholder{display:block}.vjs-button>.vjs-svg-icon{display:inline-block}.video-js .vjs-control:focus,.video-js .vjs-control:focus:before,.video-js .vjs-control:hover:before{text-shadow:0 0 1em #fff}.video-js :not(.vjs-visible-text)>.vjs-control-text{clip:rect(0 0 0 0);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.video-js .vjs-custom-control-spacer{display:none}.video-js .vjs-progress-control{align-items:center;cursor:pointer;display:flex;flex:auto;min-width:4em;touch-action:none}.video-js .vjs-progress-control.disabled{cursor:default}.vjs-live .vjs-progress-control{display:none}.vjs-liveui .vjs-progress-control{align-items:center;display:flex}.video-js .vjs-progress-holder{flex:auto;height:.3em;transition:all .2s}.video-js .vjs-progress-control .vjs-progress-holder{margin:0 10px}.video-js .vjs-progress-control:hover .vjs-progress-holder{font-size:1.6666666667em}.video-js .vjs-progress-control:hover .vjs-progress-holder.disabled{font-size:1em}.video-js .vjs-progress-holder .vjs-load-progress,.video-js .vjs-progress-holder .vjs-load-progress div,.video-js .vjs-progress-holder .vjs-play-progress{display:block;height:100%;margin:0;padding:0;position:absolute;width:0}.video-js .vjs-play-progress{background-color:#fff}.video-js .vjs-play-progress:before{font-size:.9em;line-height:.35em;position:absolute;right:-.5em;z-index:1}.vjs-svg-icons-enabled .vjs-play-progress:before{content:none!important}.vjs-play-progress .vjs-svg-icon{height:.9em;line-height:.15em;pointer-events:none;position:absolute;right:-.4em;top:-.35em;width:.9em;z-index:1}.video-js .vjs-load-progress{background:#73859f80}.video-js .vjs-load-progress div{background:#73859fbf}.video-js .vjs-time-tooltip{background-color:#fff;background-color:#fffc;border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-progress-holder:focus .vjs-time-tooltip{display:none}.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-time-tooltip,.video-js .vjs-progress-control:hover .vjs-time-tooltip{display:block;font-size:.6em;visibility:visible}.video-js .vjs-progress-control.disabled:hover .vjs-time-tooltip{font-size:1em}.video-js .vjs-progress-control .vjs-mouse-display{background-color:#000;display:none;height:100%;position:absolute;width:1px;z-index:1}.video-js .vjs-progress-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-progress-control .vjs-mouse-display{opacity:0;transition:visibility 1s,opacity 1s;visibility:hidden}.vjs-mouse-display .vjs-time-tooltip{background-color:#000;background-color:#000c;color:#fff}.video-js .vjs-slider{-webkit-touch-callout:none;background-color:#73859f;background-color:#73859f80;cursor:pointer;margin:0 .45em;padding:0;position:relative;-webkit-user-select:none;user-select:none}.video-js .vjs-slider.disabled{cursor:default}.video-js .vjs-slider:focus{box-shadow:0 0 1em #fff;text-shadow:0 0 1em #fff}.video-js.vjs-spatial-navigation-enabled .vjs-slider:focus{outline:.0625em solid #fff}.video-js .vjs-mute-control{cursor:pointer;flex:none}.video-js .vjs-volume-control{cursor:pointer;display:flex;margin-right:1em}.video-js .vjs-volume-control.vjs-volume-horizontal{width:5em}.video-js .vjs-volume-panel .vjs-volume-control{height:1px;margin-left:-1px;opacity:0;visibility:visible;width:1px}.video-js .vjs-volume-panel{transition:width 1s}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active,.video-js .vjs-volume-panel .vjs-volume-control:active,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control,.video-js .vjs-volume-panel:active .vjs-volume-control,.video-js .vjs-volume-panel:focus .vjs-volume-control{opacity:1;position:relative;transition:visibility .1s,opacity .1s,height .1s,width .1s,left 0s,top 0s;visibility:visible}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal{height:3em;margin-right:0;width:5em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-vertical,.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-vertical,.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-vertical{left:-3.5em;transition:left 0s}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active{transition:width .1s;width:10em}.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-mute-toggle-only{width:4em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical{height:8em;left:-3000em;transition:visibility 1s,opacity 1s,height 1s 1s,width 1s 1s,left 1s 1s,top 1s 1s;width:3em}.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal{transition:visibility 1s,opacity 1s,height 1s 1s,width 1s,left 1s 1s,top 1s 1s}.video-js .vjs-volume-panel{display:flex}.video-js .vjs-volume-bar{margin:1.35em .45em}.vjs-volume-bar.vjs-slider-horizontal{height:.3em;width:5em}.vjs-volume-bar.vjs-slider-vertical{height:5em;margin:1.35em auto;width:.3em}.video-js .vjs-volume-level{background-color:#fff;bottom:0;left:0;position:absolute}.video-js .vjs-volume-level:before{font-size:.9em;position:absolute;z-index:1}.vjs-slider-vertical .vjs-volume-level{width:.3em}.vjs-slider-vertical .vjs-volume-level:before{left:-.3em;top:-.5em;z-index:1}.vjs-svg-icons-enabled .vjs-volume-level:before{content:none}.vjs-volume-level .vjs-svg-icon{height:.9em;pointer-events:none;position:absolute;width:.9em;z-index:1}.vjs-slider-horizontal .vjs-volume-level{height:.3em}.vjs-slider-horizontal .vjs-volume-level:before{line-height:.35em;right:-.5em}.vjs-slider-horizontal .vjs-volume-level .vjs-svg-icon{right:-.3em;transform:translateY(-50%)}.vjs-slider-vertical .vjs-volume-level .vjs-svg-icon{top:-.55em;transform:translateX(-50%)}.video-js .vjs-volume-panel.vjs-volume-panel-vertical{width:4em}.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level{height:100%}.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level{width:100%}.video-js .vjs-volume-vertical{background-color:#2b333f;background-color:#2b333fb3;bottom:8em;height:8em;width:3em}.video-js .vjs-volume-horizontal .vjs-menu{left:-2em}.video-js .vjs-volume-tooltip{background-color:#fff;background-color:#fffc;border-radius:.3em;color:#000;float:right;font-family:Arial,Helvetica,sans-serif;font-size:1em;padding:6px 8px 8px;pointer-events:none;position:absolute;top:-3.4em;visibility:hidden;z-index:1}.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip,.video-js .vjs-volume-control:hover .vjs-volume-tooltip{display:block;font-size:1em;visibility:visible}.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip,.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip{left:1em;top:-12px}.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip{font-size:1em}.video-js .vjs-volume-control .vjs-mouse-display{background-color:#000;display:none;height:1px;position:absolute;width:100%;z-index:1}.video-js .vjs-volume-horizontal .vjs-mouse-display{height:100%;width:1px}.video-js .vjs-volume-control:hover .vjs-mouse-display{display:block}.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display{opacity:0;transition:visibility 1s,opacity 1s;visibility:hidden}.vjs-mouse-display .vjs-volume-tooltip{background-color:#000;background-color:#000c;color:#fff}.vjs-poster{bottom:0;cursor:pointer;display:inline-block;height:100%;left:0;margin:0;padding:0;position:absolute;right:0;top:0;vertical-align:middle}.vjs-has-started .vjs-poster,.vjs-using-native-controls .vjs-poster{display:none}.vjs-audio.vjs-has-started .vjs-poster,.vjs-has-started.vjs-audio-poster-mode .vjs-poster,.vjs-pip-container.vjs-has-started .vjs-poster{display:block}.vjs-poster img{height:100%;object-fit:contain;width:100%}.video-js .vjs-live-control{align-items:flex-start;display:flex;flex:auto;font-size:1em;line-height:3em}.video-js.vjs-liveui .vjs-live-control,.video-js:not(.vjs-live) .vjs-live-control{display:none}.video-js .vjs-seek-to-live-control{align-items:center;cursor:pointer;display:inline-flex;flex:none;font-size:1em;height:100%;line-height:3em;min-width:4em;padding-left:.5em;padding-right:.5em;width:auto}.video-js.vjs-live:not(.vjs-liveui) .vjs-seek-to-live-control,.video-js:not(.vjs-live) .vjs-seek-to-live-control{display:none}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge{cursor:auto}.vjs-seek-to-live-control .vjs-icon-placeholder{color:#888;margin-right:.5em}.vjs-svg-icons-enabled .vjs-seek-to-live-control{line-height:0}.vjs-seek-to-live-control .vjs-svg-icon{fill:#888;height:1em;pointer-events:none;width:1em}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-icon-placeholder{color:red}.vjs-seek-to-live-control.vjs-control.vjs-at-live-edge .vjs-svg-icon{fill:red}.video-js .vjs-time-control{flex:none;font-size:1em;line-height:3em;min-width:2em;padding-left:1em;padding-right:1em;width:auto}.video-js .vjs-current-time,.video-js .vjs-duration,.vjs-live .vjs-time-control,.vjs-live .vjs-time-divider{display:none}.vjs-time-divider{display:none;line-height:3em}.video-js .vjs-play-control{cursor:pointer}.video-js .vjs-play-control .vjs-icon-placeholder{flex:none}.vjs-text-track-display{bottom:3em;left:0;pointer-events:none;position:absolute;right:0;top:0}.vjs-error .vjs-text-track-display{display:none}.video-js.vjs-controls-disabled .vjs-text-track-display,.video-js.vjs-user-inactive.vjs-playing .vjs-text-track-display{bottom:1em}.video-js .vjs-text-track{font-size:1.4em;margin-bottom:.1em;text-align:center}.vjs-subtitles{color:#fff}.vjs-captions{color:#fc6}.vjs-tt-cue{display:block}video::-webkit-media-text-track-display{transform:translateY(-3em)}.video-js.vjs-controls-disabled video::-webkit-media-text-track-display,.video-js.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display{transform:translateY(-1.5em)}.video-js.vjs-force-center-align-cues .vjs-text-track-cue{text-align:center!important;width:80%!important}.video-js .vjs-picture-in-picture-control{cursor:pointer;flex:none}.video-js.vjs-audio-only-mode .vjs-picture-in-picture-control,.vjs-pip-window .vjs-picture-in-picture-control{display:none}.video-js .vjs-fullscreen-control{cursor:pointer;flex:none}.video-js.vjs-audio-only-mode .vjs-fullscreen-control,.vjs-pip-window .vjs-fullscreen-control{display:none}.vjs-playback-rate .vjs-playback-rate-value,.vjs-playback-rate>.vjs-menu-button{height:100%;left:0;position:absolute;top:0;width:100%}.vjs-playback-rate .vjs-playback-rate-value{font-size:1.5em;line-height:2;pointer-events:none;text-align:center}.vjs-playback-rate .vjs-menu{left:0;width:4em}.vjs-error .vjs-error-display .vjs-modal-dialog-content{font-size:1.4em;text-align:center}.vjs-loading-spinner{background-clip:padding-box;border:.6em solid #2b333fb3;border-radius:50%;box-sizing:border-box;display:none;height:5em;left:50%;opacity:.85;position:absolute;text-align:left;top:50%;transform:translate(-50%,-50%);visibility:hidden;width:5em}.vjs-seeking .vjs-loading-spinner,.vjs-waiting .vjs-loading-spinner{align-items:center;animation:vjs-spinner-show 0s linear .3s forwards;display:flex;justify-content:center}.vjs-error .vjs-loading-spinner{display:none}.vjs-loading-spinner:after,.vjs-loading-spinner:before{border:inherit;border-color:#fff #0000 #0000;border-radius:inherit;box-sizing:inherit;content:"";height:inherit;opacity:1;position:absolute;width:inherit}.vjs-seeking .vjs-loading-spinner:after,.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:before{animation:vjs-spinner-spin 1.1s cubic-bezier(.6,.2,0,.8) infinite,vjs-spinner-fade 1.1s linear infinite}.vjs-seeking .vjs-loading-spinner:before,.vjs-waiting .vjs-loading-spinner:before{border-top-color:#fff}.vjs-seeking .vjs-loading-spinner:after,.vjs-waiting .vjs-loading-spinner:after{animation-delay:.44s;border-top-color:#fff}@keyframes vjs-spinner-show{to{visibility:visible}}@keyframes vjs-spinner-spin{to{transform:rotate(1turn)}}@keyframes vjs-spinner-fade{0%{border-top-color:#73859f}20%{border-top-color:#73859f}35%{border-top-color:#fff}60%{border-top-color:#73859f}to{border-top-color:#73859f}}.video-js.vjs-audio-only-mode .vjs-captions-button{display:none}.vjs-chapters-button .vjs-menu ul{width:24em}.video-js.vjs-audio-only-mode .vjs-descriptions-button{display:none}.vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-svg-icon{height:1.5em;width:1.5em}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder{display:inline-block;margin-bottom:-.1em;vertical-align:middle}.video-js .vjs-subs-caps-button+.vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{content:"\f10c";font-family:VideoJS;font-size:1.5em;line-height:inherit}.video-js.vjs-audio-only-mode .vjs-subs-caps-button{display:none}.video-js .vjs-audio-button+.vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder,.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder{display:inline-block;margin-bottom:-.1em;vertical-align:middle}.video-js .vjs-audio-button+.vjs-menu .vjs-description-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before,.video-js .vjs-audio-button+.vjs-menu .vjs-main-desc-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before{content:" \f12e";font-family:VideoJS;font-size:1.5em;line-height:inherit}.video-js.vjs-layout-small .vjs-current-time,.video-js.vjs-layout-small .vjs-duration,.video-js.vjs-layout-small .vjs-playback-rate,.video-js.vjs-layout-small .vjs-remaining-time,.video-js.vjs-layout-small .vjs-time-divider,.video-js.vjs-layout-small .vjs-volume-control,.video-js.vjs-layout-tiny .vjs-current-time,.video-js.vjs-layout-tiny .vjs-duration,.video-js.vjs-layout-tiny .vjs-playback-rate,.video-js.vjs-layout-tiny .vjs-remaining-time,.video-js.vjs-layout-tiny .vjs-time-divider,.video-js.vjs-layout-tiny .vjs-volume-control,.video-js.vjs-layout-x-small .vjs-current-time,.video-js.vjs-layout-x-small .vjs-duration,.video-js.vjs-layout-x-small .vjs-playback-rate,.video-js.vjs-layout-x-small .vjs-remaining-time,.video-js.vjs-layout-x-small .vjs-time-divider,.video-js.vjs-layout-x-small .vjs-volume-control{display:none}.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-tiny .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:active,.video-js.vjs-layout-x-small .vjs-volume-panel.vjs-volume-panel-horizontal:hover{width:auto}.video-js.vjs-layout-tiny .vjs-progress-control,.video-js.vjs-layout-x-small .vjs-progress-control{display:none}.video-js.vjs-layout-x-small .vjs-custom-control-spacer{display:block;flex:auto}.vjs-modal-dialog.vjs-text-track-settings{background-color:#2b333f;background-color:#2b333fbf;color:#fff;height:70%}.vjs-spatial-navigation-enabled .vjs-modal-dialog.vjs-text-track-settings{height:80%}.vjs-error .vjs-text-track-settings{display:none}.vjs-text-track-settings .vjs-modal-dialog-content{display:table}.vjs-text-track-settings .vjs-track-settings-colors,.vjs-text-track-settings .vjs-track-settings-controls,.vjs-text-track-settings .vjs-track-settings-font{display:table-cell}.vjs-text-track-settings .vjs-track-settings-controls{text-align:right;vertical-align:bottom}@supports (display:grid){.vjs-text-track-settings .vjs-modal-dialog-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr;padding:20px 24px 0}.vjs-track-settings-controls .vjs-default-button{margin-bottom:20px}.vjs-text-track-settings .vjs-track-settings-controls{grid-column:1/-1}.vjs-layout-small .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-tiny .vjs-text-track-settings .vjs-modal-dialog-content,.vjs-layout-x-small .vjs-text-track-settings .vjs-modal-dialog-content{grid-template-columns:1fr}}.vjs-text-track-settings select{font-size:inherit}.vjs-track-setting>select{margin-bottom:.5em;margin-right:1em}.vjs-text-track-settings fieldset{border:none;margin:10px}.vjs-text-track-settings fieldset span{display:inline-block;padding:0 .6em .8em}.vjs-text-track-settings fieldset span>select{max-width:7.3em}.vjs-text-track-settings legend{color:#fff;font-size:1.2em;font-weight:700}.vjs-text-track-settings .vjs-label{margin:0 .5em .5em 0}.vjs-track-settings-controls button:active,.vjs-track-settings-controls button:focus{background-image:linear-gradient(0deg,#fff 88%,#73859f);outline-style:solid;outline-width:medium}.vjs-track-settings-controls button:hover{color:#2b333fbf}.vjs-track-settings-controls button{background-color:#fff;background-image:linear-gradient(-180deg,#fff 88%,#73859f);border-radius:2px;color:#2b333f;cursor:pointer}.vjs-track-settings-controls .vjs-default-button{margin-right:1em}.vjs-title-bar{background:#000000e6;background:linear-gradient(180deg,#000000e6,#000000b3 60%,#0000);font-size:1.2em;line-height:1.5;padding:.666em 1.333em 4em;pointer-events:none;position:absolute;top:0;transition:opacity .1s;width:100%}.vjs-error .vjs-title-bar{display:none}.vjs-title-bar-description,.vjs-title-bar-title{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vjs-title-bar-title{font-weight:700;margin-bottom:.333em}.vjs-playing.vjs-user-inactive .vjs-title-bar{opacity:0;transition:opacity 1s}.video-js .vjs-skip-backward-10,.video-js .vjs-skip-backward-30,.video-js .vjs-skip-backward-5,.video-js .vjs-skip-forward-10,.video-js .vjs-skip-forward-30,.video-js .vjs-skip-forward-5{cursor:pointer}@media print{.video-js>:not(.vjs-tech):not(.vjs-poster){visibility:hidden}}.vjs-resize-manager{border:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1000}.js-focus-visible .video-js :focus:not(.focus-visible){outline:none}.video-js :focus:not(:focus-visible){outline:none}.vjs-playlist{background-color:#1a1a1a;color:#fff;list-style-type:none;padding:0}.vjs-playlist img{display:block}.vjs-playlist .vjs-playlist-item-list{list-style:none;margin:0;padding:0;position:relative}.vjs-playlist .vjs-playlist-item{cursor:pointer;overflow:hidden;position:relative}.vjs-playlist .vjs-playlist-thumbnail-placeholder{background:#303030}.vjs-playlist .vjs-playlist-now-playing-text{display:none;left:0;margin:.8rem;padding-left:2px;position:absolute;top:0}.vjs-playlist .vjs-playlist-duration{background-color:#1a1a1acc;left:.5rem;margin-left:2px;padding:2px 5px 3px;position:absolute;top:.5rem}.vjs-playlist .vjs-playlist-title-container{bottom:0;box-sizing:border-box;padding:.5rem .8rem;position:absolute;text-shadow:1px 1px 2px #000,-1px 1px 2px #000,1px -1px 2px #000,-1px -1px 2px #000;width:100%}.vjs-playlist .vjs-playlist-name{display:block;font-style:normal;line-height:20px;max-height:2.5em;overflow:hidden;padding:0 0 4px 2px;text-overflow:ellipsis;white-space:nowrap}.vjs-playlist .vjs-playlist-description{display:block;font-size:14px;overflow:hidden;padding:0 0 0 2px;text-overflow:ellipsis;white-space:nowrap}.vjs-playlist .vjs-up-next-text{display:none;font-size:.8em;padding:.1rem 2px;text-transform:uppercase}.vjs-playlist .vjs-up-next .vjs-up-next-text{display:block}.vjs-playlist .vjs-selected{background-color:#141a21}.vjs-playlist .vjs-selected img{opacity:.2}.vjs-playlist .vjs-selected .vjs-playlist-duration{display:none}.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text{display:block}.vjs-playlist .vjs-selected .vjs-playlist-title-container{text-shadow:none}.vjs-playlist-vertical{overflow-x:hidden;overflow-y:auto}.vjs-playlist-vertical img{min-height:54px;width:100%}.vjs-playlist-vertical .vjs-playlist-item{margin-bottom:5px}.vjs-playlist-vertical .vjs-playlist-thumbnail{display:block;width:100%}.vjs-playlist-vertical .vjs-playlist-thumbnail-placeholder{height:100px}.vjs-playlist-horizontal{overflow-x:auto;overflow-y:hidden}.vjs-playlist-horizontal img{height:100%;min-width:100px}.vjs-playlist-horizontal .vjs-playlist-item-list{height:100%;white-space:nowrap}.vjs-playlist-horizontal .vjs-playlist-item{display:inline-block;height:100%;margin-right:5px}.vjs-playlist-horizontal .vjs-playlist-thumbnail{display:block;height:100%}.vjs-playlist-horizontal .vjs-playlist-thumbnail-placeholder{height:100%;width:180px}.vjs-playlist.vjs-ad-playing.vjs-csspointerevents{overflow:auto;pointer-events:none}.vjs-playlist.vjs-ad-playing .vjs-playlist-ad-overlay{background-color:#00000080;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.vjs-playlist{font-size:14px}.vjs-playlist .vjs-playlist-description{height:28px;line-height:21px}.vjs-mouse.vjs-playlist{font-size:15px}.vjs-mouse.vjs-playlist .vjs-playlist-description{height:30px;line-height:23px}@media (min-width:600px){.vjs-mouse.vjs-playlist{font-size:17px}.vjs-mouse.vjs-playlist .vjs-playlist-description{height:34px;line-height:26px}.vjs-playlist .vjs-playlist-name{line-height:22px}}@media (max-width:520px){.vjs-mouse.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text,.vjs-mouse.vjs-playlist .vjs-up-next .vjs-up-next-text,.vjs-playlist .vjs-selected .vjs-playlist-now-playing-text,.vjs-playlist .vjs-up-next .vjs-up-next-text{display:none}}@media (min-width:521px){.vjs-playlist img{min-height:85px}}@media (max-width:750px){.vjs-playlist .vjs-playlist-duration{display:none}}code[class*=language-],pre[class*=language-]{word-wrap:normal;background:none;color:#000;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;-webkit-hyphens:none;hyphens:none;line-height:1.5;tab-size:4;text-align:left;text-shadow:0 1px #fff;white-space:pre;word-break:normal;word-spacing:normal}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{background:#b3d4fc;text-shadow:none}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{background:#ffffff80;color:#9a6e3a}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} /*! normalize.css v2.0.1 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;font-family:sans-serif}body{font-size:16px;margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{word-wrap:break-word;white-space:pre;white-space:pre-wrap}q{quotes:"\201C""\201D""\2018""\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;box-sizing:initial}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.vjs-theme-city{--vjs-theme-city--primary:#bf3b4d;--vjs-theme-city--secondary:#fff}.vjs-theme-city .vjs-control-bar{background:none;background-image:linear-gradient(0deg,#000,#0000);height:70px;padding-top:20px}.vjs-theme-city .vjs-button>.vjs-icon-placeholder:before{line-height:50px}.vjs-theme-city .vjs-play-progress:before{display:none}.vjs-theme-city .vjs-progress-control{height:20px;left:0;position:absolute;right:0;top:0;width:100%}.vjs-theme-city .vjs-progress-control .vjs-progress-holder{left:0;margin:0;position:absolute;right:0;top:20px;width:100%}.vjs-theme-city .vjs-play-progress{background-color:var(--vjs-theme-city--primary)}.vjs-theme-city .vjs-remaining-time{flex:3 1;line-height:50px;order:1;text-align:left}.vjs-theme-city .vjs-play-control{flex:8 1;font-size:1.75em;order:2}.vjs-theme-city .vjs-fullscreen-control,.vjs-theme-city .vjs-picture-in-picture-control,.vjs-theme-city .vjs-volume-panel{flex:1 1;order:3}.vjs-theme-city .vjs-mute-control{display:none}.vjs-theme-city .vjs-volume-panel{margin-left:.5em;margin-right:.5em;padding-top:1.5em}.vjs-theme-city .vjs-volume-bar.vjs-slider-horizontal,.vjs-theme-city .vjs-volume-panel,.vjs-theme-city .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.vjs-theme-city .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.vjs-theme-city .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,.vjs-theme-city .vjs-volume-panel:hover,.vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal{width:3em}.vjs-theme-city .vjs-volume-level:before{font-size:1em}.vjs-theme-city .vjs-volume-panel .vjs-volume-control{height:100%;opacity:1;width:100%}.vjs-theme-city .vjs-volume-bar{background-color:initial;margin:0}.vjs-theme-city .vjs-slider-horizontal .vjs-volume-level{height:100%}.vjs-theme-city .vjs-volume-bar.vjs-slider-horizontal{height:100%;margin-bottom:0;margin-top:0}.vjs-theme-city .vjs-volume-bar:before{border-color:#0000 #0000 #ffffff40;border-style:solid;border-width:0 0 1.75em 3em;content:"";height:0;left:0;position:absolute;top:0;width:0;z-index:0}.vjs-theme-city .vjs-volume-level{background-color:initial;overflow:hidden}.vjs-theme-city .vjs-volume-level:before{border-bottom:1.75em solid var(--vjs-theme-city--secondary);border-left:3em solid #0000;border-right:0 solid #0000;border-top:0 solid #0000;content:"";height:0;left:0;position:absolute;top:0;width:0;z-index:1}.vjs-theme-fantasy{--vjs-theme-fantasy--primary:#9f44b4;--vjs-theme-fantasy--secondary:#fff}.vjs-theme-fantasy .vjs-big-play-button{background:none;border:none;color:var(--vjs-theme-fantasy--primary);font-size:80px;height:70px;left:50%;line-height:70px;margin-left:-35px;margin-top:-35px;top:50%;width:70px}.vjs-theme-fantasy.vjs-big-play-button:focus,.vjs-theme-fantasy:hover .vjs-big-play-button{background-color:initial;color:#fff}.vjs-theme-fantasy .vjs-control-bar{height:54px}.vjs-theme-fantasy .vjs-button>.vjs-icon-placeholder:before,.vjs-theme-fantasy .vjs-time-control{line-height:54px}.vjs-theme-fantasy .vjs-play-control{font-size:1.5em;position:relative}.vjs-theme-fantasy .vjs-volume-panel{order:4}.vjs-theme-fantasy .vjs-volume-bar{margin-top:2.5em}.vjs-theme-city .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal{height:100%}.vjs-theme-fantasy .vjs-progress-control .vjs-progress-holder,.vjs-theme-fantasy .vjs-progress-control:hover .vjs-progress-holder{font-size:1.5em}.vjs-theme-fantasy .vjs-play-control .vjs-icon-placeholder:before{border:3px solid var(--vjs-theme-fantasy--secondary);border-radius:1em;height:1.3em;left:9px;line-height:1.1;margin-top:.2em;top:2px;width:1.3em}.vjs-theme-fantasy .vjs-play-control:hover .vjs-icon-placeholder:before{border:3px solid var(--vjs-theme-fantasy--secondary)}.vjs-theme-fantasy .vjs-play-progress,.vjs-theme-fantasy .vjs-play-progress:before{background-color:var(--vjs-theme-fantasy--primary)}.vjs-theme-fantasy .vjs-play-progress:before{border:4px solid var(--vjs-theme-fantasy--secondary);border-radius:.8em;content:"";height:.8em;top:-.25em;width:.8em}.vjs-theme-fantasy .vjs-progress-control{font-size:14px}.vjs-theme-fantasy .vjs-fullscreen-control{order:6}.vjs-theme-fantasy .vjs-remaining-time{display:none}.vjs-theme-fantasy.nyan .vjs-play-progress{background:linear-gradient(180deg,#fe0000,#fe9a01 16.666666667%,#fe9a01 0,#ff0 33.332666667%,#ff0 0,#32ff00 49.999326667%,#32ff00 0,#0099fe 66.6659926%,#0099fe 0,#63f 83.33266%,#63f 0)}.vjs-theme-fantasy.nyan .vjs-play-progress:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 100 125'%3E%3Cpath d='M62.153 37.323h2.813v3.246h-2.813zm2.705 3.246h2.813v3.246h-2.813zm2.814 3.245h11.9v3.246h-11.9zm11.9-19.365h2.813v19.365h-2.813zm2.814 12.874h3.244v3.246h-3.244zm3.244-3.191h5.627v3.246H85.63zm5.627 3.191h2.92v12.95h-2.92zm2.92 12.951h2.922V66.21h-2.922zM91.29 66.372h2.887v3.245H91.29zm-2.889 3.245h2.889v3.246h-2.889zm-61.089 3.246h61.003v3.245H27.312zm46.31 3.245h2.889v3.246h-2.889zm8.941 0h2.888v3.246h-2.888zm-6.052 3.246h6.053v3.245h-6.053zm-14.57 0h8.895v3.245h-8.895zm6.006-3.246h2.889v3.246h-2.889zm-8.626 0h2.888v3.246h-2.888zM27.312 17.917h49.387v3.246H27.312zm49.387 3.245h2.873v3.287h-2.873zm-20.327 12.97h5.781v3.191h-5.781zm-2.924 3.191h2.924v12.951h-2.924zm-2.96 12.951h2.96v16.049h-2.96zm2.96 16.049h2.924v3.257h-2.924zm2.924 3.257h2.949v3.283h-2.949zm8.697-6.367h2.878v6.367h-2.878zm2.878 3.184h17.504v3.22H67.947z'/%3E%3Cpath d='M82.563 63.213h2.888v3.185h-2.888zm-8.762 0h2.898v3.185h-2.898zm2.898-6.439h2.873v3.145h-2.873zm5.864 0h2.888v3.145h-2.888zm2.888-3.33h2.864v3.33h-2.864z'/%3E%3Cpath d='M85.451 56.774h2.864v3.145h-2.864zm-20.382-3.33h2.878v3.33h-2.878zm0 3.33h2.878v3.145h-2.878zm-2.86 0h2.86v3.145h-2.86zm-40.7-32.447h2.813v45.169h-2.813zm2.814-3.165h2.99v3.165h-2.99zm-5.761 48.334h8.75v3.367h-8.75zm-2.906 3.367h2.906v9.591h-2.906zm2.906 6.438h8.75v3.153h-8.75zm5.761-3.193h5.743V79.3h-5.743zm8.813 0h2.824v6.346h-2.824zm2.824 3.173h5.813v3.173H35.96zm5.814-3.173h2.864v3.173h-2.864zM3.948 40.569h11.708v3.229H3.948zm0 3.245h2.921v6.459H3.948zm2.921 3.246h2.934v6.384H6.869zm2.934 3.214h2.909v6.5H9.803z'/%3E%3Cpath d='M12.711 53.444h2.945v6.475h-2.945zm2.945 3.33h5.853v3.145h-5.853z'/%3E%3Cpath d='M18.583 59.919h2.926v3.294h-2.926zm0-12.875h2.926v6.4h-2.926zm-5.872-3.23h5.872v3.229h-5.872zm2.936 3.23h2.936v3.2h-2.936z'/%3E%3Cpath fill='none' d='M47.439 50.274h3.049v3.17h-3.049z'/%3E%3Cpath d='M73.801 30.94v-3.138h-2.965v-3.354l-37.7-.122v3.151h-3.07v3.462l-2.753-.108-.118 32.381h2.871v3.185h3.07v-3.185h2.824v3.185h-2.824v3.099l20.312.084v-3.257h-2.96V50.274h2.96V37.323h2.924v-3.191h5.781v3.191h2.813l-.108 3.246h2.813v3.246h9.027V30.94h-2.897zM33.136 56.682h-3.07v-3.158h3.07v3.158zm2.824-22.55h-2.824v-3.084h2.824v3.084zm2.907 12.928h2.907v3.184h-2.907V47.06zm5.771 16.153h-2.864v-3.294h2.864v3.294zm2.801-19.399h-2.801v-3.246h2.801v3.246zm6.009-12.766h-2.96v-3.354h2.96v3.354zm8.705 0h-2.832v-3.354h2.832v3.354zm8.683 6.275h-2.889v-3.191h2.889v3.191z'/%3E%3C/svg%3E") no-repeat;border:none;height:1.3em;top:-.35em;width:1.3em}.vjs-theme-forest{--vjs-theme-forest--primary:#6fb04e;--vjs-theme-forest--secondary:#fff}.vjs-theme-forest.vjs-big-play-button:focus,.vjs-theme-forest:hover .vjs-big-play-button{background-color:initial;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%236fb04e'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 0 1-3.604.194 3.492 3.492 0 0 1-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 0 1 3.604.194l20.433 13.843a3.497 3.497 0 0 1 .001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 0 0-.276-.09.51.51 0 0 0-.239.062.483.483 0 0 0-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0 0 58.6 44a.49.49 0 0 0-.22-.413z'/%3E%3C/svg%3E")}.vjs-theme-forest .vjs-big-play-button{background:none;background-position:50%;background-repeat:no-repeat;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='%23fff'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 0 1-3.604.194 3.492 3.492 0 0 1-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 0 1 3.604.194l20.433 13.843a3.497 3.497 0 0 1 .001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 0 0-.276-.09.51.51 0 0 0-.239.062.483.483 0 0 0-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0 0 58.6 44a.49.49 0 0 0-.22-.413z'/%3E%3C/svg%3E");border:none;color:purple;height:88px;left:50%;margin-left:-44px;margin-top:-44px;top:50%;width:88px}.vjs-theme-forest .vjs-big-play-button .vjs-icon-placeholder{display:none}.vjs-theme-forest .vjs-button>.vjs-icon-placeholder:before{line-height:1.55}.vjs-theme-forest .vjs-control:not(.vjs-disabled):not(.vjs-time-control):hover{color:var(--vjs-theme-forest--primary);text-shadow:var(--vjs-theme-forest--secondary) 1px 0 10px}.vjs-theme-forest .vjs-control-bar{background:none;margin-bottom:1em;padding-left:1em;padding-right:1em}.vjs-theme-forest .vjs-play-control{font-size:.8em}.vjs-theme-forest .vjs-play-control .vjs-icon-placeholder:before{background-color:var(--vjs-theme-forest--secondary);border-radius:1em;color:var(--vjs-theme-forest--primary);height:1.5em;margin-top:.2em;width:1.5em}.vjs-theme-forest .vjs-play-control:hover .vjs-icon-placeholder:before{background-color:var(--vjs-theme-forest--primary);color:var(--vjs-theme-forest--secondary)}.vjs-theme-forest .vjs-mute-control{display:none}.vjs-theme-forest .vjs-volume-panel{margin-left:.5em;margin-right:.5em;padding-top:.3em}.vjs-theme-forest .vjs-volume-bar.vjs-slider-horizontal,.vjs-theme-forest .vjs-volume-panel,.vjs-theme-forest .vjs-volume-panel.vjs-volume-panel-horizontal:hover,.vjs-theme-forest .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,.vjs-theme-forest .vjs-volume-panel:hover,.vjs-theme-forest .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal{width:3em}.vjs-theme-forest .vjs-volume-level:before{font-size:1em}.vjs-theme-forest .vjs-volume-panel .vjs-volume-control{height:100%;opacity:1;width:100%}.vjs-theme-forest .vjs-volume-bar{background-color:initial;margin:0}.vjs-theme-forest .vjs-slider-horizontal .vjs-volume-level{height:100%}.vjs-theme-forest .vjs-volume-bar.vjs-slider-horizontal{height:100%;margin-bottom:0;margin-top:0}.vjs-theme-forest .vjs-volume-bar:before{border-bottom:2em solid var(--vjs-theme-forest--primary);border-left:3em solid #0000;border-right:0 solid #0000;border-top:0 solid #0000;content:"";height:0;left:0;position:absolute;top:0;width:0;z-index:0}.vjs-theme-forest .vjs-volume-level{background-color:initial;overflow:hidden}.vjs-theme-forest .vjs-volume-level:before{border-bottom:2em solid var(--vjs-theme-forest--secondary);border-left:3em solid #0000;border-right:0 solid #0000;border-top:0 solid #0000;content:"";height:0;left:0;position:absolute;top:0;width:0;z-index:1}.vjs-theme-forest .vjs-progress-control:hover .vjs-progress-holder{font-size:1em}.vjs-theme-forest .vjs-play-progress:before{display:none}.vjs-theme-forest .vjs-progress-holder{border-radius:.2em;height:.5em;margin:0}.vjs-theme-forest .vjs-load-progress,.vjs-theme-forest .vjs-load-progress div,.vjs-theme-forest .vjs-play-progress{border-radius:.2em}.vjs-theme-sea .vjs-big-play-button{background-color:#ffffff40;border:none;border-radius:30px;height:79px;left:50%;line-height:79px;margin:-51.5px auto 0 -39.5px;object-fit:contain;top:50%;width:103px}.vjs-theme-sea .vjs-control-bar{background-color:#fff6;height:4em}.vjs-theme-sea .vjs-button:hover{background:linear-gradient(0deg,#d0ddee,#fff);color:#4176bc}.vjs-theme-sea .vjs-button>.vjs-icon-placeholder:before{line-height:2.2}.vjs-theme-sea .vjs-time-control{line-height:4em}.vjs-theme-sea .vjs-picture-in-picture-control,.vjs-theme-sea .vjs-volume-panel{display:none}.vjs-theme-sea .vjs-progress-control .vjs-play-progress{background-color:#4176bce6}.vjs-theme-sea .vjs-progress-control .vjs-play-progress:before{display:none}.vjs-theme-sea .vjs-progress-control .vjs-slider{background-color:#4176bc1a}.vjs-theme-sea .vjs-progress-control .vjs-load-progress div{background:#ffffff80}.vjs-theme-sea .vjs-progress-control .vjs-progress-holder{height:100%;margin:0}.vjs-theme-sea .vjs-progress-control .vjs-time-tooltip{background-color:#4176bc80;color:#fff}.vjs-theme-sea .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip{background-color:#ffffffb3;color:#4176bc}</style><style data-styled="" data-styled-version="5.3.5">.bpHbQg{margin-bottom:3em;}/*!sc*/ .bpHbQg > img{display:block;margin:0 auto;}/*!sc*/ data-styled.g1[id="BlogImage__Wrapper-sc-1kim4hz-0"]{content:"bpHbQg,"}/*!sc*/ .iKptIg{display:block;margin-top:1em;color:#424242;font-size:14px;text-align:center;}/*!sc*/ data-styled.g2[id="BlogImage__ImageDesc-sc-1kim4hz-1"]{content:"iKptIg,"}/*!sc*/ .PoIjk{position:relative;padding-bottom:56.25%;height:0;}/*!sc*/ .PoIjk > iframe{position:absolute;top:0;left:0;width:100%;height:100%;}/*!sc*/ data-styled.g3[id="VideoWrapper-sc-1eb1q73-0"]{content:"PoIjk,"}/*!sc*/ .dzvRdP{max-width:1400px;margin:0 auto;position:relative;}/*!sc*/ @media (min-width:60em){.dzvRdP{padding:2em;}}/*!sc*/ @media (min-width:68.75em){.dzvRdP{padding:2.8em 2em;}}/*!sc*/ data-styled.g4[id="Container-sc-15w3q0z-0"]{content:"dzvRdP,"}/*!sc*/ .hLBjTn{color:#750075;font-weight:400;}/*!sc*/ .hLBjTn:hover,.hLBjTn:active{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ data-styled.g5[id="Link__StyledLink-sc-wxg1ap-0"]{content:"hLBjTn,"}/*!sc*/ .bZKoAk{display:inline-block;margin-top:16px;margin-left:16px;}/*!sc*/ @media (min-width:60em){.bZKoAk{margin:0;}}/*!sc*/ .bZKoAk h1{font-size:0;position:absolute;top:-99999px;left:-99999px;overflow:hidden;width:1px;height:1px;}/*!sc*/ .bZKoAk .Link-sc-wxg1ap-1{display:block;width:158px;height:37px;background:center / contain no-repeat url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFsKCTwhRU5USVRZIG5zX2V4dGVuZCAiaHR0cDovL25zLmFkb2JlLmNvbS9FeHRlbnNpYmlsaXR5LzEuMC8iPgoJPCFFTlRJVFkgbnNfYWkgImh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVJbGx1c3RyYXRvci8xMC4wLyI+Cgk8IUVOVElUWSBuc19ncmFwaHMgImh0dHA6Ly9ucy5hZG9iZS5jb20vR3JhcGhzLzEuMC8iPgoJPCFFTlRJVFkgbnNfdmFycyAiaHR0cDovL25zLmFkb2JlLmNvbS9WYXJpYWJsZXMvMS4wLyI+Cgk8IUVOVElUWSBuc19pbXJlcCAiaHR0cDovL25zLmFkb2JlLmNvbS9JbWFnZVJlcGxhY2VtZW50LzEuMC8iPgoJPCFFTlRJVFkgbnNfc2Z3ICJodHRwOi8vbnMuYWRvYmUuY29tL1NhdmVGb3JXZWIvMS4wLyI+Cgk8IUVOVElUWSBuc19jdXN0b20gImh0dHA6Ly9ucy5hZG9iZS5jb20vR2VuZXJpY0N1c3RvbU5hbWVzcGFjZS8xLjAvIj4KCTwhRU5USVRZIG5zX2Fkb2JlX3hwYXRoICJodHRwOi8vbnMuYWRvYmUuY29tL1hQYXRoLzEuMC8iPgpdPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zOng9IiZuc19leHRlbmQ7IiB4bWxuczppPSImbnNfYWk7IiB4bWxuczpncmFwaD0iJm5zX2dyYXBoczsiCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNTdweCIgaGVpZ2h0PSIzNS4zcHgiCgkgdmlld0JveD0iMCAwIDE1NyAzNS4zIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNTcgMzUuMzsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8bWV0YWRhdGE+Cgk8c2Z3ICB4bWxucz0iJm5zX3NmdzsiPgoJCTxzbGljZXM+PC9zbGljZXM+CgkJPHNsaWNlU291cmNlQm91bmRzICBib3R0b21MZWZ0T3JpZ2luPSJ0cnVlIiBoZWlnaHQ9IjM1LjMiIHdpZHRoPSIxNTciIHg9IjExNTMuMSIgeT0iNDc4OSI+PC9zbGljZVNvdXJjZUJvdW5kcz4KCTwvc2Z3Pgo8L21ldGFkYXRhPgo8Zz4KCTxnPgoJCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMzcuMSwwIDE0LjQsMCAwLDE3LjQgMTQuNSwzNS4zIDM3LjEsMzUuMyAyMi43LDE3LjQgCQkiLz4KCQk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjQ3LDAgNDAuMSwwIDMxLjksOS45IDM4LjIsMTcuNCAzMS45LDI1LjEgNDAuMSwzNS4zIDQ3LDM1LjMgNjEuNCwxNy40IAkJIi8+Cgk8L2c+CjwvZz4KPGc+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTEzLjcsMTMuOWMtMS45LDAtMy41LDEuNi0zLjUsMy41czEuNSwzLjUsMy41LDMuNXMzLjUtMS41LDMuNS0zLjVTMTE1LjYsMTMuOSwxMTMuNywxMy45eiIvPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTkwLjcsMTQuMmgtMi4xdjYuNGgyLjFjMS45LDAsMy41LTEuNCwzLjUtMy4yUzkyLjYsMTQuMiw5MC43LDE0LjJ6Ii8+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTQ1LjQsMy40SDUzbDExLjQsMTQuMUw1MywzMS45aDkyLjRMMTU3LDE3LjVMMTQ1LjQsMy40eiBNNzYuMiwyM2gtMi44bC00LjItMTEuMmgyLjZsMyw4LjFsMy04LjFoMi41CgkJTDc2LjIsMjN6IE04My45LDIzaC0yLjRWMTEuOGgyLjRWMjN6IE05MC43LDIzaC00LjVWMTEuOGg0LjVjMy4yLDAsNS45LDIuNSw1LjksNS42UzkzLjksMjMsOTAuNywyM3ogTTEwNi4yLDIzaC03LjlWMTEuOGg3LjZ2Mi40CgkJaC01LjN2MS45aDV2Mi40aC01djIuMWg1LjVWMjN6IE0xMTMuNywyMy4yYy0zLjIsMC01LjgtMi42LTUuOC01LjhzMi42LTUuOSw1LjgtNS45YzMuMiwwLDUuOSwyLjYsNS45LDUuOVMxMTYuOSwyMy4yLDExMy43LDIzLjJ6CgkJIE0xMzAsMTkuOWMwLDEuOS0xLjYsMy41LTMuNSwzLjVjLTEuNywwLTMuMS0xLjItMy40LTIuOGwyLjMtMC42YzAsMC42LDAuNSwxLDEuMSwxYzAuNiwwLDEuMS0wLjUsMS4xLTEuMXYtOC4xaDIuNFYxOS45egoJCSBNMTM1LjIsMjMuMmMtMS41LDAtMi44LTAuNi0zLjYtMS41bDEuOS0xLjVjMC4zLDAuMywwLjksMC42LDEuNiwwLjZjMC45LDAsMS42LTAuNCwxLjYtMS4xYzAtMC40LTAuMy0wLjgtMC43LTAuOWwtMi0wLjYKCQljLTEuNC0wLjQtMi4yLTEuOC0yLjItMy4yYzAtMi4xLDEuOC0zLjUsMy43LTMuNWMxLjMsMCwyLjQsMC41LDMuMSwxLjNsLTEuOCwxLjVjLTAuMi0wLjItMC43LTAuNC0xLjItMC40Yy0wLjgsMC0xLjMsMC41LTEuMywxLjEKCQljMCwwLjQsMC4zLDAuOCwwLjcsMC45bDIsMC42YzEuNCwwLjQsMi4yLDEuOCwyLjIsMy4yQzEzOS4xLDIxLjgsMTM3LjMsMjMuMiwxMzUuMiwyMy4yeiIvPgo8L2c+Cjwvc3ZnPgo=);}/*!sc*/ data-styled.g7[id="Header__Logo-sc-cmpqbx-0"]{content:"bZKoAk,"}/*!sc*/ .ikfDkm{position:absolute;width:100%;z-index:100;}/*!sc*/ .ikfDkm .Container-sc-15w3q0z-0{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}/*!sc*/ data-styled.g8[id="Header__HeaderWrapper-sc-cmpqbx-1"]{content:"ikfDkm,"}/*!sc*/ @media (min-width:60em){.eAITWh{display:none;}}/*!sc*/ .eAITWh .bm-burger-button{position:absolute;width:36px;height:30px;top:1em;right:1em;}/*!sc*/ .eAITWh .bm-burger-button::before{content:'';position:absolute;width:150%;height:150%;top:-25%;left:-25%;background-color:#000;opacity:0.2;}/*!sc*/ .eAITWh .bm-burger-bars{background:#fff;}/*!sc*/ .eAITWh .bm-cross-button{height:24px;width:24px;}/*!sc*/ .eAITWh .bm-cross{background:#bdc3c7;}/*!sc*/ .eAITWh .bm-menu-wrap{position:fixed;height:100%;}/*!sc*/ .eAITWh .bm-menu{background:#373a47;padding:2.5em 1.5em 0;font-size:1.15em;}/*!sc*/ .eAITWh .bm-morph-shape{fill:#373a47;}/*!sc*/ .eAITWh .bm-item-list{color:#b8b7ad;padding:0.8em;}/*!sc*/ .eAITWh .bm-item{display:inline-block;}/*!sc*/ .eAITWh .bm-overlay{background:rgba(0,0,0,0.3);}/*!sc*/ .eAITWh .Link-sc-wxg1ap-1{color:white;padding-left:1em;}/*!sc*/ data-styled.g9[id="Header__MobileMenu-sc-cmpqbx-2"]{content:"eAITWh,"}/*!sc*/ .ducoje{display:none;}/*!sc*/ @media (min-width:60em){.ducoje{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}}/*!sc*/ data-styled.g10[id="Header__DesktopMenu-sc-cmpqbx-3"]{content:"ducoje,"}/*!sc*/ .dhrXd{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-column-gap:2em;column-gap:2em;list-style:none;}/*!sc*/ .dhrXd li{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;font-size:16px;}/*!sc*/ @media (min-width:60em){.dhrXd li{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}/*!sc*/ .dhrXd li:first-child{margin-left:0;}/*!sc*/ .dhrXd .Link-sc-wxg1ap-1{display:block;color:#fff;text-transform:uppercase;-webkit-letter-spacing:0.1em;-moz-letter-spacing:0.1em;-ms-letter-spacing:0.1em;letter-spacing:0.1em;font-family:"Montserrat",sans-serif;font-weight:400;font-size:0.8rem;line-height:1.91667;}/*!sc*/ @media (min-width:60em){.dhrXd .Link-sc-wxg1ap-1{font-size:0.8rem;padding:0;}}/*!sc*/ .dhrXd .Link-sc-wxg1ap-1:hover,.dhrXd.selected .Link-sc-wxg1ap-1{-webkit-text-decoration:none;text-decoration:none;background:rgba(225,225,225,0.1);}/*!sc*/ @media (min-width:60em){.dhrXd .Link-sc-wxg1ap-1:hover,.dhrXd.selected .Link-sc-wxg1ap-1{opacity:1;-webkit-text-decoration:none;text-decoration:none;background:0;opacity:0.5;}}/*!sc*/ data-styled.g11[id="Header__NavigationLinks-sc-cmpqbx-4"]{content:"dhrXd,"}/*!sc*/ .lmfKIr{padding:6em 2em 8em;text-align:center;}/*!sc*/ @media (min-width:60em){.lmfKIr{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFsKCTwhRU5USVRZIG5zX2V4dGVuZCAiaHR0cDovL25zLmFkb2JlLmNvbS9FeHRlbnNpYmlsaXR5LzEuMC8iPgoJPCFFTlRJVFkgbnNfYWkgImh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVJbGx1c3RyYXRvci8xMC4wLyI+Cgk8IUVOVElUWSBuc19ncmFwaHMgImh0dHA6Ly9ucy5hZG9iZS5jb20vR3JhcGhzLzEuMC8iPgoJPCFFTlRJVFkgbnNfdmFycyAiaHR0cDovL25zLmFkb2JlLmNvbS9WYXJpYWJsZXMvMS4wLyI+Cgk8IUVOVElUWSBuc19pbXJlcCAiaHR0cDovL25zLmFkb2JlLmNvbS9JbWFnZVJlcGxhY2VtZW50LzEuMC8iPgoJPCFFTlRJVFkgbnNfc2Z3ICJodHRwOi8vbnMuYWRvYmUuY29tL1NhdmVGb3JXZWIvMS4wLyI+Cgk8IUVOVElUWSBuc19jdXN0b20gImh0dHA6Ly9ucy5hZG9iZS5jb20vR2VuZXJpY0N1c3RvbU5hbWVzcGFjZS8xLjAvIj4KCTwhRU5USVRZIG5zX2Fkb2JlX3hwYXRoICJodHRwOi8vbnMuYWRvYmUuY29tL1hQYXRoLzEuMC8iPgpdPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM6eD0iJm5zX2V4dGVuZDsiIHhtbG5zOmk9IiZuc19haTsiIHhtbG5zOmdyYXBoPSImbnNfZ3JhcGhzOyIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE4MThweCIgaGVpZ2h0PSI3MDNweCIKCSB2aWV3Qm94PSIwIDAgMTgxOCA3MDMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE4MTggNzAzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQoJLnN0MXtmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOiNGNkY2RjY7fQo8L3N0eWxlPgo8bWV0YWRhdGE+Cgk8c2Z3ICB4bWxucz0iJm5zX3NmdzsiPgoJCTxzbGljZXM+PC9zbGljZXM+CgkJPHNsaWNlU291cmNlQm91bmRzICBib3R0b21MZWZ0T3JpZ2luPSJ0cnVlIiBoZWlnaHQ9IjcwMyIgd2lkdGg9IjE4MTgiIHg9IjUiIHk9IjI5OSI+PC9zbGljZVNvdXJjZUJvdW5kcz4KCTwvc2Z3Pgo8L21ldGFkYXRhPgo8ZyBpZD0iUmVjdGFuZ2xlXzE5XzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTkiPgoJCTxnPgoJCQk8cmVjdCB4PSI1OTEiIHk9IjMwOCIgY2xhc3M9InN0MSIgd2lkdGg9IjExOCIgaGVpZ2h0PSI2NiIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfOF8xXyIgY2xhc3M9InN0MCI+Cgk8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfOCI+CgkJPGc+CgkJCTxyZWN0IHg9IjExNzQiIHk9IjI2MiIgY2xhc3M9InN0MSIgd2lkdGg9IjQ0IiBoZWlnaHQ9Ijc5Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8xXyIgY2xhc3M9InN0MCI+Cgk8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHkiPgoJCTxnPgoJCQk8cmVjdCB4PSI0ODciIHk9IjUyMiIgY2xhc3M9InN0MSIgd2lkdGg9IjI4MCIgaGVpZ2h0PSIxNTgiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzEzXzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8xMyI+CgkJPGc+CgkJCTxyZWN0IHg9IjE0NSIgeT0iNDI0IiBjbGFzcz0ic3QxIiB3aWR0aD0iNzAiIGhlaWdodD0iNDAiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzE5XzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8xOSI+CgkJPGc+CgkJCTxyZWN0IHg9IjE2MzciIGNsYXNzPSJzdDEiIHdpZHRoPSI3MCIgaGVpZ2h0PSI0MCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfMTBfMV8iIGNsYXNzPSJzdDAiPgoJPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzEwIj4KCQk8Zz4KCQkJPHJlY3QgeD0iMTUyNSIgeT0iMTE2IiBjbGFzcz0ic3QxIiB3aWR0aD0iNTYiIGhlaWdodD0iMzIiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzE3XzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8xNyI+CgkJPGc+CgkJCTxyZWN0IHg9IjEwNTEiIHk9IjU4MiIgY2xhc3M9InN0MSIgd2lkdGg9IjMyIiBoZWlnaHQ9IjU2Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8yXzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8yIj4KCQk8Zz4KCQkJPHJlY3QgeD0iODQ3IiB5PSI0NTciIGNsYXNzPSJzdDEiIHdpZHRoPSI1OSIgaGVpZ2h0PSIxMDQiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzE1XzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8xNSI+CgkJPGc+CgkJCTxyZWN0IHg9IjE2MDMiIHk9IjI0OSIgY2xhc3M9InN0MSIgd2lkdGg9IjU5IiBoZWlnaHQ9IjEwNCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfMTZfMV8iIGNsYXNzPSJzdDAiPgoJPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzE2Ij4KCQk8Zz4KCQkJPHJlY3QgeD0iNDUiIHk9IjU2MCIgY2xhc3M9InN0MSIgd2lkdGg9IjE1MCIgaGVpZ2h0PSIxMDQiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzIxXzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8yMSI+CgkJPGc+CgkJCTxyZWN0IHk9IjI5OCIgY2xhc3M9InN0MSIgd2lkdGg9IjEwNCIgaGVpZ2h0PSIxNTAiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzdfMV8iIGNsYXNzPSJzdDAiPgoJPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzciPgoJCTxnPgoJCQk8cmVjdCB4PSIyMDEiIHk9IjI1NiIgY2xhc3M9InN0MSIgd2lkdGg9IjE4NiIgaGVpZ2h0PSIxMDUiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzNfMV8iIGNsYXNzPSJzdDAiPgoJPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzMiPgoJCTxnPgoJCQk8cmVjdCB4PSI0NTAiIHk9IjQwOCIgY2xhc3M9InN0MSIgd2lkdGg9IjExMiIgaGVpZ2h0PSI2MyIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfNl8xXyIgY2xhc3M9InN0MCI+Cgk8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfNiI+CgkJPGc+CgkJCTxyZWN0IHg9IjEyOTQiIHk9IjE4OCIgY2xhc3M9InN0MSIgd2lkdGg9IjE4NiIgaGVpZ2h0PSIxMDUiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzRfN18iIGNsYXNzPSJzdDAiPgoJPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzQiPgoJCTxnPgoJCQk8cmVjdCB4PSI0NTUiIHk9IjI1MyIgY2xhc3M9InN0MSIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjI1Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8xNF8xXyIgY2xhc3M9InN0MCI+Cgk8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfMTQiPgoJCTxnPgoJCQk8cmVjdCB4PSIxNDIzIiB5PSIzNDEiIGNsYXNzPSJzdDEiIHdpZHRoPSI0NCIgaGVpZ2h0PSIyNSIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfMThfMV8iIGNsYXNzPSJzdDAiPgoJPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzE4Ij4KCQk8Zz4KCQkJPHJlY3QgeD0iMTU5IiB5PSI0MSIgY2xhc3M9InN0MSIgd2lkdGg9IjQ0IiBoZWlnaHQ9IjI1Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV85XzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV85Ij4KCQk8Zz4KCQkJPHJlY3QgeD0iMzA5IiB5PSI0MDQiIGNsYXNzPSJzdDEiIHdpZHRoPSI3NiIgaGVpZ2h0PSIxMzQiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzRfNl8iIGNsYXNzPSJzdDAiPgoJPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzRfMV8iPgoJCTxnPgoJCQk8cmVjdCB4PSI5OTYiIHk9IjM2NiIgY2xhc3M9InN0MSIgd2lkdGg9IjEwNiIgaGVpZ2h0PSI2MCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfNV8xXyIgY2xhc3M9InN0MCI+Cgk8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfNSI+CgkJPGc+CgkJCTxyZWN0IHg9IjM0MyIgeT0iMTI0IiBjbGFzcz0ic3QxIiB3aWR0aD0iNzMiIGhlaWdodD0iNDEiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzIyXzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8yMiI+CgkJPGc+CgkJCTxyZWN0IHg9IjE3NDUiIHk9IjE2NyIgY2xhc3M9InN0MSIgd2lkdGg9IjczIiBoZWlnaHQ9IjQxIi8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV80XzVfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV80XzJfIj4KCQk8Zz4KCQkJPHJlY3QgeD0iMTQxNyIgeT0iNTg1IiBjbGFzcz0ic3QxIiB3aWR0aD0iMTg2IiBoZWlnaHQ9IjEwNSIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfMTFfMV8iIGNsYXNzPSJzdDAiPgoJPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzExIj4KCQk8Zz4KCQkJPHJlY3QgeD0iOTYiIHk9IjE4OCIgY2xhc3M9InN0MSIgd2lkdGg9IjYyIiBoZWlnaHQ9IjM1Ii8+CgkJPC9nPgoJPC9nPgo8L2c+CjxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8yMF8xXyIgY2xhc3M9InN0MCI+Cgk8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfMjAiPgoJCTxnPgoJCQk8cmVjdCB4PSIxMzg2IiB5PSI0MjYiIGNsYXNzPSJzdDEiIHdpZHRoPSI0OCIgaGVpZ2h0PSI4NSIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfNF80XyIgY2xhc3M9InN0MCI+Cgk8ZyBpZD0iUmVjdGFuZ2xlXzE5X2NvcHlfNF8zXyI+CgkJPGc+CgkJCTxyZWN0IHg9IjExNzciIHk9IjQ0MCIgY2xhc3M9InN0MSIgd2lkdGg9IjE0OCIgaGVpZ2h0PSIyNjMiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGcgaWQ9IlJlY3RhbmdsZV8xOV9jb3B5XzEyXzFfIiBjbGFzcz0ic3QwIj4KCTxnIGlkPSJSZWN0YW5nbGVfMTlfY29weV8xMiI+CgkJPGc+CgkJCTxyZWN0IHg9IjE1MzQiIHk9IjQwNiIgY2xhc3M9InN0MSIgd2lkdGg9IjI3MyIgaGVpZ2h0PSIxNTQiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==);height:50em;}}/*!sc*/ data-styled.g12[id="Footer__Wrapper-sc-1ww42aw-0"]{content:"lmfKIr,"}/*!sc*/ .ifAuit{margin-bottom:2.4em;}/*!sc*/ data-styled.g13[id="Footer__VideoJsLogoWrapper-sc-1ww42aw-1"]{content:"ifAuit,"}/*!sc*/ .bIwkhf{color:#000;font-size:14px;font-weight:bold;line-height:1.85;-webkit-letter-spacing:0.075em;-moz-letter-spacing:0.075em;-ms-letter-spacing:0.075em;letter-spacing:0.075em;list-style-type:none;padding:0;margin:0 0 1.5em 0;text-transform:uppercase;display:none;}/*!sc*/ @media (min-width:60em){.bIwkhf{display:block;}}/*!sc*/ data-styled.g14[id="Footer__Nav-sc-1ww42aw-2"]{content:"bIwkhf,"}/*!sc*/ .brqRjf{display:inline-block;}/*!sc*/ .brqRjf:not(:last-child){margin-right:2em;}/*!sc*/ .brqRjf a{color:inherit;}/*!sc*/ data-styled.g15[id="Footer__NavItem-sc-1ww42aw-3"]{content:"brqRjf,"}/*!sc*/ .eNndFa{color:#010101;font-size:13px;font-weight:300;line-height:1.85;-webkit-letter-spacing:-0.01em;-moz-letter-spacing:-0.01em;-ms-letter-spacing:-0.01em;letter-spacing:-0.01em;margin-bottom:3em;}/*!sc*/ data-styled.g16[id="Footer__Copyright-sc-1ww42aw-4"]{content:"eNndFa,"}/*!sc*/ .dxelYt a:not(:last-child){margin-right:1.2em;}/*!sc*/ data-styled.g17[id="Footer__Logos-sc-1ww42aw-5"]{content:"dxelYt,"}/*!sc*/ @font-face{font-family:'OCR A Extended';font-style:normal;font-weight:normal;src:local('OCR A Extended'),url(/static/OCRAEXT-7ca3e83e5219863bb514fea8dfbc562f.woff) format('woff');}/*!sc*/ @-webkit-keyframes rotate{100%{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}}/*!sc*/ @keyframes rotate{100%{-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}}/*!sc*/ html{font-family:sans-serif;font-size:100%;font-weight:400;line-height:1.5333333333333334;color:#000;background-color:#fff;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;}/*!sc*/ html,body{height:100%;}/*!sc*/ body{font-family:"Montserrat",sans-serif;}/*!sc*/ *{box-sizing:border-box;}/*!sc*/ h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dd,ol,ul,form,fieldset,legend,table,th,td,caption,hr{margin:0;padding:0;}/*!sc*/ abbr[title],dfn[title]{cursor:help;}/*!sc*/ a,u,ins{-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ u{-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ ins{border-bottom:1px solid;}/*!sc*/ object,img{font-style:italic;vertical-align:middle;max-width:100%;}/*!sc*/ label,input,textarea,button,select,option{cursor:pointer;}/*!sc*/ .text-input:active,.text-input:focus,textarea:active,textarea:focus{cursor:text;outline:none;}/*!sc*/ ::-moz-selection{background-color:#b4d5ff;color:#000;}/*!sc*/ ::selection{background-color:#b4d5ff;color:#000;}/*!sc*/ .hidden{display:none;}/*!sc*/ data-styled.g18[id="sc-global-gTOjnG1"]{content:"sc-global-gTOjnG1,"}/*!sc*/ .iZOxif{font-family:'Montserrat',sans-serif;font-weight:100;}/*!sc*/ data-styled.g20[id="Typography__H2-sc-wed2po-1"]{content:"iZOxif,"}/*!sc*/ .fZgrKU{text-align:center;background-color:#4276b9;color:#fff;}/*!sc*/ @media (min-width:60em){.fZgrKU{background-image:url(/static/sea-hero-b7d4a47c37f8c816e69a55e22d932ea1.svg);background-repeat:no-repeat;background-position:center top;}}/*!sc*/ .fZgrKU .Typography__H2-sc-wed2po-1{font-size:34px;line-height:1em;font-weight:500;text-align:center;padding:0 .25em;}/*!sc*/ @media (min-width:47.5em){.fZgrKU .Typography__H2-sc-wed2po-1{font-size:56px;}}/*!sc*/ @media (min-width:60em){.fZgrKU .Typography__H2-sc-wed2po-1{font-size:56px;}}/*!sc*/ .fZgrKU .Typography__H2-sc-wed2po-1 span{display:block;font-size:20px;line-height:1.4em;font-weight:100;margin-top:0.75em;margin-bottom:0.8em;text-align:center;}/*!sc*/ @media (min-width:37.5em){.fZgrKU .Typography__H2-sc-wed2po-1 span{font-size:22px;margin-bottom:1.2em;line-height:1.4em;}}/*!sc*/ @media (min-width:68.75em){.fZgrKU .Typography__H2-sc-wed2po-1 span{margin-bottom:2.4em;}}/*!sc*/ .fZgrKU .Container-sc-15w3q0z-0{padding-top:6em;}/*!sc*/ @media (min-width:60em){.fZgrKU .Container-sc-15w3q0z-0{padding-top:8em;}}/*!sc*/ @media (min-width:87.5em){.fZgrKU .Container-sc-15w3q0z-0{padding-top:10em;padding-bottom:17em;}}/*!sc*/ data-styled.g23[id="Hero-sc-1909lcx-0"]{content:"fZgrKU,"}/*!sc*/ .jXBMNM .Container-sc-15w3q0z-0{padding-bottom:4em;}/*!sc*/ @media (min-width:68.75em){.jXBMNM .Container-sc-15w3q0z-0{padding-bottom:6em;}}/*!sc*/ @media (min-width:87.5em){.jXBMNM{background-position:center -625px;}.jXBMNM .Container-sc-15w3q0z-0{padding-top:10em;padding-bottom:10em;}}/*!sc*/ data-styled.g24[id="BlogHero__StyledHero-sc-1mq1dwo-0"]{content:"jXBMNM,"}/*!sc*/ .eZTZWj{font-size:34px;line-height:1em;font-weight:500;}/*!sc*/ @media (min-width:47.5em){.eZTZWj{font-size:56px;padding:0;}}/*!sc*/ @media (min-width:60em){.eZTZWj{font-size:56px;padding:0;}}/*!sc*/ data-styled.g25[id="BlogHero__StyledH2-sc-1mq1dwo-1"]{content:"eZTZWj,"}/*!sc*/ .gJurmY{border:2px solid #ebebeb;margin-bottom:3.3em;}/*!sc*/ data-styled.g26[id="BlogSidebarBlock__Wrapper-sc-jnb1j7-0"]{content:"gJurmY,"}/*!sc*/ .hdATpU{background-color:#f9f9f9;border-bottom:2px solid #ebebeb;display:block;color:rgba(0,0,0,0.3);font-size:16px;padding:1em 0;text-align:center;text-transform:uppercase;}/*!sc*/ data-styled.g27[id="BlogSidebarBlock__Heading-sc-jnb1j7-1"]{content:"hdATpU,"}/*!sc*/ .hgkMgI{color:rgba(0,0,0,0.6);font-weight:300;line-height:1.88;padding:2em;}/*!sc*/ .hgkMgI a{display:block;color:inherit;-webkit-text-decoration:underline;text-decoration:underline;}/*!sc*/ .hgkMgI a:not(:last-child){margin-bottom:1em;}/*!sc*/ data-styled.g28[id="BlogSidebarBlock__Links-sc-jnb1j7-2"]{content:"hgkMgI,"}/*!sc*/ .hXNsOC{margin-top:2em;}/*!sc*/ @media (min-width:60em){.hXNsOC{margin:7em 0 0 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}}/*!sc*/ data-styled.g29[id="BlogLayout__StyledContainer-sc-ghaq9i-0"]{content:"hXNsOC,"}/*!sc*/ .ctjJCT{margin:0 2em;}/*!sc*/ @media (min-width:60em){.ctjJCT{padding-right:3em;margin:0;width:74%;}}/*!sc*/ data-styled.g30[id="BlogLayout__PostWrapper-sc-ghaq9i-1"]{content:"ctjJCT,"}/*!sc*/ .dXCjXX{display:none;}/*!sc*/ @media (min-width:60em){.dXCjXX{display:block;width:19%;}}/*!sc*/ data-styled.g31[id="BlogLayout__Sidebar-sc-ghaq9i-2"]{content:"dXCjXX,"}/*!sc*/ .jWmtLN{visibility:hidden;}/*!sc*/ data-styled.g32[id="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0"]{content:"jWmtLN,"}/*!sc*/ .kFcqlD{float:left;margin-left:-20px;color:inherit;-webkit-text-decoration:none;text-decoration:none;}/*!sc*/ .kFcqlD:active,.kFcqlD:focus{outline:none;}/*!sc*/ data-styled.g33[id="WithMdxComponents__StyledLink-sc-15bb0ke-1"]{content:"kFcqlD,"}/*!sc*/ .gCpiSR:hover .WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0{visibility:visible;}/*!sc*/ data-styled.g34[id="WithMdxComponents__StyledHeader-sc-15bb0ke-2"]{content:"gCpiSR,"}/*!sc*/ .jGYMEc{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:6em;width:100%;}/*!sc*/ data-styled.g35[id="BlogPost__Wrapper-sc-116uwsw-0"]{content:"jGYMEc,"}/*!sc*/ .VObrg{display:none;}/*!sc*/ @media (min-width:60em){.VObrg{display:block;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;margin-right:1.25em;}}/*!sc*/ data-styled.g36[id="BlogPost__AvatarCol-sc-116uwsw-1"]{content:"VObrg,"}/*!sc*/ .dbpuaS{border-radius:50%;display:block;width:3.125em;height:3.125em;min-width:3.125em;min-height:3.125em;}/*!sc*/ data-styled.g37[id="BlogPost__Avatar-sc-116uwsw-2"]{content:"dbpuaS,"}/*!sc*/ .eilTsm{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;}/*!sc*/ @media (min-width:60em){.eilTsm{max-width:calc(100% - 4.375em);}}/*!sc*/ data-styled.g38[id="BlogPost__TextCol-sc-116uwsw-3"]{content:"eilTsm,"}/*!sc*/ .iAkloW{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#424242;font-size:18px;font-weight:300;height:2.78em;margin-bottom:1.5em;}/*!sc*/ .iAkloW .Link-sc-wxg1ap-1{display:block;}/*!sc*/ @media (min-width:60em){.iAkloW .Link-sc-wxg1ap-1{display:none;}}/*!sc*/ data-styled.g39[id="BlogPost__Meta-sc-116uwsw-4"]{content:"iAkloW,"}/*!sc*/ .eddbxE h1{font-size:32px;}/*!sc*/ .eddbxE h2{font-size:28px;}/*!sc*/ .eddbxE h3{font-size:24px;}/*!sc*/ .eddbxE h4{font-size:20px;}/*!sc*/ .eddbxE h5,.eddbxE h6{font-size:18px;}/*!sc*/ .eddbxE h1,.eddbxE h2,.eddbxE h3,.eddbxE h4,.eddbxE h5,.eddbxE h6{margin-bottom:1em;}/*!sc*/ .eddbxE p,.eddbxE ul{color:#424242;font-size:18px;font-weight:300;line-height:1.78;margin-bottom:2em;}/*!sc*/ .eddbxE ul,.eddbxE ol{margin-left:1em;}/*!sc*/ .eddbxE blockquote{border-left:0.25em solid #dfe2e5;padding:0 1em;}/*!sc*/ .eddbxE .gatsby-highlight{margin-bottom:2.25em;}/*!sc*/ .eddbxE .note{background-color:#f9f9f9;padding:1em;margin-bottom:2em;}/*!sc*/ .eddbxE .note :last-child{margin-bottom:0;}/*!sc*/ .eddbxE table{margin-bottom:2em;}/*!sc*/ .eddbxE th,.eddbxE td{padding:1em;border:2px solid #ebebeb;}/*!sc*/ .eddbxE th{background-color:#f9f9f9;color:rgba(0,0,0,0.3);text-align:center;text-transform:uppercase;}/*!sc*/ .eddbxE .VideoWrapper-sc-1eb1q73-0{margin-bottom:3em;}/*!sc*/ data-styled.g40[id="BlogPost__Article-sc-116uwsw-5"]{content:"eddbxE,"}/*!sc*/ .jLmtDO{color:#000;}/*!sc*/ data-styled.g41[id="BlogPost__TitleLink-sc-116uwsw-6"]{content:"jLmtDO,"}/*!sc*/ .hiIPQs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:3em;}/*!sc*/ @media (min-width:60em){.hiIPQs{padding-left:4.375em;}}/*!sc*/ data-styled.g42[id="BlogPagination__BlogPaginationWrapper-sc-ncbmfd-0"]{content:"hiIPQs,"}/*!sc*/ .eXfgBI{background-color:#fff;border:0.1429em solid #000;color:#000;font-size:14px;font-weight:bold;-webkit-letter-spacing:0.1em;-moz-letter-spacing:0.1em;-ms-letter-spacing:0.1em;letter-spacing:0.1em;line-height:1;text-align:center;text-transform:uppercase;padding:1em;width:12.8571em;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:space-evenly;-webkit-justify-content:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}/*!sc*/ .eXfgBI:disabled{color:rgba(0,0,0,0.3);border-color:#ebebeb;}/*!sc*/ data-styled.g43[id="BlogPagination__StyledBlogPaginationButton-sc-ncbmfd-1"]{content:"eXfgBI,"}/*!sc*/ .epwwEo{font-size:2em;line-height:1;}/*!sc*/ data-styled.g44[id="BlogPagination__Arrow-sc-ncbmfd-2"]{content:"epwwEo,"}/*!sc*/ @media (min-width:60em){.iluZIc{display:none;}}/*!sc*/ data-styled.g45[id="BlogListTemplate__BottomPanels-sc-vbmrc-0"]{content:"iluZIc,"}/*!sc*/ </style><title data-react-helmet="true">Video.js Blog | Video.js</title><link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico"/><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600"/><style>.gatsby-image-wrapper{position:relative;overflow:hidden}.gatsby-image-wrapper picture.object-fit-polyfill{position:static!important}.gatsby-image-wrapper img{bottom:0;height:100%;left:0;margin:0;max-width:none;padding:0;position:absolute;right:0;top:0;width:100%;object-fit:cover}.gatsby-image-wrapper [data-main-image]{opacity:0;transform:translateZ(0);transition:opacity .25s linear;will-change:opacity}.gatsby-image-wrapper-constrained{display:inline-block;vertical-align:top}</style><noscript><style>.gatsby-image-wrapper noscript [data-main-image]{opacity:1!important}.gatsby-image-wrapper [data-placeholder-image]{opacity:0!important}</style></noscript><script type="module">const e="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;e&&document.body.addEventListener("load",(function(e){const t=e.target;if(void 0===t.dataset.mainImage)return;if(void 0===t.dataset.gatsbyImageSsr)return;let a=null,n=t;for(;null===a&&n;)void 0!==n.parentNode.dataset.gatsbyImageWrapper&&(a=n.parentNode),n=n.parentNode;const o=a.querySelector("[data-placeholder-image]"),r=new Image;r.src=t.currentSrc,r.decode().catch((()=>{})).then((()=>{t.style.opacity=1,o&&(o.style.opacity=0,o.style.transition="opacity 500ms linear")}))}),!0);</script><link rel="icon" href="/favicon-32x32.png?v=bf2966ea120471050e8e6b81b05d8cc8" type="image/png"/><link rel="manifest" href="/manifest.webmanifest" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=bf2966ea120471050e8e6b81b05d8cc8"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=bf2966ea120471050e8e6b81b05d8cc8"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=bf2966ea120471050e8e6b81b05d8cc8"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=bf2966ea120471050e8e6b81b05d8cc8"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=bf2966ea120471050e8e6b81b05d8cc8"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=bf2966ea120471050e8e6b81b05d8cc8"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=bf2966ea120471050e8e6b81b05d8cc8"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=bf2966ea120471050e8e6b81b05d8cc8"/><link rel="preconnect" href="https://www.google-analytics.com"/><link rel="dns-prefetch" href="https://www.google-analytics.com"/></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><header class="Header__HeaderWrapper-sc-cmpqbx-1 ikfDkm"><div class="Container-sc-15w3q0z-0 dzvRdP"><div class="Header__Logo-sc-cmpqbx-0 bZKoAk"><h1>Videojs.com</h1><a aria-label="Videojs.com homepage" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/"></a></div><nav role="navigation" class="Header__DesktopMenu-sc-cmpqbx-3 ducoje"><ul class="Header__NavigationLinks-sc-cmpqbx-4 dhrXd"><li><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/getting-started">Get Started</a></li><li><a href="/guides" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Guides</a></li><li><a href="https://docs.videojs.com" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">API Docs</a></li><li><a aria-current="page" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog">Blog</a></li><li><a href="https://github.com/videojs/video.js" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Github</a></li></ul></nav><div class="Header__MobileMenu-sc-cmpqbx-2 eAITWh"><div><div class="bm-overlay" style="position:fixed;z-index:1000;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);opacity:0;-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);transition:opacity 0.3s, transform 0s 0.3s"></div><div id="" class="bm-menu-wrap" style="position:fixed;right:0;z-index:1100;width:300px;height:100%;-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);transition:all 0.5s"><div class="bm-menu" style="height:100%;box-sizing:border-box;overflow:auto"><nav class="bm-item-list" style="height:100%"><ul class="Header__NavigationLinks-sc-cmpqbx-4 dhrXd bm-item"><li><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/getting-started">Get Started</a></li><li><a href="/guides" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Guides</a></li><li><a href="https://docs.videojs.com" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">API Docs</a></li><li><a aria-current="page" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog">Blog</a></li><li><a href="https://github.com/videojs/video.js" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Github</a></li></ul></nav></div><div><div class="bm-cross-button" style="position:absolute;width:24px;height:24px;right:8px;top:8px"><span style="position:absolute;top:6px;right:14px"><span class="bm-cross" style="position:absolute;width:3px;height:14px;transform:rotate(45deg)"></span><span class="bm-cross" style="position:absolute;width:3px;height:14px;transform:rotate(-45deg)"></span></span><button style="position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:none;font-size:0;background:transparent;cursor:pointer" tabindex="-1">Close Menu</button></div></div></div><div><div class="bm-burger-button" style="z-index:1000"><span><span class="bm-burger-bars" style="position:absolute;height:20%;left:0;right:0;top:0%;opacity:1"></span><span class="bm-burger-bars" style="position:absolute;height:20%;left:0;right:0;top:40%;opacity:1"></span><span class="bm-burger-bars" style="position:absolute;height:20%;left:0;right:0;top:80%;opacity:1"></span></span><button style="position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:none;font-size:0;background:transparent;cursor:pointer">Open Menu</button></div></div></div></div></div></header><main><section class="Hero-sc-1909lcx-0 BlogHero__StyledHero-sc-1mq1dwo-0 fZgrKU jXBMNM"><div class="Container-sc-15w3q0z-0 dzvRdP"><h2 class="Typography__H2-sc-wed2po-1 BlogHero__StyledH2-sc-1mq1dwo-1 iZOxif eZTZWj">Video.js Blog</h2></div></section><div class="Container-sc-15w3q0z-0 BlogLayout__StyledContainer-sc-ghaq9i-0 dzvRdP hXNsOC"><aside class="BlogLayout__Sidebar-sc-ghaq9i-2 dXCjXX"><div class="BlogSidebarBlock__Wrapper-sc-jnb1j7-0 gJurmY"><h4 class="BlogSidebarBlock__Heading-sc-jnb1j7-1 hdATpU">Tags</h4><div class="BlogSidebarBlock__Links-sc-jnb1j7-2 hgkMgI"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/608">608</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/a11y">a11y</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/bugs">bugs</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/captions">captions</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/cea-608">cea-608</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/focus-visible">focus-visible</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/http-streaming">http-streaming</a></div></div><div class="BlogSidebarBlock__Wrapper-sc-jnb1j7-0 gJurmY"><h4 class="BlogSidebarBlock__Heading-sc-jnb1j7-1 hdATpU">Recent Posts</h4><div class="BlogSidebarBlock__Links-sc-jnb1j7-2 hgkMgI"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/videojs-8-and-vhs-3/">Video.js 8 and Video.js HTTP Streaming 3</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/announcing-the-new-videojs-com/">Announcing the new Videojs.com</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/inband-captions-support-with-vhs/">In-band Captions Support with videojs-http-streaming</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/video-js-7-4/">Video.js 7.4</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/bugpost-disconnects-and-reconnects/">Bugpost: Disconnects and Reconnects</a></div></div></aside><div class="BlogLayout__PostWrapper-sc-ghaq9i-1 ctjJCT"><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/misteroneill" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/misteroneill.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/misteroneill" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/misteroneill.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Pat O'Neill</span><span>2022-08-22</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/videojs-8-and-vhs-3/"><h1>Video.js 8 and Video.js HTTP Streaming 3</h1></a><div class="note"><p><b>NOTE:</b> For details on migrating from Video.js 7.x to 8.x, please see <a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/guides/videojs-7-to-8/">our migration guide</a>!</p></div><p>We are very excited to announce that Video.js 8.0 and Video.js HTTP Streaming (VHS) 3.0 are available!</p><p>While these releases are constituted of a lot of housecleaning tasks, there are some changes of interest to users of the Video.js platform.</p><h2 id="contributors" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#contributors"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Contributors</h2><p>Before we dive into the software changes, open source doesn't work without <em>people</em>. Huge thanks to everyone who contributed pull requests to these releases!</p><ul><li><a href="https://github.com/alex-barstow" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@alex-barstow</a></li><li><a href="https://github.com/Essk" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@Essk</a></li><li><a href="https://github.com/gesinger" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@gesinger</a></li><li><a href="https://github.com/gjanblaszczyk" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@gjanblaszczyk</a></li><li><a href="https://github.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@gkatsev</a></li><li><a href="https://github.com/harisha-swaminathan" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@harisha-swaminathan</a></li><li><a href="https://github.com/hugorogz" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@hugorogz</a></li><li><a href="https://github.com/KangXinzhi" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@KangXinzhi</a></li><li><a href="https://github.com/kchang-brightcove" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@kchang-brightcove</a></li><li><a href="https://github.com/mister-ben" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@mister-ben</a></li><li><a href="https://github.com/misteroneill" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@misteroneill</a></li><li><a href="https://github.com/phloxic" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@phloxic</a></li><li><a href="https://github.com/roman-bc-dev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@roman-bc-dev</a></li></ul><h2 id="whats-changed" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#whats-changed"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What's Changed?</h2><h3 id="videojs" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#videojs"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Video.js</h3><p>The <a href="https://github.com/videojs/video.js/blob/c8fd5bbcdebacdb2e1f46ae8be02ef6c91797262/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">complete CHANGELOG is available</a>, but here are some highlights:</p><ul><li>No longer transpiled into ES5 for compatibility with older browsers like Internet Explorer</li><li>Updated to VHS 3.0</li><li>Enabled the <code class="language-text">sourceset</code> event by default, <code class="language-text">enableSourceset: false</code> can be used to turn this off.</li><li>Added new <code class="language-text">TitleBar</code> component, which is not visible in the UI by default <em>(<a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/#new-videojs-titlebar-component">see below for details</a>)</em>. As a result, we moved the <code class="language-text">BigPlayButton</code> component to the center of the player by default</li><li><code class="language-text">addClass</code> and <code class="language-text">removeClass</code> methods can now be given multiple class names</li><li>Clicking the playback rate button now opens the menu rather than changing the playback rate</li><li>Deprecated many old top-level utility methods in favor of utility methods stored on objects <em>(<a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/#new-videojs-utility-objects">see below for details</a>)</em></li><li>Invalid event types will now throw errors instead of log warnings</li><li>Change <code class="language-text">addRemoteTextTrack</code>'s <code class="language-text">manualCleanup</code> option to default to <code class="language-text">false</code></li><li>Removed the <code class="language-text">videojs.extend()</code> function</li><li>Removed the <code class="language-text">firstplay</code> event</li><li>Removed the <code class="language-text">retryOnError</code> option and made this behavior the default</li><li>Removed the ability to set <code class="language-text">aria-*</code>, <code class="language-text">role</code>, and <code class="language-text">type</code> attributes via the <code class="language-text">props</code> argument of <code class="language-text">createEl</code> methods</li><li>Removed remaining references and logic related to Flash and SWF</li><li>Remove fallbacks for missing flexbox support</li><li>Removed IE-specific code</li></ul><p>Overall, the minfied and gzipped size of Video.js is <strong>reduced by around 3%</strong>. We will continue to look for ways to optimize the size of Video.js.</p><h3 id="vhs" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#vhs"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>VHS</h3><p>The <a href="https://github.com/videojs/http-streaming/blob/afb1ff700e490d131df4aea66d746cf72794caae/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">complete CHANGELOG is available</a>, but here are some highlights:</p><ul><li>No longer transpiled into ES5 for compatibility with older browsers like Internet Explorer.</li><li>Naming changes for more inclusive language (e.g. "master" becomes "main", "blacklist" becomes "exclude", "whitelist" becomes "include").</li><li>Skip detected gaps immediately instead of waiting the duration of the gap before skipping.</li><li>Removed the deprecated <code class="language-text">smoothQualityChange</code> method.</li><li>Improved behavior when encountering <code class="language-text">output-restricted</code> event handling.</li><li>Cleaned up parameters of <code class="language-text">excludePlaylist</code>.</li></ul><p>Overall, the minfied and gzipped size of VHS is <strong>reduced by around 4%</strong>. We will continue to look for ways to optimize the size of VHS.</p><h3 id="browserdevice-support" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#browserdevice-support"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Browser/Device Support</h3><p>With these releases, our new browser/device targets are generally focused on the last 3 major versions of so-called "evergreen" browsers:</p><ul><li>Chrome</li><li>Firefox</li><li>Safari</li><li>Edge (Chromium, not Legacy)</li></ul><p>However, with Video.js being used in more contexts than just desktop and mobile web, like Smart TVs or OTT devices, we have an additional minimum support threshold for <em>Chromium-based browsers version 53 and newer</em>. This grants support for:</p><ul><li><a href="https://webostv.developer.lge.com/develop/specifications/web-engine/" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">webOS TV</a> 4.x and newer</li><li><a href="https://developer.samsung.com/smarttv/develop/specifications/web-engine-specifications.html" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Tizen</a> 2018 models and newer</li></ul><h2 id="new-videojs-titlebar-component" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#new-videojs-titlebar-component"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>New Video.js <code class="language-text">TitleBar</code> Component</h2><p>The new <code class="language-text">TitleBar</code> component will show a UI element across the top of the player which displays the title and/or description of the current media in the player. The <code class="language-text">TitleBar</code> will not show if no title or description is provided.</p><h3 id="using-loadmedia-to-populate-the-titlebar" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#using-loadmedia-to-populate-the-titlebar"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Using <code class="language-text">loadMedia</code> to Populate the <code class="language-text">TitleBar</code></h3><p>The easiest way to provide a title and/or description is to use your player's <code class="language-text">loadMedia</code> method:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">player<span class="token punctuation">.</span><span class="token function">loadMedia</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">artist</span><span class="token operator">:</span> <span class="token string">'Disney'</span><span class="token punctuation">,</span> <span class="token literal-property property">album</span><span class="token operator">:</span> <span class="token string">'Oceans'</span><span class="token punctuation">,</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Oceans'</span><span class="token punctuation">,</span> <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'Journey in to the depths ... and race with dolphins at play.'</span><span class="token punctuation">,</span> <span class="token literal-property property">poster</span><span class="token operator">:</span> <span class="token string">'https://vjs.zencdn.net/v/oceans.png'</span><span class="token punctuation">,</span> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'https://vjs.zencdn.net/v/oceans.mp4'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'video/mp4'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'https://vjs.zencdn.net/v/oceans.webm'</span><span class="token punctuation">,</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'video/webm'</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p>If you're not familiar with the <code class="language-text">loadMedia</code> method, it's a way to provide additional metadata for your media beyond what is available through the <code class="language-text">src</code> method alone. As you see in the above example, the <code class="language-text">title</code> and <code class="language-text">description</code> are provided and will be used to populate the title bar.</p><h3 id="populating-the-titlebar-directly" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#populating-the-titlebar-directly"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Populating the <code class="language-text">TitleBar</code> Directly</h3><p>The <code class="language-text">TitleBar</code> can also be populated through direct input using the component's <code class="language-text">update</code> method:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">player<span class="token punctuation">.</span>titleBar<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Oceans'</span><span class="token punctuation">,</span> <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">'Journey in to the depths ... and race with dolphins at play.'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><p>The title and/or description can be removed by passing an empty string for one or both of these values:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">player<span class="token punctuation">.</span>titleBar<span class="token punctuation">.</span><span class="token function">update</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token literal-property property">description</span><span class="token operator">:</span> <span class="token string">''</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><p>If both are removed, the <code class="language-text">TitleBar</code> will no longer be visible.</p><h2 id="new-videojs-utility-objects" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#new-videojs-utility-objects"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>New Video.js Utility Objects</h2><p>Over time, the <code class="language-text">videojs</code> namespace has become cluttered with a wide variety of utility functions. One of the changes we are introducing is a more deliberately designed interface for these utility functions.</p><p>The guiding principle here was that if a function didn't feel like a core part of the library, but was still potentially useful to plugins and other integrations, we exposed it as part of a utility object instead of a top-level function.</p><p>These are the utility objects attached to <code class="language-text">videojs</code> in 8.0.0:</p><table><thead><tr><th>Object</th><th>Description</th></tr></thead><tbody><tr><td><code class="language-text">videojs.browser</code></td><td>Various user-agent detection values (available previously)</td></tr><tr><td><code class="language-text">videojs.dom</code></td><td>DOM functions (available previously)</td></tr><tr><td><code class="language-text">videojs.fn</code></td><td>Function... functions</td></tr><tr><td><code class="language-text">videojs.num</code></td><td>Number functions</td></tr><tr><td><code class="language-text">videojs.obj</code></td><td>Object functions</td></tr><tr><td><code class="language-text">videojs.str</code></td><td>String functions</td></tr><tr><td><code class="language-text">videojs.time</code></td><td>Time-related functions</td></tr><tr><td><code class="language-text">videojs.url</code></td><td>URL-related functions</td></tr></tbody></table><div class="note"><p><b>NOTE:</b> For details on migrating from Video.js 7.x to 8.x, please see <a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/guides/videojs-7-to-8/">our migration guide</a>!</p></div><h2 id="conclusion" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/videojs-8-and-vhs-3/#conclusion"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Conclusion</h2><p>Thanks again to all our contributors and to the large community of developers who support Video.js by using it every day!</p><p>If you'd like to contribute to Video.js, the place to start is our <a href="https://github.com/videojs/video.js/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">CONTRIBUTING</a> guide on GitHub.</p><p><em>Be well and build great things!</em></p></div></div></article><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/mmcc" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/mmcc.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/mmcc" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/mmcc.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Matthew McClure</span><span>2019-09-13</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/announcing-the-new-videojs-com/"><h1>Announcing the new Videojs.com</h1></a><p>If you visit the Video.js website today, you'll (hopefully) notice it looks a little different. You may also notice that you're reading this on the root domain instead of blog.videojs.com. If you've noticed either/both those things then this is redundant, but today I'm incredibly excited to announce a new website for the Video.js project(s).</p><p>The plan was for this website to take a month to build and ship and we're going on...well more than that, but we think it's worth it. Not just because I'm the one responsible for the ~6 years we've spent with the previous website, but because the new design shifts the focus to what we think is so important about Video.js: you, the builders, using Video.js to create.</p><h2 id="videojs-in-2019" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/announcing-the-new-videojs-com/#videojs-in-2019"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Video.js in 2019</h2><p>When <a href="https://twitter.com/heff" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Heff</a> first created Video.js back in 2010, the reasons for needing and using a video player were different than they are today. I asked him, “What was the biggest motivation for using a player in 2010, and why did you make Video.js?”</p><blockquote><p>Well, interestingly, it wasn't because Flash was dead. That wouldn't happen for years. And it wasn't to support iPhones, because you couldn't build video controls there yet. It was simply to use native web technologies to build video rather than a third-party plugin. It was fun.</p><p>I don't know if that answers your question. Those other reasons would be why most people eventually used Video.js.</p></blockquote><p>For what it’s worth, my answer to why I would have used Video.js in the early 2010s would be a little different: it was a nice looking player that had a Flash fallback to support older browsers. Today, however, Flash <em>is</em> dead, and unnecessary anyway because browser support for modern codecs has gotten so much better. Sure, things have gotten a little more complicated with adaptive-bitrate streams becoming commonplace, but even then, simply playing back video in the browser has become table stakes.</p><p>That’s one of the reasons why we like to look at Video.js as a player <em>framework</em> instead of a player. Video.js is a well-tested, extensible, and extremely customizable starting point for you to create your own custom experiences for your viewers. We’ve tried to make sure you get a great player right out of the box when you start using Video.js, but, if you want, it can be the starting point for the perfect player for your application.</p><h2 id="new-themes" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/announcing-the-new-videojs-com/#new-themes"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>New Themes</h2><div class="BlogImage__Wrapper-sc-1kim4hz-0 bpHbQg"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:1225px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='876' width='1225' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#c82848;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/58542250950b9cca49c031c61f702150/ba069/collage.webp 306w,/static/58542250950b9cca49c031c61f702150/b19a2/collage.webp 613w,/static/58542250950b9cca49c031c61f702150/fcd96/collage.webp 1225w" sizes="(min-width: 1225px) 1225px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1225px) 1225px, 100vw" decoding="async" loading="lazy" data-src="/static/58542250950b9cca49c031c61f702150/6109b/collage.png" data-srcset="/static/58542250950b9cca49c031c61f702150/b2683/collage.png 306w,/static/58542250950b9cca49c031c61f702150/77eac/collage.png 613w,/static/58542250950b9cca49c031c61f702150/6109b/collage.png 1225w" alt="All four Video.js themes"/></picture><noscript><picture><source type="image/webp" srcSet="/static/58542250950b9cca49c031c61f702150/ba069/collage.webp 306w,/static/58542250950b9cca49c031c61f702150/b19a2/collage.webp 613w,/static/58542250950b9cca49c031c61f702150/fcd96/collage.webp 1225w" sizes="(min-width: 1225px) 1225px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1225px) 1225px, 100vw" decoding="async" loading="lazy" src="/static/58542250950b9cca49c031c61f702150/6109b/collage.png" srcSet="/static/58542250950b9cca49c031c61f702150/b2683/collage.png 306w,/static/58542250950b9cca49c031c61f702150/77eac/collage.png 613w,/static/58542250950b9cca49c031c61f702150/6109b/collage.png 1225w" alt="All four Video.js themes"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><span class="BlogImage__ImageDesc-sc-1kim4hz-1 iKptIg">All four Video.js themes</span></div><p>To that end, we've launched the website with <a href="https://github.com/videojs/themes" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">four new CSS-only themes</a>. Each is named after the website theme that contains them, but the point is to show off just how easy it is to customize your players while giving you some new starting points for creating your own custom themes. If you're interested in learning more about the process of using/building the themes, there's a high level overview on the <a href="https://mux.com/blog/the-new-video-js-themes/" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Mux blog</a>.</p><h2 id="new-logo" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/announcing-the-new-videojs-com/#new-logo"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>New Logo</h2><div class="BlogImage__Wrapper-sc-1kim4hz-0 bpHbQg"><img src="/static/42d8f872f22e8519211292ea3ede0aa1/logo-black.svg" alt="New Logo" loading="lazy"/><span class="BlogImage__ImageDesc-sc-1kim4hz-1 iKptIg">New Logo</span></div><p>The new logo will slowly filter out across the different projects over the next few days (let's face it, maybe months), but we've got new stickers on the way! If you're interested in slapping some Video.js on your laptop or bumper, if that's still a thing, shoot us a <a href="https://twitter.com/videojs" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">tweet</a>.</p><h2 id="credit-where-credits-due" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/announcing-the-new-videojs-com/#credit-where-credits-due"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Credit where credit's due!</h2><ul><li><a href="https://twitter.com/dylanjha" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@dylanjha</a> - lots and lots of bug fixes</li><li><a href="https://github.com/mister-ben" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">mister-ben</a>, <a href="https://twitter.com/l___day" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@l<!-- -->_<!-- -->_<!-- -->_<!-- -->day</a>, <a href="https://twitter.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@gkatsev</a> - feedback and testing</li><li><a href="https://twitter.com/olilish" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@olilish</a> - design!</li></ul><p>This redesign and buildout was funded (and built) by <a href="https://mux.com" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Mux</a> and, as usual, hosted by <a href="https://netlify.com" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Netlify</a>. <a href="https://browserstack.com" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Browserstack</a> allows us to test each player version in different browsers and devices, and <a href="https://fastly" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Fastly</a> provides our CDN-hosted versions. Last, but certainly not least, the Video.js corporate shepherd and primary sponsor is <a href="https://brightcove.com" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Brightcove</a>.</p><h2 id="go-build-awesome-players" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/announcing-the-new-videojs-com/#go-build-awesome-players"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Go build awesome players</h2><p>We'd love to see the players you create!</p><p>💝 <a href="https://twitter.com/matt_mcclure" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@matt_mcclure</a></p></div></div></article><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/ldayananda" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/ldayananda.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/ldayananda" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/ldayananda.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Lahiru Dayananda</span><span>2019-01-16</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/inband-captions-support-with-vhs/"><h1>In-band Captions Support with videojs-http-streaming</h1></a><p>With the release of <a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/introducing-video-js-http-streaming-vhs/">videojs-http-streaming</a> (VHS) v1.2.0 on July 16th 2018, Video.js has built-in support for CEA/CTA-608 captions carried in FMP4 segments. This means that closed captions are automatically parsed out and made available to Video.js players for MPEG-DASH content and HLS streams using FMP4 segments. Here's a <a href="https://jsfiddle.net/ugnkw65y/" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">sample player</a> that shows the captions (English with the "CC" button is the track with CEA-608 captions).</p><div class="VideoWrapper-sc-1eb1q73-0 PoIjk"><iframe src="https://jsfiddle.net/ugnkw65y/1/embedded/result,html/light" frameBorder="0" allowfullscreen=""></iframe></div><p>If you are curious about CEA-608 captions and the approach we used to parse them out of fmp4s, or a general overivew, you can watch my <a href="https://www.twitch.tv/videos/326082416?collection=u1vmyYMIYBXvlQ" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">talk from Demuxed 2018</a>.</p><div class="VideoWrapper-sc-1eb1q73-0 PoIjk"><iframe src="//www.youtube.com/embed/0yTYNIajBQM" frameBorder="0" allowfullscreen=""></iframe></div><p>Caption Parsing is handled by the <a href="https://github.com/videojs/mux.js" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">mux.js</a> library and interacts with VHS to feed parsed captions back to Video.js.</p><h2 id="usage" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/inband-captions-support-with-vhs/#usage"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Usage</h2><p>Create a CaptionParser:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"> <span class="token keyword">import</span> <span class="token punctuation">{</span> CaptionParser <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'mux.js/lib/mp4'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> captionParser <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CaptionParser</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// initalize the CaptionParser to ensure that it is ready for data</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>captionParser<span class="token punctuation">.</span><span class="token function">isInitialized</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> captionParser<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre></div><p>When working with HLS and MPEG-DASH with fmp4 segments, it's likely that not all the information needed to parse out captions are included in the media segments themselves, and metadata from the <code class="language-text">init</code> segment needs to be passed to the CaptionParser. For this reason, the video trackIds and timescales defined in the <code class="language-text">init</code> segment should be passed into the CaptionParser.</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"> <span class="token keyword">import</span> mp4probe <span class="token keyword">from</span> <span class="token string">'mux.js/lib/mp4/probe'</span><span class="token punctuation">;</span> <span class="token comment">// Typed array containing video and caption data</span> <span class="token keyword">const</span> data <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Timescale = 90000</span> <span class="token keyword">const</span> timescales <span class="token operator">=</span> mp4probe<span class="token punctuation">.</span><span class="token function">timescale</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// trackId = 1</span> <span class="token keyword">const</span> videoTrackIds <span class="token operator">=</span> mp4probe<span class="token punctuation">.</span><span class="token function">videoTrackIds</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Parsed captions are returned</span> <span class="token keyword">const</span> parsed <span class="token operator">=</span> captionParser<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span> data<span class="token punctuation">,</span> videoTrackIds<span class="token punctuation">,</span> timescales <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><p>Calling <code class="language-text">captionParser.parse</code> with data containing CEA-608 captions will result in an object with this structure:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"> <span class="token punctuation">{</span> <span class="token literal-property property">captions</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token comment">// You can ignore the startPts and endPts values here</span> <span class="token literal-property property">startPts</span><span class="token operator">:</span> <span class="token number">90000</span><span class="token punctuation">,</span> <span class="token literal-property property">endPts</span><span class="token operator">:</span> <span class="token number">99000</span><span class="token punctuation">,</span> <span class="token comment">// startTime and endTime can be used for caption times in the TextTrack API</span> <span class="token literal-property property">startTime</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">endTime</span><span class="token operator">:</span> <span class="token number">1.1</span><span class="token punctuation">,</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'This is a test caption'</span><span class="token punctuation">,</span> <span class="token comment">// This is the CEA-608 "channel" the caption belongs to</span> <span class="token literal-property property">stream</span><span class="token operator">:</span> <span class="token string">'CC1'</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// Includes any (or none) of: CC1, CC2, CC3, CC4</span> <span class="token comment">// This should match the captions returned in the above caption array</span> <span class="token literal-property property">captionStreams</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token constant">CC1</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div><p>You can then take one caption and create a <code class="language-text">VTTCue</code> to add to a <code class="language-text">TextTrack</code> with Video.js APIs</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"> <span class="token keyword">const</span> player <span class="token operator">=</span> <span class="token function">videojs</span><span class="token punctuation">(</span><span class="token string">'video'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> track <span class="token operator">=</span> player<span class="token punctuation">.</span><span class="token function">addRemoteTextTrack</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">kind</span><span class="token operator">:</span> <span class="token string">'captions'</span><span class="token punctuation">,</span> <span class="token literal-property property">label</span><span class="token operator">:</span> parsed<span class="token punctuation">.</span>captions<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>stream<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token literal-property property">language</span><span class="token operator">:</span> <span class="token string">'en'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span> track<span class="token punctuation">.</span><span class="token function">addCue</span><span class="token punctuation">(</span>parsed<span class="token punctuation">.</span>captions<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><p>VHS is included by default with videojs v7.x.</p></div></div></article><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gkatsev.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gkatsev.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Gary Katsevman</span><span>2019-01-11</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/video-js-7-4/"><h1>Video.js 7.4</h1></a><p>It's time to have an overview of Video.js 7.4, first released early December. The big new feature for this release is a UI that allows you to seek during live streams. We updated focus-visible to work with our Menus, added more translations, added a replay option to the Play/Pause button, and many, many fixes, multiple of which are accessibility related.</p><p>We also dropped our usage of Grunt from our build process. We owe a lot to Grunt as it has served us well but it was time to move on.</p><p>Video.js 7.4.1 is currently the latest release with 7.4.2 out as a pre-release until next week.</p><h2 id="thanks" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#thanks"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Thanks</h2><p>Before continuing, I'd like to thank everyone that was involved, we really appreciate your contributions! There were a total of 14 first time contributors, I think this is a historic high for us and I hope this continues!</p><ul><li><a href="https://github.com/BrandonOCasey" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@BrandonOCasey</a></li><li><a href="https://github.com/gesinger" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@gesinger</a></li><li><a href="https://github.com/gjanblaszczyk" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@gjanblaszczyk</a> (first time contributor!)</li><li><a href="https://github.com/valse" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@valse</a> (first time contributor!)</li><li><a href="https://github.com/gstrat88" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@gstrat88</a></li><li><a href="https://github.com/eranshmil" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@eranshmil</a> (first time contributor!)</li><li><a href="https://github.com/carlmorris" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@carlmorris</a> (first time contributor!)</li><li><a href="https://github.com/bartlomein" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@bartlomein</a> (first time contributor!)</li><li><a href="https://github.com/DanielRuf" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@DanielRuf</a> (first time contributor!)</li><li><a href="https://github.com/Quenty31" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@Quenty31</a> (first time contributor!)</li><li><a href="https://github.com/fketchakeu" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@fketchakeu</a> (first time contributor!)</li><li><a href="https://github.com/OwenEdwards" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@OwenEdwards</a></li><li><a href="https://github.com/alex-barstow" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@alex-barstow</a></li><li><a href="https://github.com/vitaliytv" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@vitaliytv</a> (first time contributor!)</li><li><a href="https://github.com/oaprograms" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@oaprograms</a> (first time contributor!)</li><li><a href="https://github.com/xjoaoalvesx" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@xjoaoalvesx</a> (first time contributor!)</li><li><a href="https://github.com/webdeveloperpr" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@webdeveloperpr</a> (first time contributor!)</li><li><a href="https://github.com/smbea" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@smbea</a> (first time contributor!)</li><li><a href="https://github.com/dustin71728" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@dustin71728</a> (first time contributor!)</li></ul><h2 id="live-ui" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#live-ui"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Live UI</h2><p>Video.js has supported live streams for a while, either natively, or via <a href="https://github.com/videojs/http-streaming" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">videojs-http-streaming (VHS)</a>. However, this UI was very minimal, it disabled the progress bar and basically only allowed pausing, though, there was an indicator that this was a live stream.</p><div class="BlogImage__Wrapper-sc-1kim4hz-0 bpHbQg"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:1280px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='528' width='1280' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#080808;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/3f817a9635d39919b867543eb94b081d/fcf37/live-ui.webp 320w,/static/3f817a9635d39919b867543eb94b081d/cbe13/live-ui.webp 640w,/static/3f817a9635d39919b867543eb94b081d/50d87/live-ui.webp 1280w" sizes="(min-width: 1280px) 1280px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1280px) 1280px, 100vw" decoding="async" loading="lazy" data-src="/static/3f817a9635d39919b867543eb94b081d/0802c/live-ui.png" data-srcset="/static/3f817a9635d39919b867543eb94b081d/8fb67/live-ui.png 320w,/static/3f817a9635d39919b867543eb94b081d/45fc8/live-ui.png 640w,/static/3f817a9635d39919b867543eb94b081d/0802c/live-ui.png 1280w" alt="Video.js, with the new Live UI, playing a live stream"/></picture><noscript><picture><source type="image/webp" srcSet="/static/3f817a9635d39919b867543eb94b081d/fcf37/live-ui.webp 320w,/static/3f817a9635d39919b867543eb94b081d/cbe13/live-ui.webp 640w,/static/3f817a9635d39919b867543eb94b081d/50d87/live-ui.webp 1280w" sizes="(min-width: 1280px) 1280px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1280px) 1280px, 100vw" decoding="async" loading="lazy" src="/static/3f817a9635d39919b867543eb94b081d/0802c/live-ui.png" srcSet="/static/3f817a9635d39919b867543eb94b081d/8fb67/live-ui.png 320w,/static/3f817a9635d39919b867543eb94b081d/45fc8/live-ui.png 640w,/static/3f817a9635d39919b867543eb94b081d/0802c/live-ui.png 1280w" alt="Video.js, with the new Live UI, playing a live stream"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><span class="BlogImage__ImageDesc-sc-1kim4hz-1 iKptIg">Video.js, with the new Live UI, playing a live stream</span></div><p>The new UI looks pretty similar to the previous live UI and the regular control bar. The "live" indicator moves to the right side of the progress bar and also indicates whether we are playing back live or we are behind live. Clicking this button will seek to the "live point". The time displays and tooltips will show time with respect to the live point; so, current time at the live point will be <code class="language-text">0</code> and if you seek back 30 seconds it'll show <code class="language-text">-00:30</code>.</p><p>This feature is still somewhat experimental, so, it is behind an option that is off by default. We hope that you try it out and give us feedback and that we can enable it by default in a future release.</p><p>To enable the feature, pass in <code class="language-text">liveui: true</code> to the player: In JavaScript:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">var</span> player <span class="token operator">=</span> <span class="token function">videojs</span><span class="token punctuation">(</span><span class="token string">'my-id'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">liveui</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><p>Or HTML:</p><div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video-js</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-id<span class="token punctuation">"</span></span> <span class="token attr-name">data-setup</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>{<span class="token punctuation">"</span>liveui<span class="token punctuation">"</span>: true}<span class="token punctuation">'</span></span><span class="token attr-name">}</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/live.m3u8<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>application/x-mpegurl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video-js</span><span class="token punctuation">></span></span></code></pre></div><h2 id="languages" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#languages"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Languages</h2><p>We've had a bunch of language additions and updates in the 7.4 release line. In addition, we now copy the JSON files into the dist/lang folder for easier inclusion your projects.</p><h3 id="languages-added-and-updated" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#languages-added-and-updated"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Languages added and updated</h3><ul><li>Occitan (oc)</li><li>Russian (ru)</li><li>Welsh/Cymraeg (cy)</li><li>Ukrainian (uk)</li><li>Serbian (sr)</li><li>Swedish (sv)</li></ul><h2 id="accessibility" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#accessibility"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Accessibility</h2><p>As always, we aim to make Video.js as accessible and usable as we can. To that end, we've had a bunch of accessibility related fixes in these releases.</p><ul><li>Time displays accessibility with VoiceOver</li><li>remove hidden control text in progress bar</li><li>make the seek-to-live button announce itself to screen readers properly</li><li>Make the <code class="language-text">-</code> in the remaining time display be visual only and not readable by screen readers</li></ul><h2 id="other-features-updates" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#other-features-updates"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other Features Updates</h2><h3 id="responsive-captions-settings-dialog" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#responsive-captions-settings-dialog"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Responsive Captions Settings Dialog</h3><p>This uses the new <code class="language-text">responsive</code> setting and breakpoints to make the dialog respond to the size of the player and improves the user experience.</p><h3 id="replay-option-for-playtoggle" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#replay-option-for-playtoggle"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>replay option for PlayToggle</h3><p>The PlayToggle button changes the icon to a replay icon when the video ends, most users don't mind it and it was a highly requested feature previously. This adds an option to turn it off.</p><h3 id="focus-visisble-menu-backgrounds" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#focus-visisble-menu-backgrounds"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>focus-visisble menu backgrounds</h3><p>Like outlines for other buttons, we use a different background color to represent the focus in menus. We should respect focus-visible there like we do for outlines in buttons.</p><h3 id="playerreset-event" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#playerreset-event"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>playerreset event</h3><p>When the player is reset with the <code class="language-text">reset()</code> method, it'll now trigger a <code class="language-text">playerreset</code> event to let components and users know.</p><h2 id="other-fixes" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#other-fixes"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Other Fixes</h2><ul><li>Fix fullscreen event triggering twice (7.4.2)</li><li>PlayToggle cursor pointer</li><li>select default subtitles on loadedmetadata not loadstart</li><li>don't apply user preference to subtitles if no language is set</li><li>make sure that vjs-waiting is only removed if we started playback again</li><li>allow duration to be set to NaN, making Video.js more spec compliant</li><li>fix locking menus when the menu button is pressed</li><li>remove child component from old parent when moving the component to a new parent</li><li>remove vjs-ended when seeking after video has ended</li><li>don't autohide the control bar when hovering with the mouse</li></ul><h2 id="full-changelog-for-740-741-and-742" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#full-changelog-for-740-741-and-742"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Full CHANGELOG for 7.4.0, 7.4.1, and 7.4.2</h2><a name="7.4.2"></a>## [7.4.2](https://github.com/videojs/video.js/compare/v7.4.1...v7.4.2) (2019-01-08)<h3 id="bug-fixes" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#bug-fixes"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bug Fixes</h3><ul><li>Control-bar autohide when cursor placed over it <a href="https://github.com/videojs/video.js/issues/5258" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5258</a> (<a href="https://github.com/videojs/video.js/issues/5692" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5692</a>) (<a href="https://github.com/videojs/video.js/commit/6ebc772" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">6ebc772</a>)</li><li>css animation shorthand property order (<a href="https://github.com/videojs/video.js/issues/5687" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5687</a>) (<a href="https://github.com/videojs/video.js/commit/0e69ce9" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">0e69ce9</a>)</li><li><strong>fs:</strong> make sure there's only one fullscreenchange event (<a href="https://github.com/videojs/video.js/issues/5686" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5686</a>) (<a href="https://github.com/videojs/video.js/commit/2bc90a1" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">2bc90a1</a>), closes <a href="https://github.com/videojs/video.js/issues/5685" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5685</a></li><li><strong>lang:</strong> adds sv translation used by liveui component (<a href="https://github.com/videojs/video.js/issues/5704" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5704</a>) (<a href="https://github.com/videojs/video.js/commit/f38726e" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">f38726e</a>)</li><li><strong>package:</strong> update <a href="https://github.com/videojs" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@videojs</a>/http-streaming to version 1.6.0 🚀 (<a href="https://github.com/videojs/video.js/issues/5705" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5705</a>) (<a href="https://github.com/videojs/video.js/commit/3d093ed" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">3d093ed</a>)</li><li><strong>player:</strong> remove vjs-ended class on seeked (<a href="https://github.com/videojs/video.js/issues/5728" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5728</a>) (<a href="https://github.com/videojs/video.js/commit/f1637cd" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">f1637cd</a>), closes <a href="https://github.com/videojs/video.js/issues/5654" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5654</a></li><li><strong>remaining-time-display:</strong> make the '-' be visual and not readable by screen readers (<a href="https://github.com/videojs/video.js/issues/5671" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5671</a>) (<a href="https://github.com/videojs/video.js/commit/05513f8" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">05513f8</a>), closes <a href="https://github.com/videojs/video.js/issues/5168" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5168</a></li><li><strong>seekbar:</strong> don't disable if live tracker's seekable is infinity (<a href="https://github.com/videojs/video.js/issues/5721" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5721</a>) (<a href="https://github.com/videojs/video.js/commit/7f507df" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">7f507df</a>)</li><li>remove child from old parent when moving to new parent via addChild (<a href="https://github.com/videojs/video.js/issues/5702" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5702</a>) (<a href="https://github.com/videojs/video.js/commit/8a3e2a7" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">8a3e2a7</a>)</li></ul><h3 id="chores" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#chores"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Chores</h3><ul><li><strong>package:</strong> update babel to version 7.2.2 (<a href="https://github.com/videojs/video.js/issues/5697" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5697</a>) (<a href="https://github.com/videojs/video.js/commit/30d0b98" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">30d0b98</a>), closes <a href="https://github.com/videojs/video.js/issues/5689" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5689</a></li><li><strong>package:</strong> update rollup to version 0.68.0 🚀 (<a href="https://github.com/videojs/video.js/issues/5690" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5690</a>) (<a href="https://github.com/videojs/video.js/commit/f0ba1f5" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">f0ba1f5</a>)</li></ul><h3 id="documentation" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#documentation"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Documentation</h3><ul><li><strong>liveui:</strong> Add a guide for the live ui and live api (<a href="https://github.com/videojs/video.js/issues/5677" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5677</a>) (<a href="https://github.com/videojs/video.js/commit/c147581" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">c147581</a>)</li></ul><a name="7.4.1"></a>## [7.4.1](https://github.com/videojs/video.js/compare/v7.4.0...v7.4.1) (2018-12-11)<h3 id="bug-fixes-1" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#bug-fixes-1"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bug Fixes</h3><ul><li><strong>a11y:</strong> current time and duration display accessibility with VoiceOver (<a href="https://github.com/videojs/video.js/issues/5653" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5653</a>) (<a href="https://github.com/videojs/video.js/commit/8932611" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">8932611</a>), closes <a href="https://github.com//www.w3.org/TR/html-aam-1.0//issues/details-id-124" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">/www.w3.org/TR/html-aam-1.0/#details-id-124</a></li><li><strong>a11y:</strong> fix hidden Control Text in Progress bar (Fixes <a href="https://github.com/videojs/video.js/issues/5251" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5251</a>) (<a href="https://github.com/videojs/video.js/issues/5655" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5655</a>) (<a href="https://github.com/videojs/video.js/commit/70a71ae" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">70a71ae</a>)</li><li><strong>a11y:</strong> make seek-to-live better announce itself to screen reader users (<a href="https://github.com/videojs/video.js/issues/5651" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5651</a>) (<a href="https://github.com/videojs/video.js/commit/165c120" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">165c120</a>)</li><li><strong>lang:</strong> append UKR translations and fix check translations command (<a href="https://github.com/videojs/video.js/issues/5642" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5642</a>) (<a href="https://github.com/videojs/video.js/commit/b7aafdc" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">b7aafdc</a>)</li><li><strong>lang:</strong> improves sv lang file (<a href="https://github.com/videojs/video.js/issues/5673" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5673</a>) (<a href="https://github.com/videojs/video.js/commit/b9d8744" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">b9d8744</a>)</li><li><strong>lang:</strong> Update sr.json (<a href="https://github.com/videojs/video.js/issues/5657" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5657</a>) (<a href="https://github.com/videojs/video.js/commit/98b4a1c" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">98b4a1c</a>)</li><li><strong>liveui:</strong> make edge detection less strict, add docs for option (<a href="https://github.com/videojs/video.js/issues/5661" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5661</a>) (<a href="https://github.com/videojs/video.js/commit/dce4a2c" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">dce4a2c</a>)</li><li><strong>liveui:</strong> seek to live should be immediate and other tweaks (<a href="https://github.com/videojs/video.js/issues/5650" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5650</a>) (<a href="https://github.com/videojs/video.js/commit/831961b" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">831961b</a>)</li><li><strong>package:</strong> update <a href="https://github.com/videojs" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@videojs</a>/http-streaming to version 1.5.1 🚀 (<a href="https://github.com/videojs/video.js/issues/5658" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5658</a>) (<a href="https://github.com/videojs/video.js/commit/8c9702a" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">8c9702a</a>)</li></ul><h3 id="chores-1" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#chores-1"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Chores</h3><ul><li><strong>package:</strong> update autoprefixer to version 9.4.2 (<a href="https://github.com/videojs/video.js/issues/5647" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5647</a>) (<a href="https://github.com/videojs/video.js/commit/19f3465" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">19f3465</a>)</li><li><strong>package:</strong> update rollup-plugin-node-resolve to version 4.0.0 🚀 (<a href="https://github.com/videojs/video.js/issues/5666" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5666</a>) (<a href="https://github.com/videojs/video.js/commit/d07b6c2" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">d07b6c2</a>)</li></ul><h3 id="documentation-1" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#documentation-1"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Documentation</h3><ul><li>remove grunt and update usage of build scripts (<a href="https://github.com/videojs/video.js/issues/5656" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5656</a>) (<a href="https://github.com/videojs/video.js/commit/62f9e78" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">62f9e78</a>)</li></ul><h3 id="tests" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#tests"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Tests</h3><ul><li>verify null-checks with player and control bar children set to false (<a href="https://github.com/videojs/video.js/issues/5670" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5670</a>) (<a href="https://github.com/videojs/video.js/commit/13b42ad" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">13b42ad</a>)</li></ul><a name="7.4.0"></a># [7.4.0](https://github.com/videojs/video.js/compare/v7.3.0...v7.4.0) (2018-12-03)<h3 id="features" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#features"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Features</h3><ul><li>add 'replay' option to the PlayToggle component. (<a href="https://github.com/videojs/video.js/issues/5531" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5531</a>) (<a href="https://github.com/videojs/video.js/commit/f178458" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">f178458</a>), closes <a href="https://github.com/videojs/video.js/issues/4802" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#4802</a></li><li><strong>lang:</strong> Add the Occitan locale (<a href="https://github.com/videojs/video.js/issues/5578" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5578</a>) (<a href="https://github.com/videojs/video.js/commit/0fb637d" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">0fb637d</a>)</li><li><strong>lang:</strong> Add Welsh/Cymraeg (cy) translations (<a href="https://github.com/videojs/video.js/issues/5561" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5561</a>) (<a href="https://github.com/videojs/video.js/commit/b2c1077" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">b2c1077</a>)</li><li><strong>lang:</strong> copy language JSON files into dist dir (<a href="https://github.com/videojs/video.js/issues/5549" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5549</a>) (<a href="https://github.com/videojs/video.js/commit/eb5de19" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">eb5de19</a>), closes <a href="https://github.com/videojs/video.js/issues/5092" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5092</a></li><li><strong>player:</strong> add playerreset event (<a href="https://github.com/videojs/video.js/issues/5335" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5335</a>) (<a href="https://github.com/videojs/video.js/commit/0e5442f" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">0e5442f</a>)</li><li>make menu background respect :focus-visible (<a href="https://github.com/videojs/video.js/issues/5558" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5558</a>) (<a href="https://github.com/videojs/video.js/commit/e5e1e29" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">e5e1e29</a>)</li><li>responsive caption settings (<a href="https://github.com/videojs/video.js/issues/5534" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5534</a>) (<a href="https://github.com/videojs/video.js/commit/b67fe27" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">b67fe27</a>)</li><li>support seeking during live playback via liveui option (<a href="https://github.com/videojs/video.js/issues/5511" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5511</a>) (<a href="https://github.com/videojs/video.js/commit/2974ad3" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">2974ad3</a>)</li></ul><h3 id="bug-fixes-2" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#bug-fixes-2"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bug Fixes</h3><ul><li>add correct cursor pointer for the play toggle (<a href="https://github.com/videojs/video.js/issues/5463" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5463</a>) (<a href="https://github.com/videojs/video.js/commit/aed337a" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">aed337a</a>)</li><li>default subtitles not enabled (<a href="https://github.com/videojs/video.js/issues/5608" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5608</a>) (<a href="https://github.com/videojs/video.js/commit/8329e64" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">8329e64</a>)</li><li><strong>tracks:</strong> don't select tracks based on user pref if no langauge is set (<a href="https://github.com/videojs/video.js/issues/5556" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5556</a>) (<a href="https://github.com/videojs/video.js/commit/c1cbce3" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">c1cbce3</a>), closes <a href="https://github.com/videojs/video.js/issues/5553" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5553</a></li><li>Don't remove vjs-waiting until time changes (<a href="https://github.com/videojs/video.js/issues/5533" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5533</a>) (<a href="https://github.com/videojs/video.js/commit/0060747" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">0060747</a>)</li><li><strong>lang:</strong> add is loading ru translation (<a href="https://github.com/videojs/video.js/issues/5630" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5630</a>) (<a href="https://github.com/videojs/video.js/commit/0090b75" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">0090b75</a>)</li><li><strong>lang:</strong> Occitan: harmonisation plural/singular (<a href="https://github.com/videojs/video.js/issues/5602" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5602</a>) (<a href="https://github.com/videojs/video.js/commit/4842201" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">4842201</a>)</li><li><strong>package:</strong> update <a href="https://github.com/videojs" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@videojs</a>/http-streaming to version 1.4.2 🚀 (<a href="https://github.com/videojs/video.js/issues/5543" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5543</a>) (<a href="https://github.com/videojs/video.js/commit/dbaca33" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">dbaca33</a>)</li><li><strong>package:</strong> update <a href="https://github.com/videojs" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@videojs</a>/http-streaming to version 1.5.0 🚀 (<a href="https://github.com/videojs/video.js/issues/5587" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5587</a>) (<a href="https://github.com/videojs/video.js/commit/d95ef6f" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">d95ef6f</a>)</li><li>duration reset and allow duration NaN or 0 for duration display (<a href="https://github.com/videojs/video.js/issues/5348" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5348</a>) (<a href="https://github.com/videojs/video.js/commit/ab0e29a" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">ab0e29a</a>), closes <a href="https://github.com/videojs/video.js/issues/5347" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5347</a></li><li>not inline volume slider showing up after mouse hovering on it (<a href="https://github.com/videojs/video.js/issues/5503" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5503</a>) (<a href="https://github.com/videojs/video.js/commit/7d127c8" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">7d127c8</a>), closes <a href="https://github.com/videojs/video.js/issues/5502" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5502</a> <a href="https://github.com/videojs/video.js/issues/5505" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5505</a></li><li>vjs-lock-showing class gets removed from menu when no longer hovering on menu-button. (<a href="https://github.com/videojs/video.js/issues/5465" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5465</a>) (<a href="https://github.com/videojs/video.js/commit/58f638e" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">58f638e</a>), closes <a href="https://github.com/videojs/video.js/issues/1690" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#1690</a></li></ul><h3 id="chores-2" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#chores-2"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Chores</h3><ul><li>fix lint on pre-commit with lint-staged, use npm-merge-driver (<a href="https://github.com/videojs/video.js/issues/5591" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5591</a>) (<a href="https://github.com/videojs/video.js/commit/be9e9a9" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">be9e9a9</a>)</li><li>fix travis build (<a href="https://github.com/videojs/video.js/issues/5627" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5627</a>) (<a href="https://github.com/videojs/video.js/commit/6c1056b" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">6c1056b</a>), closes <a href="https://github.com/videojs/video.js/issues/5626" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5626</a> <a href="https://github.com/videojs/video.js/issues/5616" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5616</a></li><li>Move a11y, lang, browserify, and webpack out of grunt (<a href="https://github.com/videojs/video.js/issues/5589" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5589</a>) (<a href="https://github.com/videojs/video.js/commit/db6e376" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">db6e376</a>)</li><li>move copy, zip, and clean tasks to npm scripts (<a href="https://github.com/videojs/video.js/issues/5544" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5544</a>) (<a href="https://github.com/videojs/video.js/commit/2d682a4" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">2d682a4</a>)</li><li>remove grunt move to npm scripts (<a href="https://github.com/videojs/video.js/issues/5592" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5592</a>) (<a href="https://github.com/videojs/video.js/commit/d72786f" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">d72786f</a>)</li><li>switch from cross-var to cross-env (<a href="https://github.com/videojs/video.js/issues/5600" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5600</a>) (<a href="https://github.com/videojs/video.js/commit/ab740bc" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">ab740bc</a>)</li><li>switch to videojs-generate-karma-config (<a href="https://github.com/videojs/video.js/issues/5528" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5528</a>) (<a href="https://github.com/videojs/video.js/commit/2e70450" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">2e70450</a>)</li><li>update all the dev deps to their latest versions (<a href="https://github.com/videojs/video.js/issues/5645" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5645</a>) (<a href="https://github.com/videojs/video.js/commit/db1369a" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">db1369a</a>), closes <a href="https://github.com/videojs/video.js/issues/5644" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5644</a> <a href="https://github.com/videojs/video.js/issues/5643" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5643</a></li><li>update deps, remove coveralls, fix audit issues (<a href="https://github.com/videojs/video.js/issues/5555" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5555</a>) (<a href="https://github.com/videojs/video.js/commit/11f1fb8" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">11f1fb8</a>)</li><li>use relative urls in index.html (<a href="https://github.com/videojs/video.js/issues/5586" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5586</a>) (<a href="https://github.com/videojs/video.js/commit/dec31e4" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">dec31e4</a>)</li><li><strong>netlify:</strong> make docs build properly (<a href="https://github.com/videojs/video.js/issues/5636" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5636</a>) (<a href="https://github.com/videojs/video.js/commit/a8828cd" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">a8828cd</a>)</li><li><strong>package:</strong> update conventional-changelog-cli to version 2.0.11 (<a href="https://github.com/videojs/video.js/issues/5552" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5552</a>) (<a href="https://github.com/videojs/video.js/commit/f236176" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">f236176</a>)</li><li><strong>package:</strong> update grunt-cli to version 1.3.2 (<a href="https://github.com/videojs/video.js/issues/5550" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5550</a>) (<a href="https://github.com/videojs/video.js/commit/2d27b6a" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">2d27b6a</a>)</li><li><strong>package:</strong> update husky to version 1.1.3 (<a href="https://github.com/videojs/video.js/issues/5551" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5551</a>) (<a href="https://github.com/videojs/video.js/commit/937e2bf" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">937e2bf</a>)</li><li><strong>package:</strong> update npm-run-all to 4.1.5 to remove event-stream (<a href="https://github.com/videojs/video.js/issues/5614" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5614</a>) (<a href="https://github.com/videojs/video.js/commit/3e52c4f" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">3e52c4f</a>)</li><li><strong>package:</strong> update remark-stringify to version 6.0.1 (<a href="https://github.com/videojs/video.js/issues/5539" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5539</a>) (<a href="https://github.com/videojs/video.js/commit/d46828a" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">d46828a</a>)</li><li><strong>package:</strong> update rollup to version 0.67.1 (<a href="https://github.com/videojs/video.js/issues/5580" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5580</a>) (<a href="https://github.com/videojs/video.js/commit/209d9f9" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">209d9f9</a>)</li><li><strong>package:</strong> update videojs-generate-karma-config to version 5.0.0 🚀 (<a href="https://github.com/videojs/video.js/issues/5595" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5595</a>) (<a href="https://github.com/videojs/video.js/commit/2162239" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">2162239</a>)</li><li><strong>player:</strong> fix linting for a comment (<a href="https://github.com/videojs/video.js/issues/5588" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5588</a>) (<a href="https://github.com/videojs/video.js/commit/b5e6bdc" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">b5e6bdc</a>)</li><li><strong>travis:</strong> remove unused secret variables (<a href="https://github.com/videojs/video.js/issues/5577" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5577</a>) (<a href="https://github.com/videojs/video.js/commit/15beea7" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">15beea7</a>)</li></ul><h3 id="documentation-2" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-4/#documentation-2"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Documentation</h3><ul><li><strong>media-error:</strong> Correct error type documentation (<a href="https://github.com/videojs/video.js/issues/5566" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5566</a>) (<a href="https://github.com/videojs/video.js/commit/441f0e1" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">441f0e1</a>)</li><li>update starter template (<a href="https://github.com/videojs/video.js/issues/5570" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5570</a>) (<a href="https://github.com/videojs/video.js/commit/287b267" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">287b267</a>), closes <a href="https://github.com/1000/issues/0" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">1000#0</a> <a href="https://github.com/videojs/video.js/issues/5562" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5562</a></li><li>Update urls in README.md to point to v7.3.0 (<a href="https://github.com/videojs/video.js/issues/5536" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">#5536</a>) (<a href="https://github.com/videojs/video.js/commit/79edf5b" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">79edf5b</a>)</li></ul></div></div></article><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/gesinger" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gesinger.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/gesinger" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gesinger.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Garrett Singer</span><span>2018-12-17</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/bugpost-disconnects-and-reconnects/"><h1>Bugpost: Disconnects and Reconnects</h1></a><p>In my old apartment, whenever I nuked a bowl of oats in the microwave, my WIFI cut out. It was an annoyance, but I was hungry, the apartment was too small to move the router further from the microwave, and I didn’t want to buy anything that operated on a different frequency. So I’d start the microwave, watch whatever video was streaming on my laptop until the buffer ran out, then watch the loading spinner until the microwave gave the triple ding.</p><p>Thankfully, video players are usually pretty robust against such issues as network connectivity (and rogue microwaves), and the video resumed after the network recovered. But recently, we found that for some content played in Video.js, the video didn’t resume. Even worse, the loading spinner simply disappeared, leaving a frozen frame on screen.</p><p>You can see this behavior yourself by checking out Video.js 7.3.0, loading <a href="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd</a> as the source, and using Chrome Dev Tools to disconnect and reconnect the network.</p><p>Here’s a quick tour of what happened and how we fixed it.</p><h2 id="the-loading-spinner" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/bugpost-disconnects-and-reconnects/#the-loading-spinner"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>The Loading Spinner</h2><p>To approach the bug, we started with the most glaring problem, the disappearance of the loading spinner. The spinner is managed by Video.js. In <a href="https://github.com/videojs/video.js/blob/v7.3.0/src/js/player.js#L1598" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">the code</a>, the <code class="language-text">vjs-waiting</code> class is added to the HTML element when the tech triggers a <code class="language-text">waiting</code> event, and is removed on the next <code class="language-text">timeupdate</code> event.</p><div class="gatsby-highlight" data-language="javascript"><pre class="language-javascript"><code class="language-javascript"><span class="token comment">/** * Retrigger the `waiting` event that was triggered by the {@link Tech}. * * @fires Player#waiting * @listens Tech#waiting * @private */</span> <span class="token function">handleTechWaiting_</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'vjs-waiting'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/** * A readyState change on the DOM element has caused playback to stop. * * @event Player#waiting * @type {EventTarget~Event} */</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">trigger</span><span class="token punctuation">(</span><span class="token string">'waiting'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">one</span><span class="token punctuation">(</span><span class="token string">'timeupdate'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">'vjs-waiting'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre></div><p>After logging the events emitted by the player, the issue became clear. Some browsers emitted a <code class="language-text">timeupdate</code> event immediatley after the <code class="language-text">waiting</code> event.</p><p>So <code class="language-text">timeupdate</code> events themselves were not reliable, but what else could be used to make a better determination of if we're waiting? We checked <code class="language-text">player.currentTime()</code> on the <code class="language-text">timeupdate</code> events, and found that when we caught the last <code class="language-text">timeupdate</code> event, the one after the <code class="language-text">waiting</code> event, the player was at the same time as the <code class="language-text">timeupdate</code> event prior to the <code class="language-text">waiting</code> event (and the same time as when the <code class="language-text">waiting</code> event was triggered).</p><div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">`timeupdate` triggered, player.currentTime = 11 `timeupdate` triggered, player.currentTime = 11.250 `waiting` triggered, player.currentTime = 11.250 `timeupdate` triggered, player.currentTime = 11.250</code></pre></div><p>The fix was pretty easy. Simply record the player's time when it gets the <code class="language-text">waiting</code> event, and instead of removing the <code class="language-text">vjs-waiting</code> class on the next <code class="language-text">timeupdate</code>, remove the <code class="language-text">vjs-waiting</code> class on the next <code class="language-text">timeupdate</code> that has a different time from the one we recorded.</p><p>You can see the PR for that <a href="https://github.com/videojs/video.js/pull/5533" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">here</a>, and it is available in Video.js 7.4.0.</p><h2 id="resuming-playback-after-disconnecting" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/bugpost-disconnects-and-reconnects/#resuming-playback-after-disconnecting"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Resuming Playback after Disconnecting</h2><p>With the loading spinner back, the next issue was to determine why, when the network reconnected, the video did not resume. First, we tested a few different pieces of content. The HLS source we tested did reconnect, but the DASH source didn't. Worse, when using the DASH source, Chrome's debug console froze, as it racked up request and console errors as fast as the computer could process them.</p><h3 id="console-crash" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/bugpost-disconnects-and-reconnects/#console-crash"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Console Crash</h3><p>Imagine your console filled with the following two messages repeated thousands of times:</p><div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">GET https://dash.akamaized.net/akamai/bbb_30fps/bbb_a64k/bbb_a64k_8.m4a net::ERR_INTERNET_DISCONNECTED VIDEOJS: WARN: Problem encountered with the current HLS playlist. Trying again since it is the final playlist.</code></pre></div><p>When your console freezes, debugging can be tough. It's like trying to watch a video when the microwave is on. So we tackled that issue first.</p><p>Looking at the error message, we were repeatedly retrying the last rendition. That is expected behavior, as we added it <a href="https://github.com/videojs/videojs-contrib-hls/pull/1039" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">a long time ago</a> to our HLS playlist loader. However, when we added DASH support, we created a different playlist loader, and we never added the same logic for reloading the final DASH playlist.</p><p>After <a href="https://github.com/videojs/http-streaming/pull/277" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">adding the throttle</a>, debugging became much easier, and we were able to use the console once again and dig into why DASH didn't reconnect while HLS did.</p><h3 id="multiple-requests-multiple-problems" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/bugpost-disconnects-and-reconnects/#multiple-requests-multiple-problems"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Multiple Requests Multiple Problems</h3><p>The last problem proved to be the most difficult to debug. Initially, the thought was that demuxed content was the problem, as having a separate audio segment loader to load from the audio playlist could cause trouble when experiencing errors at the same time as the main segment loader tried to load from the video playlist. However, HLS can also have demuxed content, and after an example source proved to resume just fine, that approach was ruled out.</p><p>By examining Chrome's network log, the DASH content, after a certain point, stopped requesting video segments, and only requested audio segments. But there were more than just two requests for DASH. The video segments themselves included two requests: one for the init segment, and the other for the video data.</p><p>Requests in VHS are managed by a module called <code class="language-text">media-segment-request</code>, which is responsible for requesting everything required for a segment, whether it be the key, the init segment, the media data, or all of them, before letting the segment loader know that its requests are done. And for the video requests, the <code class="language-text">media-segment-request</code> never called the done callback after the disconnect.</p><p>It turned out that if we received one error, we aborted the other requests in that group, and waited to call the <code class="language-text">done</code> callback until those requests reported that they were aborted. However, according to the <a href="https://xhr.spec.whatwg.org/#the-abort%28%29-method" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">XHR standard</a>, the abort algorithm may not be run if the request was unsent. In this case, when the network disconnected, the first request reported an error before the second had a chance to be sent. After we aborted the second request, we were stuck waiting for an error that would never come.</p><p>We fixed that by <a href="https://github.com/videojs/http-streaming/pull/286" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">immediately calling back with an error on the first error we encounter</a> instead of waiting for each subsequent request to finish.</p><p>The problem should also have existed in HLS, but only in cases where the segments had an EXT-X-KEY or EXT-X-MAP tag to go along with the media request. In the content we tried, neither of those was present, so it appeared to be isolated to DASH content.</p><h2 id="bug-solved" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/bugpost-disconnects-and-reconnects/#bug-solved"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Bug Solved</h2><p>We hope that was somewhat useful in describing some of the bugs we encounter, how we go about investigation, and what the resolutions look like. We'd be happy to hear from you as well. You can find us on the #playback channel in the <a href="http://slack.videojs.com/" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Video.js Slack</a>, or navigating Issues and PRs at <a href="https://github.com/videojs/http-streaming" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">https://github.com/videojs/http-streaming</a>.</p><p>Now to enjoy my oats and video, without any concerns about the playback resuming.</p></div></div></article><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/gesinger" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gesinger.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/gesinger" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gesinger.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Garrett Singer</span><span>2018-11-08</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/introducing-video-js-http-streaming-vhs/"><h1>Introducing Video.js HTTP Streaming (VHS)</h1></a><blockquote><p>"How do I get my video to play with Video.js?"</p></blockquote><p>This is one of the most frequent questions we get when working on Video.js. And it's a good question.</p><p>If someone checks out a copy of Video.js, their content may play on one browser and not another. To get cross browser support for a specific type of content, they must stumble upon a relevant source handler (for instance, <a href="https://github.com/videojs/videojs-contrib-hls" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">videojs-contrib-hls</a> for HLS content). Only after including the source handler will their video play across all major browsers.</p><p>We want Video.js to be easy to use, and that isn't the easiest setup. So we decided that it's time to address the issue.</p><p>This was the motivation behind integrating <a href="https://github.com/videojs/http-streaming" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Video.js HTTP Streaming</a> (nicknamed VHS) inside of <a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/video-js-7-is-here/">Video.js 7 by default</a>.</p><h2 id="what-is-vhs" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/introducing-video-js-http-streaming-vhs/#what-is-vhs"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What is VHS?</h2><div class="BlogImage__Wrapper-sc-1kim4hz-0 bpHbQg"><img src="/static/6c4a5813696e59142bd3f5bc9a4e302d/vhs-logo.svg" alt="VHS logo" loading="lazy"/><span class="BlogImage__ImageDesc-sc-1kim4hz-1 iKptIg">VHS logo</span></div><p>VHS is the successor to videojs-contrib-hls. It is a source handler forked from the <a href="https://github.com/videojs/videojs-contrib-hls" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">videojs-contrib-hls</a> repository. While videojs-contrib-hls was originally designed to add HLS playback on all browsers, we realized that the engine could also play other formats just as well.</p><p>To prove this, we added a <a href="https://github.com/videojs/mpd-parser" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">DASH manifest parser</a>, and with a few minor changes, VHS played DASH content with the same codebase and API as it used for HLS.</p><p>Even with the changing landscape of video technologies, Video.js will be ready. If a new streaming format gains popularity, only a few code changes will be necessary to add support to VHS. One engine and API for all formats.</p><h2 id="why-is-vhs-included-by-default-in-videojs" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/introducing-video-js-http-streaming-vhs/#why-is-vhs-included-by-default-in-videojs"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Why is VHS included by default in Video.js?</h2><blockquote><p>By including VHS by default in Video.js, you no longer have to worry about what browser supports what streaming technology.</p></blockquote><p>Video.js was built to abstract away differences in video APIs and features between web browsers, creating one simple API as close to the web standards as possible, and filling in feature gaps where possible. Over time, one area where browsers have diverged is in their support of different media formats. Some browsers may support native playback of DASH, others of HLS, and some support neither.</p><p>Previously, this would be managed by including source handlers and plugins, but we understand the importance of having a simple setup. By including VHS by default in Video.js, you no longer have to worry about what browser supports what streaming technology. It should just work.</p><h2 id="what-if-i-want-to-opt-out-of-using-vhs" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/introducing-video-js-http-streaming-vhs/#what-if-i-want-to-opt-out-of-using-vhs"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What if I want to opt-out of using VHS?</h2><p>If you would rather include a different source handler for HLS or DASH playback, Video.js still allows you to do that. <a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/video-js-7-is-here/#vhs-and-videojs">Video.js core</a> is the Video.js you know and love, without the inclusion of VHS. Everything should work as it used to.</p><h2 id="contributions-and-feedback-welcome" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/introducing-video-js-http-streaming-vhs/#contributions-and-feedback-welcome"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Contributions and Feedback Welcome</h2><p>As always, we’d love your contributions and feedback. The best way to reach us for comments, questions, requests, contributions, or just to say hello are the <a href="https://github.com/videojs/http-streaming" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">VHS GitHub page</a> and the #playback channel on the <a href="http://slack.videojs.com/" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Video.js slack</a></p></div></div></article><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gkatsev.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gkatsev.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Gary Katsevman</span><span>2018-10-29</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/video-js-7-3-responsive-layout-fill-mode-createLogger/"><h1>Video.js 7.3: Responsive Layout, Fill Mode, createLogger</h1></a><p>Another month, another Video.js release: <a href="https://github.com/videojs/video.js/releases/tag/v7.3.0" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">v7.3.0</a>. This release brings a long wanted feature: Responsive Layout. In addition, Fill Mode has been promoted to a first-class feature and createLogger was added to make debugging and logging easier.</p><p>This is currently out as a pre-release and will be promoted to latest in about a week. Please try it out and <a href="https://github.com/videojs/video.js/issues/new" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">report any issues you find</a>.</p><h2 id="thanks" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-3-responsive-layout-fill-mode-createLogger/#thanks"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Thanks</h2><p>I'd like to thank everyone that was involved in making changes that landed in this release. Any and all changes are really appreciated.</p><ul><li><a href="https://github.com/BrandonOCasey" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@BrandonOCasey</a></li><li><a href="https://github.com/chrisrng" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@chrisrng</a></li><li><a href="https://github.com/syranez" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@syranez</a></li><li><a href="https://github.com/misteroneill" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@misteroneill</a></li><li><a href="https://github.com/OwenEdwards" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@OwenEdwards</a></li></ul><h2 id="responsive-mode" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-3-responsive-layout-fill-mode-createLogger/#responsive-mode"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Responsive Mode</h2><p><a href="https://docs.videojs.com/tutorial-layout.html#responsive-mode" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Responsive Mode</a> will make the player adjust UI components to the size of the player. It uses the <a href="https://github.com/videojs/video.js/pull/4864" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><code>playerresize</code></a> event that was added in <a href="https://github.com/videojs/video.js/releases/tag/v6.7.0" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">v6.7.0</a> of Video.js, which allows us to know when the player changes sizes.</p><p>Responsive mode will set and change certain breakpoint classes like <code class="language-text">vjs-layout-small</code> when the player size changed. These can be <a href="https://docs.videojs.com/tutorial-layout.html#customizing-breakpoints" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">configured</a>. Depending on which class is currently on the player, the control bar and other UI elements can adapt. For example, with <code class="language-text">vjs-layout-small</code>, the time controls will not show because the time tooltips on the progress bar are available and the captions button is more important. At a larger size, both can be shown without a problem.</p><p>You can find out how to enable <a href="https://docs.videojs.com/tutorial-layout.html#responsive-mode" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Responsive Mode</a> and more in our <a href="https://docs.videojs.com/tutorial-layout.html#responsive-mode" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">docs page</a>. There is also an example playground in the <a href="https://github.com/videojs/video.js/blob/main/sandbox/responsive.html.example" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">sandbox folder in the repo</a>.</p><h2 id="fill-mode" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-3-responsive-layout-fill-mode-createLogger/#fill-mode"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Fill Mode</h2><p><a href="https://docs.videojs.com/tutorial-layout.html#fill-mode" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Fill Mode</a> allows the Video.js player to resize dynamically, but stay contained within the bounds of the parent container. This is analogous to <a href="https://docs.videojs.com/tutorial-layout.html#fluid-mode" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Fluid Mode</a>, but sometimes you the container is already being sized properly.</p><p>Fill Mode is not a brand new mode, the class <code class="language-text">vjs-fill</code> has been available in Video.js for quite <a href="https://github.com/videojs/video.js/commit/2fc8968002cf2f40128c39699c3ffbaac73fc9ed#diff-6be43b1f61c2cbcb90c6cb4a762ad527R64" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">a while</a>. This finally makes it a first-class feature to go along with Fluid Mode.</p><h2 id="createlogger" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-3-responsive-layout-fill-mode-createLogger/#createlogger"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>createLogger</h2><p>This is a new method on <code class="language-text">videojs.log</code> that allows you to create a new logger with a specific name. It then creates a chain of names to make it easier to track which component logged this particular message. In particular, this can help plugin authors to log messages and then filter out only the messages that are associated with their plugin.</p><p><code class="language-text">createLogger</code> returns a function with the same API as <code class="language-text">videojs.log</code>. You can see it in action below.</p><h3 id="examples" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-3-responsive-layout-fill-mode-createLogger/#examples"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Examples</h3><p>A new method, <code class="language-text">player.log</code> was added which uses createLogger behind the scenes. It logs the player ID in addition to <code class="language-text">VIDEOJS</code>:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">var</span> player <span class="token operator">=</span> <span class="token function">videojs</span><span class="token punctuation">(</span><span class="token string">'myid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> player<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// VIDEOJS: myid: foo</span></code></pre></div><p>You can also go further and create a sub logger:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">var</span> player <span class="token operator">=</span> <span class="token function">videojs</span><span class="token punctuation">(</span><span class="token string">'myid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> mylog <span class="token operator">=</span> player<span class="token punctuation">.</span>log<span class="token punctuation">.</span><span class="token function">createLogger</span><span class="token punctuation">(</span><span class="token string">'my-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> mylog<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// VIDEOJS: myid: my-plugin: foo</span></code></pre></div><p>If you want to log a warning or error for your custom plugin:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">var</span> player <span class="token operator">=</span> <span class="token function">videojs</span><span class="token punctuation">(</span><span class="token string">'myid'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> mylog <span class="token operator">=</span> player<span class="token punctuation">.</span>log<span class="token punctuation">.</span><span class="token function">createLogger</span><span class="token punctuation">(</span><span class="token string">'my-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> mylog<span class="token punctuation">.</span>log<span class="token punctuation">.</span><span class="token function">warn</span><span class="token punctuation">(</span><span class="token string">'foo'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// VIDEOJS: myid: my-plugin: WARN: foo</span> mylog<span class="token punctuation">.</span>log<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'bar'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// VIDEOJS: vid1: my-plugin: ERROR: bar</span></code></pre></div></div></div></article><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gkatsev.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gkatsev.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Gary Katsevman</span><span>2018-07-10</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/video-js-7-1-and-6-11-autoplay-and-fullscreen-changes/"><h1>Video.js 7.1 and 6.11: Autoplay and Fullscreen changes</h1></a><div class="BlogImage__Wrapper-sc-1kim4hz-0 bpHbQg"><div data-gatsby-image-wrapper="" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:1000px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='666' width='1000' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/6fc727958d284d18e11db82258fbcc1c/48571/header.webp 250w,/static/6fc727958d284d18e11db82258fbcc1c/921bf/header.webp 500w,/static/6fc727958d284d18e11db82258fbcc1c/323e8/header.webp 1000w" sizes="(min-width: 1000px) 1000px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1000px) 1000px, 100vw" decoding="async" loading="lazy" data-src="/static/6fc727958d284d18e11db82258fbcc1c/7bcb3/header.png" data-srcset="/static/6fc727958d284d18e11db82258fbcc1c/6b1e7/header.png 250w,/static/6fc727958d284d18e11db82258fbcc1c/e5d44/header.png 500w,/static/6fc727958d284d18e11db82258fbcc1c/7bcb3/header.png 1000w" alt="A laptop playing a video in fullscreen mode."/></picture><noscript><picture><source type="image/webp" srcSet="/static/6fc727958d284d18e11db82258fbcc1c/48571/header.webp 250w,/static/6fc727958d284d18e11db82258fbcc1c/921bf/header.webp 500w,/static/6fc727958d284d18e11db82258fbcc1c/323e8/header.webp 1000w" sizes="(min-width: 1000px) 1000px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 1000px) 1000px, 100vw" decoding="async" loading="lazy" src="/static/6fc727958d284d18e11db82258fbcc1c/7bcb3/header.png" srcSet="/static/6fc727958d284d18e11db82258fbcc1c/6b1e7/header.png 250w,/static/6fc727958d284d18e11db82258fbcc1c/e5d44/header.png 500w,/static/6fc727958d284d18e11db82258fbcc1c/7bcb3/header.png 1000w" alt="A laptop playing a video in fullscreen mode."/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><span class="BlogImage__ImageDesc-sc-1kim4hz-1 iKptIg">A laptop playing a video in fullscreen mode.</span></div><p>It's been a while since the last release post. The <a href="https://github.com/videojs/video.js/releases/tag/v7.1.0" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">7.1.0</a> and <a href="https://github.com/videojs/video.js/releases/tag/v6.11.0" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">6.11.0</a> releases of Video.js are full of great features from contributors and maintainers. The two big changes are related to autoplay -- when will we stop talking about autoplay? -- and fullscreen. Though, there's plenty more in there.</p><p>Video.js 7.1.0 and 6.11.0 are out as <code class="language-text">next</code> and <code class="language-text">next-6</code> respectively on npm.</p><p>To get 7.1.0 via npm:</p><div class="gatsby-highlight" data-language="shell-session"><pre class="language-shell-session"><code class="language-shell-session"><span class="token output">npm install video.js@next</span></code></pre></div><p>And 6.11.0 via npm:</p><div class="gatsby-highlight" data-language="shell-session"><pre class="language-shell-session"><code class="language-shell-session"><span class="token output">npm install video.js@next-6</span></code></pre></div><h2 id="autoplay" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-1-and-6-11-autoplay-and-fullscreen-changes/#autoplay"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Autoplay</h2><p>We've been keeping track of changes happening around <a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/autoplay-best-practices-with-video-js">autoplay</a> in browser vendors. We've also done a lot of work to make Video.js work as well as possible with the new autoplay policies. However, there were still some use cases that weren't accounted for. To address those, we decided to extend the existing Video.js <code class="language-text">autoplay</code> option to include a few new values: <code class="language-text">muted</code>, <code class="language-text">play</code>, <code class="language-text">any</code>. The current boolean options will work as they do now and unknown options will be treated as they do now.</p><ul><li><code class="language-text">muted</code> - this will mute the video element before calling <code class="language-text">play()</code> on <code class="language-text">loadstart</code>.</li><li><code class="language-text">play</code> - this will call <code class="language-text">play()</code> on <code class="language-text">loadstart</code>. This is similar to the <code class="language-text">autoplay</code> attribute but with a call to play instead of using the attribute.</li><li><code class="language-text">any</code> - this will call <code class="language-text">play()</code> on <code class="language-text">loadstart</code> but if it fails, it will try and mute the player and try <code class="language-text">play()</code>ing again.</li></ul><h2 id="fullscreen" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-1-and-6-11-autoplay-and-fullscreen-changes/#fullscreen"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Fullscreen</h2><p>There are two fullscreen related changes in these releases.</p><p>The first one is one that was often request and it's finally here: double click to toggle fullscreen. Double clicking inside the player area -- outside of the control bar and modal dialogs -- will enter or exit fullscreen playback.</p><p>The second change is to disable the fullscreen toggle if fullscreen is not available, for example, inside of an iframe without <code class="language-text">allowfullscreen</code> attribute</p><div class="BlogImage__Wrapper-sc-1kim4hz-0 bpHbQg"><div data-gatsby-image-wrapper="" style="margin:0 auto;max-width:124px" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:124px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='31' width='124' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#284858;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/24e168e2e24a3bf3770a7f110a9a7b01/8c8f8/fs-enabled.webp 31w,/static/24e168e2e24a3bf3770a7f110a9a7b01/0c6aa/fs-enabled.webp 62w,/static/24e168e2e24a3bf3770a7f110a9a7b01/1c0f8/fs-enabled.webp 124w" sizes="(min-width: 124px) 124px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 124px) 124px, 100vw" decoding="async" loading="lazy" data-src="/static/24e168e2e24a3bf3770a7f110a9a7b01/2c840/fs-enabled.png" data-srcset="/static/24e168e2e24a3bf3770a7f110a9a7b01/63ead/fs-enabled.png 31w,/static/24e168e2e24a3bf3770a7f110a9a7b01/53051/fs-enabled.png 62w,/static/24e168e2e24a3bf3770a7f110a9a7b01/2c840/fs-enabled.png 124w" alt="Fullscreen available"/></picture><noscript><picture><source type="image/webp" srcSet="/static/24e168e2e24a3bf3770a7f110a9a7b01/8c8f8/fs-enabled.webp 31w,/static/24e168e2e24a3bf3770a7f110a9a7b01/0c6aa/fs-enabled.webp 62w,/static/24e168e2e24a3bf3770a7f110a9a7b01/1c0f8/fs-enabled.webp 124w" sizes="(min-width: 124px) 124px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 124px) 124px, 100vw" decoding="async" loading="lazy" src="/static/24e168e2e24a3bf3770a7f110a9a7b01/2c840/fs-enabled.png" srcSet="/static/24e168e2e24a3bf3770a7f110a9a7b01/63ead/fs-enabled.png 31w,/static/24e168e2e24a3bf3770a7f110a9a7b01/53051/fs-enabled.png 62w,/static/24e168e2e24a3bf3770a7f110a9a7b01/2c840/fs-enabled.png 124w" alt="Fullscreen available"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><span class="BlogImage__ImageDesc-sc-1kim4hz-1 iKptIg">Fullscreen available</span></div><div class="BlogImage__Wrapper-sc-1kim4hz-0 bpHbQg"><div data-gatsby-image-wrapper="" style="margin:0 auto;max-width:130px" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:130px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='32' width='130' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#284858;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/f2e9c6763054bac69e4ef35880699b28/59521/fs-disabled.webp 33w,/static/f2e9c6763054bac69e4ef35880699b28/77535/fs-disabled.webp 65w,/static/f2e9c6763054bac69e4ef35880699b28/53b05/fs-disabled.webp 130w" sizes="(min-width: 130px) 130px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 130px) 130px, 100vw" decoding="async" loading="lazy" data-src="/static/f2e9c6763054bac69e4ef35880699b28/53c24/fs-disabled.png" data-srcset="/static/f2e9c6763054bac69e4ef35880699b28/37c84/fs-disabled.png 33w,/static/f2e9c6763054bac69e4ef35880699b28/77331/fs-disabled.png 65w,/static/f2e9c6763054bac69e4ef35880699b28/53c24/fs-disabled.png 130w" alt="Fullscreen unavailable"/></picture><noscript><picture><source type="image/webp" srcSet="/static/f2e9c6763054bac69e4ef35880699b28/59521/fs-disabled.webp 33w,/static/f2e9c6763054bac69e4ef35880699b28/77535/fs-disabled.webp 65w,/static/f2e9c6763054bac69e4ef35880699b28/53b05/fs-disabled.webp 130w" sizes="(min-width: 130px) 130px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 130px) 130px, 100vw" decoding="async" loading="lazy" src="/static/f2e9c6763054bac69e4ef35880699b28/53c24/fs-disabled.png" srcSet="/static/f2e9c6763054bac69e4ef35880699b28/37c84/fs-disabled.png 33w,/static/f2e9c6763054bac69e4ef35880699b28/77331/fs-disabled.png 65w,/static/f2e9c6763054bac69e4ef35880699b28/53c24/fs-disabled.png 130w" alt="Fullscreen unavailable"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><span class="BlogImage__ImageDesc-sc-1kim4hz-1 iKptIg">Fullscreen unavailable</span></div><h2 id="notable-changes" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-1-and-6-11-autoplay-and-fullscreen-changes/#notable-changes"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Notable Changes</h2><ul><li>Make audio tracks that are of "main-desc" kind show up with an Audio Description icon</li><li>Run our CSS through autoprefixer which reduces the output size a bit.</li><li>Make the mute toggle show up if muting is possible even if changing volume programmatically isn't. For example, on iOS.</li><li>Make <code class="language-text">setSource</code> be option for middleware.</li></ul><h2 id="thanks" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-1-and-6-11-autoplay-and-fullscreen-changes/#thanks"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Thanks</h2><p>I'd like to thank everyone that contributed to this release!</p><ul><li><a href="https://github.com/DoomTay" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@DoomTay</a></li><li><a href="https://github.com/ayamamori" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@ayamamori</a></li><li><a href="https://github.com/edoardocavazza" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@edoardocavazza</a></li><li><a href="https://github.com/PrincipeSayan" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@PrincipeSayan</a></li><li><a href="https://github.com/bcdarius" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@bcdarius</a></li><li><a href="https://github.com/BrandonOCasey" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@BrandonOCasey</a></li><li><a href="https://github.com/OwenEdwards" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@OwenEdwards</a></li><li><a href="https://github.com/practual" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@practual</a></li><li><a href="https://github.com/Demivan" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">@Demivan</a></li></ul></div></div></article><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gkatsev.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/gkatsev" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/gkatsev.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Gary Katsevman</span><span>2018-05-11</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/video-js-7-is-here/"><h1>Video.js 7 is here! 🎉</h1></a><div class="BlogImage__Wrapper-sc-1kim4hz-0 bpHbQg"><div data-gatsby-image-wrapper="" style="margin:0 auto;max-width:141px" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:141px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='60' width='141' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/2915f124be174cbc0ec6fea398c128dd/e190c/vjs%207%20small.webp 35w,/static/2915f124be174cbc0ec6fea398c128dd/46e34/vjs%207%20small.webp 71w,/static/2915f124be174cbc0ec6fea398c128dd/a4233/vjs%207%20small.webp 141w" sizes="(min-width: 141px) 141px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 141px) 141px, 100vw" decoding="async" loading="lazy" data-src="/static/2915f124be174cbc0ec6fea398c128dd/e849c/vjs%207%20small.png" data-srcset="/static/2915f124be174cbc0ec6fea398c128dd/2a634/vjs%207%20small.png 35w,/static/2915f124be174cbc0ec6fea398c128dd/42891/vjs%207%20small.png 71w,/static/2915f124be174cbc0ec6fea398c128dd/e849c/vjs%207%20small.png 141w" alt=""/></picture><noscript><picture><source type="image/webp" srcSet="/static/2915f124be174cbc0ec6fea398c128dd/e190c/vjs%207%20small.webp 35w,/static/2915f124be174cbc0ec6fea398c128dd/46e34/vjs%207%20small.webp 71w,/static/2915f124be174cbc0ec6fea398c128dd/a4233/vjs%207%20small.webp 141w" sizes="(min-width: 141px) 141px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 141px) 141px, 100vw" decoding="async" loading="lazy" src="/static/2915f124be174cbc0ec6fea398c128dd/e849c/vjs%207%20small.png" srcSet="/static/2915f124be174cbc0ec6fea398c128dd/2a634/vjs%207%20small.png 35w,/static/2915f124be174cbc0ec6fea398c128dd/42891/vjs%207%20small.png 71w,/static/2915f124be174cbc0ec6fea398c128dd/e849c/vjs%207%20small.png 141w" alt=""/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div></div><p>I'm happy to announce that Video.js 7 is now out! It brings to Video.js support for HLS and experimental DASH support via the <a href="https://github.com/videojs/http-streaming" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Video.js HTTP Streaming (VHS)</a> project. Video.js 7 also drops support for some older Internet Explorer browsers only keeping support for IE11.</p><p>While it's out, it's still in pre-release for a short while and only available under the <code class="language-text">next</code> tag on npm. Some time next week, we'll flip the switch and make it latest.</p><div class="BlogImage__Wrapper-sc-1kim4hz-0 bpHbQg"><div data-gatsby-image-wrapper="" style="margin:0 auto;max-width:338px" class="gatsby-image-wrapper gatsby-image-wrapper-constrained"><div style="max-width:338px;display:block"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;charset=utf-8,%3Csvg height='68' width='338' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E" style="max-width:100%;display:block;position:static"/></div><div aria-hidden="true" data-placeholder-image="" style="opacity:1;transition:opacity 500ms linear;background-color:#f8f8f8;position:absolute;top:0;left:0;bottom:0;right:0"></div><picture><source type="image/webp" data-srcset="/static/393aeb6a08891a1dd4195c5c2eb39ff7/d263f/changes.webp 85w,/static/393aeb6a08891a1dd4195c5c2eb39ff7/d9a2c/changes.webp 169w,/static/393aeb6a08891a1dd4195c5c2eb39ff7/5d442/changes.webp 338w" sizes="(min-width: 338px) 338px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 338px) 338px, 100vw" decoding="async" loading="lazy" data-src="/static/393aeb6a08891a1dd4195c5c2eb39ff7/a6e27/changes.png" data-srcset="/static/393aeb6a08891a1dd4195c5c2eb39ff7/95b01/changes.png 85w,/static/393aeb6a08891a1dd4195c5c2eb39ff7/deca5/changes.png 169w,/static/393aeb6a08891a1dd4195c5c2eb39ff7/a6e27/changes.png 338w" alt="changes for removing IE8 code"/></picture><noscript><picture><source type="image/webp" srcSet="/static/393aeb6a08891a1dd4195c5c2eb39ff7/d263f/changes.webp 85w,/static/393aeb6a08891a1dd4195c5c2eb39ff7/d9a2c/changes.webp 169w,/static/393aeb6a08891a1dd4195c5c2eb39ff7/5d442/changes.webp 338w" sizes="(min-width: 338px) 338px, 100vw"/><img data-gatsby-image-ssr="" data-main-image="" style="opacity:0" sizes="(min-width: 338px) 338px, 100vw" decoding="async" loading="lazy" src="/static/393aeb6a08891a1dd4195c5c2eb39ff7/a6e27/changes.png" srcSet="/static/393aeb6a08891a1dd4195c5c2eb39ff7/95b01/changes.png 85w,/static/393aeb6a08891a1dd4195c5c2eb39ff7/deca5/changes.png 169w,/static/393aeb6a08891a1dd4195c5c2eb39ff7/a6e27/changes.png 338w" alt="changes for removing IE8 code"/></picture></noscript><script type="module">const t="undefined"!=typeof HTMLImageElement&&"loading"in HTMLImageElement.prototype;if(t){const t=document.querySelectorAll("img[data-main-image]");for(let e of t){e.dataset.src&&(e.setAttribute("src",e.dataset.src),e.removeAttribute("data-src")),e.dataset.srcset&&(e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset"));const t=e.parentNode.querySelectorAll("source[data-srcset]");for(let e of t)e.setAttribute("srcset",e.dataset.srcset),e.removeAttribute("data-srcset");e.complete&&(e.style.opacity=1,e.parentNode.parentNode.querySelector("[data-placeholder-image]").style.opacity=0)}}</script></div><span class="BlogImage__ImageDesc-sc-1kim4hz-1 iKptIg">changes for removing IE8 code</span></div><p>This release is pretty exciting because it means we were able to <a href="https://github.com/videojs/video.js/pull/5041" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">remove a bunch of code</a> for old browsers and we can now start using newer web platform features that we had previously been avoiding like the <code class="language-text">:not()</code> css selector. It'll also free us to look forward at new features and not be held back by needing to support old browsers like IE8.</p><h2 id="getting-videojs-7" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-is-here/#getting-videojs-7"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Getting Video.js 7</h2><p>You can get it from npm via</p><div class="gatsby-highlight" data-language="shell-session"><pre class="language-shell-session"><code class="language-shell-session"><span class="token output">npm install video.js@next</span></code></pre></div><p>or</p><div class="gatsby-highlight" data-language="shell-session"><pre class="language-shell-session"><code class="language-shell-session"><span class="token output">npm install video.js@7.0.0</span></code></pre></div><p>From <a href="https://github.com/videojs/video.js/releases/tag/v7.0.0" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">GitHub Releases</a>,</p><p>Or from our or another CDN</p><div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">https://vjs.zencdn.net/7.0.0/video.min.js https://vjs.zencdn.net/7.0.0/video-js.css</code></pre></div><div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">https://unpkg.com/video.js@7.0.0/dist/video.min.js https://unpkg.com/video.js@7.0.0/dist/video-js.css</code></pre></div><div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/video.min.js https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/video-js.css</code></pre></div><h2 id="vhs-and-videojs" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-is-here/#vhs-and-videojs"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>VHS and Video.js</h2><p>Video.js will be bundling VHS by default for ease of use for new users. However, some people don't want VHS or are using another plugin. For this, we have a separate build of Video.js which doesn't include VHS.</p><p>You can get it from our CDN or another CDN</p><div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">https://vjs.zencdn.net/7.0.0/alt/video.core.min.js</code></pre></div><div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">https://unpkg.com/video.js@7.0.0/dist/alt/video.core.min.js</code></pre></div><div class="gatsby-highlight" data-language="text"><pre class="language-text"><code class="language-text">https://cdnjs.cloudflare.com/ajax/libs/video.js/7.0.0/alt/video.core.min.js</code></pre></div><p>Finally, expect a more detailed post about VHS in the weeks to come.</p><h2 id="what-the-future-holds" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-is-here/#what-the-future-holds"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>What the future holds</h2><p>Video.js hasn't really had a roadmap for a long time. With this release, we think it's time to take a step back and create a roadmap.</p><p>The roadmap will take into account currently open issues and internal and external feature requests. In addition, we're going to look at currently available features and see if it's worth refactoring them with the more modern web in-mind.</p><p>Later down the line, we'd also want to make a roadmap for a Video.js 8. Given that this release only adds VHS and removes old browsers, there're plenty of already deprecated features that it's time to remove.</p><h2 id="updates-from-the-videojs-7-roadmap" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-is-here/#updates-from-the-videojs-7-roadmap"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Updates from the <a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/video-js-7-roadmap">Video.js 7 roadmap</a></h2><h3 id="videojs-5x" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-is-here/#videojs-5x"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Video.js 5.x</h3><p>As of this release, Video.js 5.x is now officially deprecated. This means that we will no longer work on it or back-port fixes to it but it's still available for usage if you're still using it. We do urge you to update to the latest 5.x, or better yet, upgrade to 6.x or 7.</p><h3 id="build-tools" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-is-here/#build-tools"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Build Tools</h3><p>In the <a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/video-js-7-roadmap">roadmap</a> post, we talked about potentially switching to webpack from Rollup for better support of importing VHS into Video.js. However, while doing <a href="https://github.com/videojs/video.js/pull/5033" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">this work</a>, we found out that the filesize of Video.js will increase by about 20%, which isn't a trivial amount, not to mention that the filesize is already going to increase from the default inclusion of VHS.</p><p>Eventually, after much work, we were able to figure out how to bundle VHS using Rollup as well and we are continuing to use Rollup for our builds.</p><h3 id="google-analytics" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/video-js-7-is-here/#google-analytics"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Google Analytics</h3><p>Video.js 7's CDN builds will no longer send any data to Google Analytics via our stripped down pixel tracking.</p><p>Video.js 6 and below CDN builds will continue sending data, unless you opt out with <code class="language-text">window.HELP_IMPROVE_VIDEOJS = false</code>, but versions 6.8 and above will honor the Do Not Track option that users can set in their headers before sending the data.</p><p>We are continuing to investigate our options for collecting our CDN logs in an open manner and will post updates when we have any.</p></div></div></article><article class="BlogPost__Wrapper-sc-116uwsw-0 jGYMEc"><div class="BlogPost__AvatarCol-sc-116uwsw-1 VObrg"><a href="https://github.com/misteroneill" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/misteroneill.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a></div><div class="BlogPost__TextCol-sc-116uwsw-3 eilTsm"><div class="BlogPost__Meta-sc-116uwsw-4 iAkloW"><a href="https://github.com/misteroneill" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="https://github.com/misteroneill.png?size=50" class="BlogPost__Avatar-sc-116uwsw-2 dbpuaS"/></a><span>Pat O'Neill</span><span>2018-04-17</span></div><div class="BlogPost__Article-sc-116uwsw-5 eddbxE"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 BlogPost__TitleLink-sc-116uwsw-6 iHtQlw jLmtDO" href="/blog/autoplay-best-practices-with-video-js/"><h1>Autoplay Best Practices with Video.js</h1></a><h2 id="tldr" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#tldr"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>tl;dr</h2><ul><li>Never assume autoplay will work.</li><li>Using the <code class="language-text">muted</code> attribute/option will improve the chances that autoplay will succeed.</li><li>Prefer programmatic autoplay via the <code class="language-text">player.play()</code> method, avoiding the <code class="language-text">autoplay</code> attribute/option.</li></ul><h2 id="introduction" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#introduction"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Introduction</h2><p>There has been a lot of chatter about autoplay lately and we wanted to take a few minutes to share some best practices when using autoplay with Video.js.</p><p>This post is meant to be a source of information - not an editorial or positional statement on autoplaying video. A lot of users hate autoplay because it's annoying or it consumes precious bandwidth. And a lot of publishers providing content free of charge rely on autoplay for the preroll ads that finance their businesses. Browser vendors (and open source library authors) have to weigh these concerns based on the interests of their users, publishers across the web, and their own business. And users have to choose the browser that best reflects their preferences.</p><p>This post is not about ways to circumvent autoplay policies. That's not possible and no one should waste their time attempting it. We think it's uncontroversial to say that actively circumventing the browser's built-in user experience or user preferences is harmful.</p><h2 id="autoplay-policies-in-the-big-browsers" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#autoplay-policies-in-the-big-browsers"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Autoplay Policies in the Big Browsers</h2><p>I'm not going to go into exhaustive detail on each browser's specific algorithms because they are subject to change and it would defeat the core point of this post: <strong>never assume autoplay will work.</strong></p><h3 id="safari" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#safari"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Safari</h3><p>As of Safari 11, which shipped in September 2017, Apple has <a href="https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">updated their autoplay policies</a> to prevent autoplay with sound on most websites.</p><h3 id="chrome" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#chrome"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Chrome</h3><p>Back in September 2017, Google announced that <a href="https://developers.google.com/web/updates/2017/09/autoplay-policy-changes" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Chrome's autoplay policy would change in April 2018 with Chrome 66</a>, subject to a series of rules you can read about in the linked article.</p><h3 id="firefox" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#firefox"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Firefox</h3><p>With Firefox, Mozilla has taken the position of not having a firm autoplay policy for the time being. That may change in the future. That said, Firefox today <a href="https://support.mozilla.org/en-US/questions/1150702" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">does allow users to disable autoplay</a> with a few configuration changes.</p><h3 id="ie11-and-edge" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#ie11-and-edge"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>IE11 and Edge</h3><p>Microsoft's browsers have no specific/known autoplay policy - at the time of writing, autoplay just works in IE11 and Edge.</p><h2 id="refresher-on-how-to-request-autoplay-in-videojs" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#refresher-on-how-to-request-autoplay-in-videojs"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Refresher on How to Request Autoplay in Video.js</h2><p>Note how the title of this section uses the word "request." That's intentional because it should be thought of as a request. Remember, <strong>never assume autoplay will work.</strong></p><p>One of Video.js' strengths is that it is designed around the native <code class="language-text"><video></code> element interface; so, it will defer to the underlying playback technology (in most cases, HTML5 video) and the browser. In other words, <em>if the browser allows it, Video.js allows it</em>.</p><p>There are two ways to enable autoplay when using Video.js:</p><ol><li><p>Use the <code class="language-text">autoplay</code> attribute on either the <code class="language-text"><video></code> element or the new <code class="language-text"><video-js></code> element.</p><div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://path/to/source.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video-js</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://path/to/source.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video-js</span><span class="token punctuation">></span></span></code></pre></div></li><li><p>Use the <code class="language-text">autoplay</code> option:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token function">videojs</span><span class="token punctuation">(</span><span class="token string">'player'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token literal-property property">autoplay</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div></li></ol><h2 id="recommended-practices" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#recommended-practices"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Recommended Practices</h2><p>By default, you can defer to the default behavior in Video.js. If autoplay succeeds, the Video.js player will begin playing. If autoplay fails, the Video.js player will behave as if autoplay were off - i.e. it will display the "big play button" component over the poster image (or a black box).</p><p>If that works for you, your job is done!</p><p><strong>TIP:</strong> If you want to use autoplay and improve the chances of it working, use the <code class="language-text">muted</code> attribute (or the <code class="language-text">muted</code> option, with Video.js).</p><p>Beyond that, there are some general practices that may be useful when dealing with autoplay: detecting whether autoplay is supported at all, or detecting whether autoplay succeeds or fails.</p><h3 id="detecting-autoplay-support" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#detecting-autoplay-support"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Detecting Autoplay Support</h3><p>Similar to detecting successful or failed autoplay requests, it may be useful to perform autoplay feature detection on the browser before creating a player at all. In these cases, the <a href="https://github.com/video-dev/can-autoplay" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">can-autoplay</a> library is the best solution. It provides a similar <code class="language-text">Promise</code>-based API to the native <code class="language-text">player.play()</code> method:</p><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js">canAutoplay<span class="token punctuation">.</span><span class="token function">video</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">obj</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>obj<span class="token punctuation">.</span>result <span class="token operator">===</span> <span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Can autoplay</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// Can not autoplay</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><h3 id="programmatic-autoplay-and-successfailure-detection" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#programmatic-autoplay-and-successfailure-detection"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Programmatic Autoplay and Success/Failure Detection</h3><p>For those who care whether or not an autoplay request was successful, both Google and Apple have recommended the same practice for detecting autoplay success or rejection: listen to the <code class="language-text">Promise</code> returned by the <code class="language-text">player.play()</code> method (in browsers that support it) to determine if autoplay was successful or not.</p><p>This can be coupled with the <code class="language-text">autoplay</code> attribute/option or performed programmatically by calling <code class="language-text">player.play()</code>, but <strong>we recommend avoiding the <code class="language-text">autoplay</code> attribute/option altogether and requesting autoplay programmatically</strong>:</p><div class="gatsby-highlight" data-language="html"><pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video-js</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>player<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://path/to/source.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video-js</span><span class="token punctuation">></span></span></code></pre></div><div class="gatsby-highlight" data-language="js"><pre class="language-js"><code class="language-js"><span class="token keyword">var</span> player <span class="token operator">=</span> <span class="token function">videojs</span><span class="token punctuation">(</span><span class="token string">'player'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> player<span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> promise <span class="token operator">=</span> player<span class="token punctuation">.</span><span class="token function">play</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>promise <span class="token operator">!==</span> <span class="token keyword">undefined</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> promise<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Autoplay started!</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">error</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Autoplay was prevented.</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div><p><strong>NOTE:</strong> It's important to understand that using this approach, the Video.js <code class="language-text">player.autoplay()</code> method will return <code class="language-text">undefined</code> or <code class="language-text">false</code>. If you expect your users or integrators to rely on this method, consider the following section.</p><h4 id="programmatic-autoplay-with-the-autoplay-attributeoption" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#programmatic-autoplay-with-the-autoplay-attributeoption"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Programmatic Autoplay with the <code class="language-text">autoplay</code> Attribute/Option</h4><p>When building a player for others to use, you may not always have control over whether your users include the <code class="language-text">autoplay</code> attribute/option on their instance of your player. Thankfully, combining this with programmatic autoplay doesn't seem to have a significant effect on the behavior of playback.</p><p>Based on our experimentation, even if the browser handles the actual autoplay operation, calling <code class="language-text">player.play()</code> after it's begun playing (or failed to play) does not seem to cause current browsers to trigger an extra <code class="language-text">"play"</code> event in either Chrome or Firefox. It does seem that Safari 11.1 triggers <code class="language-text">"playing"</code> and <code class="language-text">"pause"</code> events each time <code class="language-text">player.play()</code> is called and autoplay fails.</p><p>Still, if you have full control, <strong>we recommend avoiding the <code class="language-text">autoplay</code> attribute/option altogether and requesting autoplay programmatically</strong>.</p><p><strong>NOTE:</strong> Even if using the <code class="language-text">autoplay</code> attribute/option <em>with</em> programmatic autoplay, the <code class="language-text">player.autoplay()</code> method will return <code class="language-text">undefined</code> until the player is ready.</p><h4 id="example-use-case" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#example-use-case"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example Use-Case</h4><p>At Brightcove, one thing we've done to improve the user experience of our Video.js-based player is to hide the "big play button" for players requesting autoplay until the autoplay either succeeds or fails. This prevents a periodic situation where the "big play button" flashes on the player for a moment before autoplay kicks in.</p><p>While our actual implementation has more complexity due to specific circumstances with our player, the gist of it is the same as <a href="https://jsbin.com/quqodek/edit?html,js,output" target="_blank" rel="noopener noreferrer" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">this functional JSBin demonstration.</a></p><h2 id="conclusion" class="WithMdxComponents__StyledHeader-sc-15bb0ke-2 gCpiSR"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 WithMdxComponents__StyledLink-sc-15bb0ke-1 iHtQlw kFcqlD" href="/blog/autoplay-best-practices-with-video-js/#conclusion"><svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16" class="WithMdxComponents__StyledLinkIcon-sc-15bb0ke-0 jWmtLN"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Conclusion</h2><p>There may be decision points in your code related to whether autoplay succeeds or not; however, the practical reality is that all the paragraphs before this boil down to a single, essential concept:</p><p><strong>Never assume that your request to autoplay will succeed.</strong></p><p>Keep that in mind and you're golden. Even if the browsers stop allowing autoplay entirely, our hope is that recommending this approach will be somewhat future-proof.</p></div></div></article><div class="BlogListTemplate__BottomPanels-sc-vbmrc-0 iluZIc"><div class="BlogSidebarBlock__Wrapper-sc-jnb1j7-0 gJurmY"><h4 class="BlogSidebarBlock__Heading-sc-jnb1j7-1 hdATpU">Tags</h4><div class="BlogSidebarBlock__Links-sc-jnb1j7-2 hgkMgI"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/608">608</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/a11y">a11y</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/bugs">bugs</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/captions">captions</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/cea-608">cea-608</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/focus-visible">focus-visible</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/tags/http-streaming">http-streaming</a></div></div><div class="BlogSidebarBlock__Wrapper-sc-jnb1j7-0 gJurmY"><h4 class="BlogSidebarBlock__Heading-sc-jnb1j7-1 hdATpU">Recent Posts</h4><div class="BlogSidebarBlock__Links-sc-jnb1j7-2 hgkMgI"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/videojs-8-and-vhs-3/">Video.js 8 and Video.js HTTP Streaming 3</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/announcing-the-new-videojs-com/">Announcing the new Videojs.com</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/inband-captions-support-with-vhs/">In-band Captions Support with videojs-http-streaming</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/video-js-7-4/">Video.js 7.4</a><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog/bugpost-disconnects-and-reconnects/">Bugpost: Disconnects and Reconnects</a></div></div></div><div class="BlogPagination__BlogPaginationWrapper-sc-ncbmfd-0 hiIPQs"><button disabled="" class="BlogPagination__StyledBlogPaginationButton-sc-ncbmfd-1 eXfgBI"><span class="BlogPagination__Arrow-sc-ncbmfd-2 epwwEo">< </span><span>Prev page</span></button><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw BlogPagination__StyledBlogPaginationButton-sc-ncbmfd-1 eXfgBI" href="/blog/2"><span>Next page</span><span class="BlogPagination__Arrow-sc-ncbmfd-2 epwwEo"> ></span></a></div></div></div></main><footer class="Footer__Wrapper-sc-1ww42aw-0 lmfKIr"><div class="Footer__VideoJsLogoWrapper-sc-1ww42aw-1 ifAuit"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/"><img src="/static/42d8f872f22e8519211292ea3ede0aa1/logo-black.svg" alt="Video.js logo" loading="lazy"/></a></div><ul class="Footer__Nav-sc-1ww42aw-2 bIwkhf"><li class="Footer__NavItem-sc-1ww42aw-3 brqRjf"><a class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/getting-started">Get Started</a></li><li class="Footer__NavItem-sc-1ww42aw-3 brqRjf"><a href="/guides" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Guides</a></li><li class="Footer__NavItem-sc-1ww42aw-3 brqRjf"><a href="https://docs.videojs.com" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">API Docs</a></li><li class="Footer__NavItem-sc-1ww42aw-3 brqRjf"><a aria-current="page" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw" href="/blog">Blog</a></li><li class="Footer__NavItem-sc-1ww42aw-3 brqRjf"><a href="https://github.com/videojs/video.js" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw">Github</a></li></ul><div class="Footer__Copyright-sc-1ww42aw-4 eNndFa"><p>Video.js is a free and open source HTML5 video player framework.</p><p>© <a href="https://brightcove.com">Brightcove, Inc.</a></p></div><div class="Footer__Logos-sc-1ww42aw-5 dxelYt"><a href="https://twitter.com/@videojs" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="/static/05c745b5bca1db6f2d2cbef33a7cb99c/x-twitter.svg" alt="Twitter logo" loading="lazy"/></a><a href="https://github.com/videojs/video.js" class="Link__StyledLink-sc-wxg1ap-0 hLBjTn Link-sc-wxg1ap-1 iHtQlw"><img src="/static/29ff5853365e8c0e73453298c0277b76/github.svg" alt="Github logo" loading="lazy"/></a></div></footer></div><div id="gatsby-announcer" style="position:absolute;top:0;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0" aria-live="assertive" aria-atomic="true"></div></div><script> function gaOptout(){document.cookie=disableStr+'=true; expires=Thu, 31 Dec 2099 23:59:59 UTC;path=/',window[disableStr]=!0}var gaProperty='UA-16505296-1',disableStr='ga-disable-'+gaProperty;document.cookie.indexOf(disableStr+'=true')>-1&&(window[disableStr]=!0); if(true) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); } if (typeof ga === "function") { ga('create', 'UA-16505296-1', 'auto', {"cookieExpires":0}); ga('set', 'anonymizeIp', true); }</script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/blog";window.___webpackCompilationHash="fc25e55e33f27fec77e9";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-94d34a731f70a0234811.js"],"component---src-pages-404-jsx":["/component---src-pages-404-jsx-b51ef8e674d1b46c2611.js"],"component---src-pages-advanced-jsx":["/component---src-pages-advanced-jsx-d5b30b0cce8a3639e5b2.js"],"component---src-pages-html-5-video-support-jsx":["/component---src-pages-html-5-video-support-jsx-2cd03bb47334e79bad24.js"],"component---src-pages-index-jsx":["/component---src-pages-index-jsx-ed9b6323272427fc6a68.js"],"component---src-pages-plugins-jsx":["/component---src-pages-plugins-jsx-ea2e2e53d7943da00ac5.js"],"component---src-templates-blog-list-template-jsx":["/component---src-templates-blog-list-template-jsx-45fdc30f059db89c98c6.js"],"component---src-templates-blog-post-template-jsx":["/component---src-templates-blog-post-template-jsx-3acc6502a394d2ac2330.js"],"component---src-templates-blog-tag-template-jsx":["/component---src-templates-blog-tag-template-jsx-4a2d1633cad8fe4e1409.js"],"component---src-templates-getting-started-template-jsx":["/component---src-templates-getting-started-template-jsx-5dc38b46977297534b8c.js"],"component---src-templates-guides-list-template-jsx":["/component---src-templates-guides-list-template-jsx-abcfc28666741ce73f21.js"],"component---src-templates-guides-view-template-jsx":["/component---src-templates-guides-view-template-jsx-bebd4f38169921dffcb7.js"],"component---src-templates-home-template-jsx":[]};/*]]>*/</script><script src="/app-94d34a731f70a0234811.js" async=""></script><script src="/d6e1aeb5-2aa915d783db5c5249fd.js" async=""></script><script src="/440a44a5-ec9ffc16b58226e612eb.js" async=""></script><script src="/framework-e722c55ef05f1276dcec.js" async=""></script><script src="/webpack-runtime-9f96607c142c7964399b.js" async=""></script></body></html>