movie_0037 - Embed

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <title>movie_0037 - Embed</title> <meta name="description" content="Watch this embedded Streamable video."> <link rel="shortcut icon" href="//statics.streamable.com/static/favicon.ico"> <link rel="canonical" href="https://streamable.com/us2w7h" /> <link href="//statics.streamable.com/fonts/OpenSansLocal.css" rel="stylesheet"> <style>.player { color: white; position: relative; outline: 0; overflow: hidden; } .player .stm-ad-player { position: absolute !important; left: 0px !important; top: 0px !important; right: 0px !important; bottom: 0px !important; width: 100% !important; height: 100% !important; z-index: 999999; } .player video { vertical-align: middle; width: 100%; height: 100%; object-fit: fill; position: absolute; left: 0; top: 0; } .player video::-webkit-media-controls-play-button, .player video::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; } .player #ad-overlay { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.3); } .player .revcontent-container { margin: 14px 0px 0px 0px; background-color: white; height: 164px; position: relative; padding: 5px; width: 90%; max-height: 80%; } .player .revcontent-container .rc-wc .row-item h3 { min-height: 24px !important; } .player .revcontent-container .revcontent-disclaimer { position: relative; text-decoration: none; /* display: block; */ color: white; font-size: 10px; top: -15px; font-family: Open Sans; -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); /* Same syntax as box-shadow */ } .player .revcontent-close { font-size: 12px; text-align: right; position: absolute; top: -18px; right: 0px; margin: 0px; border: none; padding: 2px 5px; background-color: #fff; color: #000; z-index: 10000; } .player .polymorph-container { margin: 20px 0px 0px 0px; background-color: #020304; position: relative; padding: 5px; width: 85%; max-height: 80%; } .player .polymorph-container .polymorph-disclaimer { position: relative; text-decoration: none; /* display: block; */ color: white; font-size: 11px; top: -15px; font-family: Open Sans; -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); /* Same syntax as box-shadow */ } .player .polymorph-close { font-size: 18px; text-align: right; position: absolute; border: none; top: -35px; right: -15px; margin: 0px; background-clip: content-box; background-color: #020304; color: white; z-index: 10000; padding: 15px; } .player #ad-overlay-loading { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; } .player #ad-overlay-loading #ad-overlay-spinner { font-size: 10px; margin: 10px auto; text-indent: -9999em; width: 7em; height: 7em; border-radius: 50%; background: #ffffff; background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%); background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%); position: relative; -webkit-animation: load3 1.4s infinite linear; animation: load3 1.4s infinite linear; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } .player #ad-overlay-loading #ad-overlay-spinner:before { width: 50%; height: 50%; background: #ffffff; border-radius: 100% 0 0 0; position: absolute; top: 0; left: 0; content: ''; } .player #ad-overlay-loading #ad-overlay-spinner:after { background: white; width: 75%; height: 75%; border-radius: 50%; content: ''; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } @-webkit-keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes load3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .player #spinner, .player #spinner:before, .player #spinner:after { background: inherit; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .player #spinner:before, .player #spinner:after { position: absolute; top: 0; content: ''; } .player #spinner:before { left: -1.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .player #spinner { display: none; opacity: .8; text-indent: -9999em; margin: 8em auto; font-size: 4px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s; position: absolute; top: -10px; right: 22px; z-index: 4; } .player #spinner:after { left: 1.5em; } @-webkit-keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 3em; } 40% { box-shadow: 0 -2em; height: 4em; } } @keyframes load1 { 0%, 80%, 100% { box-shadow: 0 0; height: 3em; } 40% { box-shadow: 0 -2em; height: 4em; } } .player #player-overlay-mute-button { padding: 5px; display: inline-block; text-align: left; } .player #player-overlay-mute-button .overlay-volume-mute { display: none; position: relative; top: 1px; left: -3px; } .player #player-overlay-mute-button .overlay-volume-up { position: relative; top: 1px; left: 4px; } .player #player-overlay-mute-button.muted .overlay-volume-up { display: none; } .player #player-overlay-mute-button.muted .overlay-volume-mute { display: block; } .player .player-controls { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; opacity: 0; position: absolute; text-align: left; visibility: hidden; } .player #player-controls-header { height: 40px; right: 0; top: 0; left: 0; } .player #player-controls-mobile { height: 40px; right: 0; top: 0; left: 0; pointer-events: none; } .player #player-controls-mobile #player-settings-button-mobile { z-index: 1; height: 20px; width: 20px; position: absolute; right: 0px; top: 0px; padding: 10px; pointer-events: auto; } .player #player-controls-mobile #player-settings-button-mobile svg { -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); } .player #player-settings-overlay-mobile { display: none; position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.9); font-size: 20px; padding: 10px; } .player #player-settings-overlay-mobile #player-settings-button-mobile-close { position: absolute; height: 20px; width: 20px; right: 5px; top: 2px; padding: 10px; } .player #player-settings-overlay-mobile #player-settings-quality-mobile-header { padding: 10px 0px; font-family: 'Open Sans', Helvetica, sans-serif; font-size: 20px; text-align: center; line-height: 1.1em; } .player #player-settings-overlay-mobile .player-settings-quality-option-mobile { width: 120px; margin: 5px auto; text-align: left; font-family: 'Open Sans', Helvetica, sans-serif; font-size: 20px; line-height: 1.1em; } .player #player-settings-overlay-mobile .quality-hd-icon { font-size: 14px; } .player #player-settings-overlay-mobile .player-settings-mobile-checkbox { border-radius: 20px; height: 20px; width: 20px; display: inline-block; border: 1px solid white; position: relative; top: 4px; left: -10px; } .player #player-settings-overlay-mobile .player-settings-mobile-checkbox-inner { position: absolute; top: 1px; left: 1px; border-radius: 20px; height: 18px; width: 18px; display: inline-block; background: #0f90fa; display: none; } .player #player-settings-overlay-mobile .checked .player-settings-mobile-checkbox-inner { display: block; } .player #player-controls-footer { height: 98px; right: 0; bottom: 0; left: 0; pointer-events: none; background-position: bottom; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); background-repeat: repeat-x; } .player #player-controls-footer * { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; pointer-events: auto; } .player #player-controls-footer #player-progress { position: absolute; right: 12px; left: 12px; cursor: pointer; bottom: 40px; padding: 10px 0px; } .player #player-controls-footer #player-progress div { height: 4px; transition: transform 0.15s ease, -webkit-transform 0.15s ease; } .player #player-controls-footer #player-progress #player-progress-hover { line-height: 0; opacity: 0; position: absolute; top: -10px; -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); /* Same syntax as box-shadow */ width: 100px; font-family: 'Open Sans', Helvetica, sans-serif; font-size: 14px; transition: opacity .15s ease; font-weight: 600; } .player #player-controls-footer #player-progress #player-progress-track { position: absolute; left: 0px; width: 100%; opacity: .3; border-radius: 2px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); } .player #player-controls-footer #player-progress #player-progress-value { position: absolute; left: 0px; border-radius: 2px 0px 0px 2px; width: 0px; opacity: .7; } .player #player-controls-footer #player-progress #player-progress-value-hover { position: absolute; left: 0px; border-radius: 2px 0px 0px 2px; width: 0px; transition: opacity .3s; opacity: 0.4; } .player #player-controls-footer #player-progress:hover #player-progress-value, .player #player-controls-footer #player-progress:hover #player-progress-track, .player #player-controls-footer #player-progress:hover #player-progress-value-hover { transform: scaleY(1.4); } .player #player-controls-footer #player-settings-overlay { display: none; position: absolute; right: 15px; bottom: 44px; width: 120px; border-radius: 3px; background: rgba(0, 0, 0, 0.8); color: white; font-size: 12px; font-family: 'Open Sans', Helvetica, sans-serif; padding-bottom: 10px; line-height: 17.16px; } .player #player-controls-footer #player-settings-quality-header { border-bottom: 1px solid #444; font-weight: 600; padding: 8px 10px; opacity: .9; text-align: center; line-height: 17.16px; } .player #player-controls-footer .player-settings-quality-option { font-weight: 600; cursor: pointer; opacity: .9; line-height: 17.16px; padding: 7px 10px 0px 10px; } .player #player-controls-footer .player-settings-quality-option svg { visibility: hidden; position: relative; top: 4px; margin-right: 10px; } .player #player-controls-footer .player-settings-quality-option:hover { color: white; opacity: 1; } .player #player-controls-footer .player-settings-quality-option.checked svg { visibility: visible; } .player #player-controls-footer #player-settings-button { align-items: center; display: flex; opacity: .9; transition: 0.2s ease-out; transition-property: transform; cursor: pointer; } .player #player-controls-footer #player-settings-button svg { cursor: pointer; -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); /* Same syntax as box-shadow */ } .player #player-controls-footer #player-settings-button:hover { opacity: 1; } .player #player-controls-footer #player-settings-button.open { transform: rotate(20deg); } .player #player-controls-footer #player-fullscreen-button { align-items: center; cursor: pointer; display: flex; line-height: 1; opacity: .9; } .player #player-controls-footer #player-fullscreen-button svg { cursor: pointer; -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); /* Same syntax as box-shadow */ } .player #player-controls-footer #player-fullscreen-button:hover { opacity: 1; } .player #player-controls-footer #player-fullscreen-button svg.compact { display: none; } .player #player-controls-footer #player-play-pause { bottom: 0px; position: absolute; left: 3px; line-height: 0px; filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); /* Same syntax as box-shadow */ opacity: .9; cursor: pointer; /* Important stuff above, everything below is just to normalize and/or show off. */ } .player #player-controls-footer #player-play-pause:hover { opacity: 1; } .player #player-controls-footer #player-play-pause span::before { box-sizing: border-box; height: 18px; width: 0; border: 0 solid transparent; border-left: inherit; transition: border .1s linear; } .player #player-controls-footer #player-play-pause input:checked + span::before { border-width: 9px 0 9px 18px; border-style: solid; } .player #player-controls-footer #player-play-pause label { display: block; position: relative; height: 40px; width: 40px; color: #fff; text-align: center; cursor: pointer; } .player #player-controls-footer #player-play-pause input { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; } .player #player-controls-footer #player-play-pause span { font-size: 0; } .player #player-controls-footer #player-play-pause span::before, .player #player-controls-footer #player-play-pause span::after { font-size: 1rem; } .player #player-controls-footer #player-play-pause span::before { content: ""; position: absolute; left: 50%; top: 18px; margin: -9px 0 0 -9px; } .player #player-controls-footer #player-volume { position: absolute; height: 40px; width: 140px; left: 32px; bottom: 4px; cursor: pointer; line-height: 0; } .player #player-controls-footer #player-volume #player-volume-control { bottom: -2px; position: absolute; left: 45px; transition: opacity .1s; opacity: 0; } .player #player-controls-footer #player-volume #player-volume-track { opacity: .5; bottom: 0px; position: absolute; left: 0px; } .player #player-controls-footer #player-volume #player-volume-value { bottom: 0px; position: absolute; left: 0px; } .player #player-controls-footer #player-volume svg { -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.5)); /* Same syntax as box-shadow */ opacity: .9; } .player #player-controls-footer #player-volume:hover svg { opacity: 1; } .player #player-controls-footer #player-volume:hover #player-volume-control { opacity: 1; } .player #player-controls-footer #player-mute-button { bottom: 4px; position: absolute; left: 13px; line-height: 0px; } .player #player-controls-footer #player-mute-button svg.volume-down { display: none; } .player #player-controls-footer #player-mute-button svg.volume-mute { display: none; } .player #player-controls-footer #player-mute-button.low { left: 9px; } .player #player-controls-footer #player-mute-button.low svg.volume-down { display: block; } .player #player-controls-footer #player-mute-button.low svg.volume-up { display: none; } .player #player-controls-footer #player-mute-button.low svg.volume-mute { display: none; } .player #player-controls-footer #player-mute-button.muted { left: 6px; } .player #player-controls-footer #player-mute-button.muted svg.volume-down { display: none; } .player #player-controls-footer #player-mute-button.muted svg.volume-up { display: none; } .player #player-controls-footer #player-mute-button.muted svg.volume-mute { display: block; } .player #player-controls-footer .player-controls-right { align-items: center; bottom: 0; display: flex; gap: 10px; height: 46px; position: absolute; right: 15px; } .player #player-controls-footer .player-controls-right .player-settings { line-height: 1; } .player #player-controls-footer .player-controls-right .player-streamable-logo-link { align-items: center; display: flex; line-height: 1; max-width: 144px; } .player #player-controls-footer .player-controls-right #player-streamable-logo { color: white; transform: scale(0.85); transform-origin: left; } .player.fullscreen { background-color: black; width: 100%; position: relative; } .player.fullscreen #player-fullscreen-button svg.compact { display: block !important; } .player.fullscreen #player-fullscreen-button svg.expand { display: none; } .player.fullscreen video { height: 100% !important; background-color: black; object-fit: contain; } .player.hide-audio #player-volume { display: none !important; } .watermark { max-height: 120px; max-width: 120px; position: absolute; right: 10px; bottom: 10px; display: inline-block; transition: bottom 0.2s linear, opacity 0.2s linear, right 0.2s linear; opacity: .7; pointer-events: none; visibility: hidden; } .watermark img { max-height: 120px; max-width: 120px; object-fit: contain; } @media (max-width: 400px) { .watermark { bottom: inherit; top: 10px; max-height: 60px; max-width: 60px; } .watermark img { max-height: 60px; max-width: 60px; } } .player.user-activity .player-controls { transition: none; opacity: 1; visibility: visible; } .player.user-activity .watermark { transition: right 0.2s linear; bottom: 50px !important; opacity: 1; } #context-menu { z-index: 999999; display: none; position: absolute; width: 200px; font-family: Helvetica, sans-serif; text-align: left; border-radius: 3px; overflow: hidden; opacity: 0.9; } #context-menu .context-menu-item { text-decoration: none; display: block; cursor: pointer; background-color: rgba(0, 0, 0, 0.9); padding: 4px 10px; color: #ccc; line-height: 1.43em; font-size: 12px; } #context-menu .context-menu-item:hover { color: white; } #context-menu .context-menu-footer { font-size: 10px !important; color: #888; text-align: center; padding: 6px; background-color: #222; } #context-menu .context-menu-footer img { vertical-align: middle; margin-right: 5px; margin-top: -2px; } #context-menu #created { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } #context-menu .separator { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-top: 6px; padding-bottom: 2px; } #context-menu .context-menu-selection-item:hover { color: #ccc; } #context-menu .context-menu-selection-item .context-menu-selection-item-button { color: #ccc; text-decoration: none; float: right; padding: 0px 5px; } #context-menu .context-menu-selection-item .context-menu-selection-item-button:hover { color: white; } #context-menu .context-menu-selection-item .active { font-weight: bold; color: white; } #adBackdrop { position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; visibility: hidden; } #play-overlay { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; cursor: pointer; background-color: black; } #play-overlay #play-background { height: 100%; width: 100%; } #play-overlay #play-button { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; height: 100%; width: 100%; cursor: pointer; -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)) opacity(0.7); filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)) opacity(0.7); transition: filter .25s linear; -webkit-transition: -webkit-filter 0.25s linear; } #play-overlay #play-button:hover { -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)) opacity(1); filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5)) opacity(1); } #play-overlay #play-button .triangle { position: relative; text-align: left; left: -12px; margin: 0px auto; top: 50%; margin-top: -30px; } #play-overlay #play-button .triangle:before, #play-overlay #play-button .triangle:after { content: ''; position: absolute; background-color: inherit; } #play-overlay #play-button .triangle, #play-overlay #play-button .triangle:before, #play-overlay #play-button .triangle:after { width: 40px; height: 40px; border-top-right-radius: 15%; } #play-overlay #play-button .triangle { transform: rotate(-90deg) skewX(-30deg) scale(1, 0.866); } #play-overlay #play-button .triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); } #play-overlay #play-button .triangle:after { transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%); } @media (max-width: 400px) { #play-overlay #play-button { background-size: 40px 40px; } } .player.playing #play-overlay { display: none; } html, body { height: 100%; width: 100%; } body { margin: 0px; } .media-container { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -moz-tap-highlight-color: rgba(255, 255, 255, 0); width: 100vw; max-height: 100vh; margin: auto; position: absolute; top: 0; bottom: 0; /* vertical center */ left: 0; right: 0; /* horizontal center */ overflow: hidden; /* fix weird viewports on embed */ line-height: 0; } #appnext { position: absolute; left: 50%; top: 50%; width: 300px; height: 250px; margin-top: -125px; margin-left: -150px; overflow: hidden; } #appnextiframe { height: 100%; width: 100%; } #appnextoverlay { position: absolute; top: 0px; right: 0px; left: 0px; height: 30px; line-height: 25px; font-family: Open Sans; font-size: 14px; text-align: center; z-index: 999999; background: rgba(0, 0, 0, 0.7); } #appnextclose { font-size: 20px; font-weight: bold; position: relative; top: 2px; left: -6px; } .player { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; } </style> <script id="shared-js" type="text/javascript"> /*! * screenfull * v5.0.2 - 2020-02-13 * (c) Sindre Sorhus; MIT License */ !function(){"use strict";var u="undefined"!=typeof window&&void 0!==window.document?window.document:{},e="undefined"!=typeof module&&module.exports,c=function(){for(var e,n=[["requestFullscreen","exitFullscreen","fullscreenElement","fullscreenEnabled","fullscreenchange","fullscreenerror"],["webkitRequestFullscreen","webkitExitFullscreen","webkitFullscreenElement","webkitFullscreenEnabled","webkitfullscreenchange","webkitfullscreenerror"],["webkitRequestFullScreen","webkitCancelFullScreen","webkitCurrentFullScreenElement","webkitCancelFullScreen","webkitfullscreenchange","webkitfullscreenerror"],["mozRequestFullScreen","mozCancelFullScreen","mozFullScreenElement","mozFullScreenEnabled","mozfullscreenchange","mozfullscreenerror"],["msRequestFullscreen","msExitFullscreen","msFullscreenElement","msFullscreenEnabled","MSFullscreenChange","MSFullscreenError"]],r=0,l=n.length,t={};r<l;r++)if((e=n[r])&&e[1]in u){for(r=0;r<e.length;r++)t[n[0][r]]=e[r];return t}return!1}(),l={change:c.fullscreenchange,error:c.fullscreenerror},n={request:function(t){return new Promise(function(e,n){var r=function(){this.off("change",r),e()}.bind(this);this.on("change",r);var l=(t=t||u.documentElement)[c.requestFullscreen]();l instanceof Promise&&l.then(r).catch(n)}.bind(this))},exit:function(){return new Promise(function(e,n){if(this.isFullscreen){var r=function(){this.off("change",r),e()}.bind(this);this.on("change",r);var l=u[c.exitFullscreen]();l instanceof Promise&&l.then(r).catch(n)}else e()}.bind(this))},toggle:function(e){return this.isFullscreen?this.exit():this.request(e)},onchange:function(e){this.on("change",e)},onerror:function(e){this.on("error",e)},on:function(e,n){var r=l[e];r&&u.addEventListener(r,n,!1)},off:function(e,n){var r=l[e];r&&u.removeEventListener(r,n,!1)},raw:c};c?(Object.defineProperties(n,{isFullscreen:{get:function(){return Boolean(u[c.fullscreenElement])}},element:{enumerable:!0,get:function(){return u[c.fullscreenElement]}},isEnabled:{enumerable:!0,get:function(){return Boolean(u[c.fullscreenEnabled])}}}),e?module.exports=n:window.screenfull=n):e?module.exports={isEnabled:!1}:window.screenfull={isEnabled:!1}}(); function addClass(element, name) { removeClass(element, name); element.setAttribute("class", element.className + " " + name); } function removeClass(element, name) { element.setAttribute("class", element.className.replace(' ' + name, '').replace(name, '')); } function parseURL(url) { if (!url) { return null; } var a=document.createElement('a'); a.href=url; return a.hostname; } function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0;i<vars.length;i++) { var pair = vars[i].split("="); if(pair[0] == variable){return pair[1];} } return(false); } function setCookie(cname, cvalue) { // delete old cookies document.cookie = cname + "=;max-age=0;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/e"; document.cookie = cname + "=;max-age=0;expires=Thu, 01 Jan 1970 00:00:00 UTC;"; document.cookie = cname + "=;max-age=0;expires=Thu, 01 Jan 1970 00:00:00 UTC;"; var cookie = cname + "=" + cvalue + ";expires=Sun, 1 Apr 2069 00:00:00 GMT;path=/" cookie = cookie + ";domain=.streamable.com" document.cookie = cookie; } function getCookie(cname) { try { if (!document.cookie) { return null } } catch(e) { return null } var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) == 0) return c.substring(name.length,c.length); } return ""; } var debugLog = ""; function log(message) { if (typeof console == "object") { console.log(message); debugLog = debugLog + message + "\n"; } } function findElPosition(el) { var box; if (el.getBoundingClientRect && el.parentNode) { box = el.getBoundingClientRect(); } if (!box) { return { left: 0, top: 0 }; } var docEl = document.documentElement; var body = document.body; var clientLeft = docEl.clientLeft || body.clientLeft || 0; var scrollLeft = window.pageXOffset || body.scrollLeft; var left = box.left + scrollLeft - clientLeft; var clientTop = docEl.clientTop || body.clientTop || 0; var scrollTop = window.pageYOffset || body.scrollTop; var top = box.top + scrollTop - clientTop; // Android sometimes returns slightly off decimal values, so need to round return { left: Math.round(left), top: Math.round(top) }; } function getPointerPosition(el, e) { var position = {}; var box = findElPosition(el); var boxW = el.offsetWidth; var boxH = el.offsetHeight; var boxY = box.top; var boxX = box.left; var pageY = e.pageY; var pageX = e.pageX; if (e.changedTouches) { pageX = e.changedTouches[0].pageX; pageY = e.changedTouches[0].pageY; } position.y = Math.max(0, Math.min(1, ((boxY - pageY) + boxH) / boxH)); position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW)); return position; } function calculateDistance(e, elem, vertical) { var position = getPointerPosition(elem, e); if (vertical) { return position.y; } return position.x; } function isMobile() { if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { return true; } return false; } function isAndroid() { if( /Android/i.test(navigator.userAgent) ) { return true; } return false; } function getPageURL() { if (top !== self) { if (document.referrer) { return document.referrer } const ancestors = window.location.ancestorOrigins if (ancestors) { return ancestors[ancestors.length - 1] } return '' } else { return window.location.href } } // set up session var session = getCookie('session'); window.STM_TRANSPORT = window.STM_TRANSPORT || [] window.STM_PRELOADED_SOCKET = window.STM_PRELOADED_SOCKET || new WebSocket("wss://socket.streamable.com"); function userInteractionRequired() { var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; var chrome = navigator.userAgent.indexOf('Chrome') > -1; var safari = navigator.userAgent.indexOf("Safari") > -1; if ((chrome) && (safari)) safari = false; return safari || iOS } function copyTextToClipboard(text) { var textArea = document.createElement("textarea"); // Place in top-left corner of screen regardless of scroll position. textArea.style.position = 'fixed'; textArea.style.top = 0; textArea.style.left = 0; // Ensure it has a small width and height. Setting to 1px / 1em // doesn't work as this gives a negative w/h on some browsers. textArea.style.width = '2em'; textArea.style.height = '2em'; // We don't need padding, reducing the size if it does flash render. textArea.style.padding = 0; // Clean up any borders. textArea.style.border = 'none'; textArea.style.outline = 'none'; textArea.style.boxShadow = 'none'; // Avoid flash of white box if rendered for any reason. textArea.style.background = 'transparent'; textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; log('Copying text command was ' + msg); } catch (err) { log('Oops, unable to copy'); } document.body.removeChild(textArea); } VideoPlayer = function(video, player, id, options) { this.options = options || {}; this.video = video; this.player = player; this.id = id; this.onTimeUpdate = this.onTimeUpdate.bind(this) this.onProgress = this.onProgress.bind(this) this.update_player_controls = this.update_player_controls.bind(this) this.update_player_controls_loop = this.update_player_controls_loop.bind(this) this.update_player_progress = this.update_player_progress.bind(this) this.bufferCheckInterval = null; this.client_data = {}; this.onFullScreenChange = this.onFullScreenChange.bind(this) this.session_id = session || Math.random().toString(36).substr(2, 16); this.saveVolume = true this.isMobile = isMobile() this.isAndroid = isAndroid() }; VideoPlayer.prototype.setupMediaSession = function() { try { const artwork = [] if (this.video.poster_url) { artwork.push({ src: this.video.poster_url, sizes: `${this.video.width}x${this.video.height}`, type: 'image/jpg' }) } if (this.video.thumbnail_url) { artwork.push({ src: this.video.thumbnail_url, sizes: `${this.video.width}x${this.video.height}`, type: 'image/jpg' }) } if ('mediaSession' in navigator) { navigator.mediaSession.metadata = new MediaMetadata({ title: this.video.title || 'Streamable Video', artwork: artwork }); } } catch (e) { console.log("Failed to set up media session.", e) } } VideoPlayer.prototype.recordStat = function(name, data) { data = data || {}; data.type = name; data.shortcode = this.video.shortcode; data.timestamp = Math.floor(Date.now() / 1000); data.id = this.session_id; //cookie loaded in common data.referrer = encodeURIComponent(document.referrer) data.embedid = this.id for (var a in this.client_data ) { data[a] = this.client_data[a]; } data.ad = data.ad ? data.ad.tag : null window.STM_TRANSPORT.push(data) } VideoPlayer.prototype.onFullScreenChange = function () { if (screenfull.isFullscreen) { addClass(this.playerDiv, "fullscreen"); } else { removeClass(this.playerDiv, "fullscreen"); } }; VideoPlayer.prototype.initialize = function() { var self = this; var video = this.video; this.scrubTime = null var files = video.files; var bufferingDetected = null; var player = this.player; var playerDiv = this.player.parentNode; this.playerDiv = playerDiv; this.spinner = playerDiv.getElementsByClassName('player-spinner')[0]; this.paused = !this.started this.lastTime = null; this.lastReportedLoop = -1; this.lastProgressReport = 0; this.loops = 0; this.settingsOpen = false; document.body.addEventListener("keyup", this.onKeyPress.bind(this)); this.playerDiv.addEventListener("fullscreenchange", this.onFullScreenChange) this.setupMediaSession(); var playPauseInput = document.getElementById('player-play-pause-button-input') if (player.hasAttribute('autoplay')) { //force autoplay this.play(); } if (userInteractionRequired()) { removeClass(playerDiv, "playing"); } var playing = false; player.onpause = function() { if (self.scrubTime) return; if (playPauseInput) { playPauseInput.checked = true; } } player.onplay = function() { if (playPauseInput) { playPauseInput.checked = false; } if (playOverlay) { playOverlay.style.display = "none" } playing = true; self.paused_ = false self.started = true }; player.oncanplay = function() { if (self.spinner) { self.spinner.style.display = 'none'; } setTimeout(function() { if (!playing && !self.paused) { log("Video can play, forcing play") onUserActivity() self.play() } }, 100); }; var menu = document.getElementById('context-menu'); menu.addEventListener("mousedown", function(e) { e.stopPropagation(); }); var closeContextMenu = function(e) { if (e) { e.stopPropagation(); e.preventDefault(); } menu.style.display = "none"; self.player.removeEventListener("mousedown", closeContextMenu); document.removeEventListener("mousedown", closeContextMenu); } var downloadButton = document.getElementById("download") if (downloadButton) { downloadButton.addEventListener("click", function() { closeContextMenu(); }) } var copyUrlButton = document.getElementById("copyurl") if (copyUrlButton) { copyUrlButton.addEventListener("click", function() { var quality = getQueryVariable('quality'); if (quality) { copyTextToClipboard("https://streamable.com/" + self.video.shortcode + "?quality=" + quality); } else { copyTextToClipboard("https://streamable.com/" + self.video.shortcode); } closeContextMenu(); }) } var copyEmbedButton = document.getElementById("copyembed") if (copyEmbedButton) { copyEmbedButton.addEventListener("click", function() { self.copyEmbedCodeToClipboard(); closeContextMenu(); }) } var speedButtons = document.getElementsByClassName('speed-button'); for (var i = 0; i < speedButtons.length; i++) { var speedButton = speedButtons[i]; speedButton.addEventListener("click", function(e) { var speed = parseFloat(e.target.getAttribute("data-speed")) player.playbackRate = speed for (var x = 0; x < speedButtons.length; x++) { var sb2 = speedButtons[x]; removeClass(sb2, "active"); } addClass(e.target, "active"); player.play() }) } var downloadButtons = document.getElementsByClassName('download-button'); for (var i = 0; i < downloadButtons.length; i++) { var downloadButton = downloadButtons[i]; downloadButton.addEventListener("click", function(e) { var url = e.target.getAttribute("data-url") if (!url) { url = 'https://ajax.streamable.com/videos/' + video.shortcode + '/download' } window.open(url, 'Download') }) } var fullScreenButton = playerDiv.getElementsByClassName('player-fullscreen-button')[0]; var settingsButton = playerDiv.getElementsByClassName('player-settings-button')[0]; var settingsOverlay = playerDiv.getElementsByClassName('player-settings-overlay')[0]; var playButton = document.getElementById('play-button') var playOverlay = document.getElementById('play-overlay') if (this.isMobile && this.options.noControls) { player.addEventListener('click', function(){ if (player.paused) { this.play(); } else { this.pause(); } }); } playerDiv.onmousemove = function(e) { self.mouseOverControls = playerDiv.clientHeight - e.clientY < 50 } var hideSettings = function() { if (self.settingsOpen) { self.settingsOpen = false; removeClass(settingsButton, 'open') settingsOverlay.style.display = "none"; return true; } return false; } player.addEventListener('play', function(){ if (playOverlay) { playOverlay.style.display = "none"; } }); if (playButton) { playOverlay.onclick = function(e) { if (playOverlay) { playOverlay.style.display = "none" } self.play(); e.stopPropagation() } playButton.onclick = function(e) { if (playOverlay) { playOverlay.style.display = "none" } self.play(); e.stopPropagation() } playButton.onmousemove = function(e) { e.preventDefault(); e.stopPropagation(); } } player.addEventListener("ended", function() { console.log("Play ended") if (playOverlay) { playOverlay.style.display = "block" } }) this.player.addEventListener("ended", function(e) { removeClass(playerDiv, "user-activity"); }); var showContextMenu = function(e) { if (!self.isMobile) { self.player.addEventListener("mousedown", closeContextMenu); document.addEventListener("mousedown", closeContextMenu); if (e.offsetX + 200 > self.player.offsetWidth) { menu.style.left = e.offsetX - 200 + "px"; } else { menu.style.left = e.offsetX + "px"; } if (e.offsetY + 150 > self.player.offsetHeight) { menu.style.top = e.offsetY - 150 + "px"; } else { menu.style.top = e.offsetY + "px"; } menu.style.display = "block"; } e.preventDefault(); return false; } if (playButton) { playButton.addEventListener('contextmenu', showContextMenu); } this.player.addEventListener('contextmenu', showContextMenu); player.addEventListener("timeupdate", self.onTimeUpdate); player.addEventListener("progress", self.onProgress); player.addEventListener("canplaythrough", self.onProgress); var vol = parseFloat(getCookie("volume") || .51); var muted = getCookie("muted") || "false"; if (vol) { player.volume = vol; } if (muted == "true") { player.muted = muted; } player.addEventListener("error", function(e) { var code = -1; if (e.target.error && e.target.error.code) { code = e.target.error.code; } self.recordStat("error", { code: code, src: e.target.src, networkState: player.networkState, currentTime: player.currentTime, readyState: player.readyState, type: 'video' }) }); var loadedMetadata = function() { if (self.scrubTime != null) { player.currentTime = self.scrubTime; self.scrubTime = null; } var time = getQueryVariable('t'); if (time) { player.currentTime = time; } if (!self.isMobile) { window.requestAnimationFrame(self.update_player_progress); } } if (player.duration) { loadedMetadata() } else { player.addEventListener("loadedmetadata", loadedMetadata); } player.onvolumechange = function() { if (player.hasAttribute("muted")) { return; } if (self.saveVolume) { if (!player.muted) { setCookie("volume", player.volume); } setCookie("muted", player.muted); } self.update_player_controls(); }; var activityTimeout = null; var setHideTimeout = function(duration) { duration = duration || 2000; activityTimeout = setTimeout(function() { if (self.settingsOpen || self.mouseOverControls) { setHideTimeout(); return; } if (self.scrubTime != null) { return; } removeClass(playerDiv, "user-activity"); }, duration) } var onUserActivity = function(e) { if (!self.started) { return } if (activityTimeout) { clearTimeout(activityTimeout); } if (self.options.noControls) { return } addClass(playerDiv, "user-activity"); setHideTimeout(); } setHideTimeout(); var watermarkShown = false; player.addEventListener("playing", function(e) { canShowBuffering = true; if (!watermarkShown) { var watermarkContainers = playerDiv.getElementsByClassName('watermark'); for (var i = 0; i < watermarkContainers.length; i++) { var watermark = watermarkContainers[i] if (watermark.getAttribute('data-animated')) { watermark.style.right = '-120px' setTimeout(function() { watermark.style.visibility = 'visible' var right = watermark.getAttribute('data-right'); if (!right) { right = '10px'; } watermark.style.right = right; }, 500); } else { watermark.style.visibility = 'visible' } } watermarkShown = true; } }) if (this.isMobile) { if (this.isAndroid) { var settingsButtonMobile = playerDiv.getElementsByClassName('player-settings-button-mobile')[0]; var settingsOverlayMobile = playerDiv.getElementsByClassName('player-settings-overlay-mobile')[0]; var settingsButtonMobileClose = playerDiv.getElementsByClassName('player-settings-button-mobile-close')[0]; playerDiv.addEventListener("touchstart", onUserActivity); if (settingsButtonMobile) { settingsButtonMobile.onclick = function(e) { settingsOverlayMobile.style.display = "block"; } settingsButtonMobileClose.onclick = function(e) { settingsOverlayMobile.style.display = "none"; } var qualityOptions = playerDiv.getElementsByClassName('player-settings-quality-option-mobile'); for (var i = 0; i < qualityOptions.length; i++) { qualityOptions[i].onclick = function(e) { var preset = e.target.getAttribute("data-quality") e.stopPropagation(); e.preventDefault(); for (var i2 = 0; i2 < qualityOptions.length; i2++) { removeClass(qualityOptions[i2], "checked"); if (qualityOptions[i2].getAttribute("data-quality") == preset) { addClass(qualityOptions[i2], "checked"); var currentTime = self.player.currentTime; self.player.src = files[preset].url self.player.currentTime = currentTime; self.player.play() hideSettings(); } } } } } } } else { playerDiv.addEventListener("mouseleave", function() { removeClass(playerDiv, "user-activity"); }) var showBufferingTimeout = null; var canShowBuffering = false; var lastPlayPos = 0; this.bufferCheckInterval = setInterval(function() { if (!player) { return; } currentPlayPos = player.currentTime; if ((self.spinner.style.display == 'none' || self.spinner.style.display == '') && player.currentTime == lastPlayPos && !player.paused) { if (canShowBuffering) { self.spinner.style.display = 'block'; bufferingDetected = true; } } if (self.spinner.style.display == 'block' && player.currentTime > lastPlayPos && !player.paused) { self.spinner.style.display = 'none'; bufferingDetected = false; } lastPlayPos = player.currentTime }, 500.0); player.addEventListener("playing", function(e) { canShowBuffering = true; }) this.update_player_controls_loop(); //this must be click for ie if (fullScreenButton) { fullScreenButton.onclick = function(e) { hideSettings(); if (screenfull.isEnabled) { screenfull.toggle(playerDiv); setTimeout(function() { player.style.maxHeight = document.body.offsetHeight + "px"; }, 1000); } } fullScreenButton.onmousedown = function(e) { e.stopPropagation(); } } if (settingsButton) { settingsButton.onclick = function(e) { if (self.settingsOpen) { removeClass(settingsButton, 'open') settingsOverlay.style.display = "none"; } else { addClass(settingsButton, 'open') settingsOverlay.style.display = "block"; } self.settingsOpen = !self.settingsOpen; } var qualityOptions = playerDiv.getElementsByClassName('player-settings-quality-option'); for (var i = 0; i < qualityOptions.length; i++) { qualityOptions[i].onmousedown = function(e) { e.stopPropagation(); e.preventDefault(); } qualityOptions[i].onclick = function(e) { e.stopPropagation(); e.preventDefault(); for (var i2 = 0; i2 < qualityOptions.length; i2++) { removeClass(qualityOptions[i2], "checked"); } addClass(e.target, "checked"); var currentTime = self.player.currentTime; var preset = e.target.getAttribute("data-quality") self.player.src = files[preset].url self.player.currentTime = currentTime; self.player.play() hideSettings(); } } } playerDiv.addEventListener("mousemove", onUserActivity); this.player.addEventListener("mousedown", function(e) { onUserActivity(e); var button = e.which || e.button; if (button == 3) { return; } if (hideSettings()) { return; } if (player.paused) { var promise = player.play() if (promise !== undefined) { promise.then(function() { }).catch(function(err) { console.log("Play blocked: " + err) }); } self.update_player_controls(); } else { player.pause(); self.update_player_controls(); } }) if (screenfull.isEnabled) { document.addEventListener(screenfull.raw.fullscreenchange, self.onFullScreenChange) } else { if (fullScreenButton) { fullScreenButton.style.display = "none"; } } if (playPauseInput) { playPauseInput.onchange = function(e) { if (e.target.checked) { player.pause(); } else { player.play(); } } } var muteButton = playerDiv.getElementsByClassName('player-mute-button')[0]; if (muteButton) { muteButton.onmousedown = function(e) { hideSettings(); if (player.muted) { player.muted = false; } else { player.muted = true; } e.stopPropagation(); } } var wasPaused; var handleMouseMove = function(e) { log("Mouse move pause") player.pause(); var newTime = calculateDistance(e, playerDiv.getElementsByClassName('player-progress')[0]) * player.duration; // Don't let video end while scrubbing. if (newTime === player.duration) { newTime = newTime - 0.1; } if (!isNaN(newTime)) { // Set new time (tell player to seek to new time) player.currentTime = newTime; self.scrubTime = newTime; } self.update_player_controls(); } var handleMouseUp = function(e) { document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); document.removeEventListener("touchmove", handleMouseMove); document.removeEventListener("touchend", handleMouseUp); self.scrubTime = null; if (!wasPaused) { log("Playing after progress change") player.play() var promise = player.play() if (promise !== undefined) { promise.then(function() { }).catch(function(err) { console.log("Play blocked: " + err) }); } } } var progressBar = playerDiv.getElementsByClassName('player-progress')[0] var progressBarHover = document.getElementById('player-progress-hover') var progressBarTrackHover = document.getElementById('player-progress-value-hover') progressBar.onmousedown = function(e) { hideSettings(); wasPaused = player.paused; document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); document.addEventListener("touchmove", handleMouseMove); document.addEventListener("touchend", handleMouseUp); handleMouseMove(e); //so we don't trigger mousedown on player e.stopPropagation(); } progressBar.onmousemove = function(e) { var newTime = calculateDistance(e, progressBar) * player.duration; // Don't let video end while scrubbing. if (newTime === player.duration) { newTime = newTime - 0.1; } if (!isNaN(newTime)) { var percent = newTime / player.duration * 100; var left = newTime / player.duration * progressBar.offsetWidth; var right = progressBar.offsetWidth - left; if (left < 100) { progressBarHover.style.right = null; progressBarHover.style.left = left - (percent / 2) + "px"; progressBarHover.style.textAlign = "left" } else if (right < 100) { progressBarHover.style.left = null; progressBarHover.style.right = right - (50 - percent / 2) + "px"; progressBarHover.style.textAlign = "right" } else { progressBarHover.style.right = null; progressBarHover.style.left = (left - 50) + "px"; progressBarHover.style.textAlign = "center" } var minutes = Math.floor(newTime / 60) var seconds = Math.round(newTime - minutes * 60) if (seconds < 10) { seconds = "0" + seconds.toString() } progressBarHover.innerHTML = minutes + ":" + seconds.toString() progressBarHover.style.opacity = 1 var width = percent.toFixed(2); if (width > 100) { width = 100; } progressBarTrackHover.style.width = width + "%"; progressBarTrackHover.style.opacity = 1 } else { progressBarHover.style.opacity = 0 progressBarTrackHover.style.opacity = 0 } } progressBar.onmouseleave = function(e) { progressBarHover.style.opacity = 0 progressBarTrackHover.style.opacity = 0 } var volumeBar = playerDiv.getElementsByClassName('player-volume')[0]; if (volumeBar) { var handleVolumeMouseMove = function(e) { var distance = calculateDistance(e, volumeBar); if (distance < .25) { return; } var volume = calculateDistance(e, playerDiv.getElementsByClassName('player-volume-track')[0]); player.volume = volume; if (volume == 0) { player.muted = true; } else { player.muted = false; } self.update_player_controls(); } var handleVolumeMouseUp = function(e) { document.removeEventListener("mousemove", handleVolumeMouseMove); document.removeEventListener("mouseup", handleVolumeMouseUp); document.removeEventListener("touchmove", handleVolumeMouseMove); document.removeEventListener("touchend", handleVolumeMouseUp); } playerDiv.getElementsByClassName('player-volume')[0].onmouseleave = function(e) { handleVolumeMouseUp(e); } playerDiv.getElementsByClassName('player-volume')[0].onmousedown = function(e) { hideSettings(); document.addEventListener("mousemove", handleVolumeMouseMove); document.addEventListener("mouseup", handleVolumeMouseUp); document.addEventListener("touchmove", handleVolumeMouseMove); document.addEventListener("touchend", handleVolumeMouseUp); handleVolumeMouseMove(e); //so we don't trigger mousedown on player e.stopPropagation(); } } self.update_player_controls(); } } VideoPlayer.prototype.onKeyPress = function(e) { if (e.keyCode == 102 || e.keyCode == 70) { if (screenfull.isEnabled) { screenfull.toggle(this.playerDiv); } } else if (e.keyCode == 109 || e.keyCode == 77) { if (this.player.muted) { this.player.muted = false; } else { this.player.muted = true; } } else if (e.keyCode == 32 || e.keyCode == 75) { if (this.player.paused) { this.play(); } else { this.pause(); } } else if (e.keyCode == 38) { var volume = this.player.volume + .1; if (volume > 1) volume = 1; this.player.volume = volume; this.player.muted = false; } else if (e.keyCode == 40) { var volume = this.player.volume - .1; if (volume < 0) { volume = 0; this.player.muted = true; } this.player.volume = volume; } else if (e.keyCode == 37 || e.keyCode == 74) { if (!this.player.duration) return; var time = this.player.currentTime - 5; if (time > this.player.duration || time < 0) { time = 0; } this.player.currentTime = time; } else if (e.keyCode == 39 || e.keyCode == 76) { if (!this.player.duration) return; var time = this.player.currentTime + 5; if (time > this.player.duration || time < 0) { time = 0; } this.player.currentTime = time; } else if (e.keyCode >= 48 && e.keyCode <= 57) { if (!this.player.duration) return; var percent = (e.keyCode - 48) / 10; this.player.currentTime = percent * this.player.duration } } VideoPlayer.prototype.copyEmbedCodeToClipboard = function(source) { var self = this; var padding = (self.video.height / self.video.width * 100).toFixed(3); if (self.video.shortcode) { var code = '<div' + ' style="width: 100%; height: 0px; position: relative; padding-bottom: ' + padding + '%;"><' + 'iframe src="https://streamable.com/e/' + self.video.shortcode + '?quality=highest" frameborder="0" width="100%" height="100%" allowfullscreen style="width: 100%; height: 100%; position: absolute;"><' + '/iframe></div>'; } else { var code = '<div' + ' style="width: 100%; height: 0px; position: relative; padding-bottom: ' + padding + '%;"><' + 'iframe src="' + window.location + '" frameborder="0" width="100%" height="100%" allowfullscreen style="width: 100%; height: 100%; position: absolute;"><' + '/iframe></div>'; } copyTextToClipboard(code); } VideoPlayer.prototype.onProgress = function(e) { this.updateBuffered() } VideoPlayer.prototype.updateBuffered = function(e) { var loaded = 0 for (var i = 0; i < this.player.buffered.length; i++) { loaded += (this.player.buffered.end(i) - this.player.buffered.start(i)) } var percent = 0 if (this.player.duration) { percent = loaded / this.player.duration * 100 } } VideoPlayer.prototype.onTimeUpdate = function() { var self = this var player = this.player var reportProgress = function(seeking) { if (seeking) { seeking = 1; } else { seeking = 0; } self.recordStat("progress", { "seeking": seeking, "progress": (player.currentTime / player.duration).toFixed(2), "loops": self.loops }) self.lastProgressReport = player.currentTime; } if (player.currentTime - self.lastProgressReport >= 30) { reportProgress(player.seeking); } //ignore if seeking, unless its a loop if (player.seeking && player.currentTime != 0) { self.lastTime = player.currentTime; return; } if (self.spinner && player.currentTime != 0) { self.spinner.style.display = "none"; } //reset on returning to beginning if (self.lastTime > player.currentTime && player.currentTime == 0) { self.loops += 1; self.lastTime = null; } //if we returned to beginning, or it's been 5 seconds if (self.loops > self.lastReportedLoop) { if (self.loops <= 10) { self.recordStat("play", { loops: self.loops, progress: player.duration ? (player.currentTime / player.duration).toFixed(2) : 0 }) self.lastReportedLoop = self.loops; } self.lastProgressReport = player.currentTime; } self.update_player_controls(); self.lastTime = player.currentTime; } VideoPlayer.prototype.update_player_controls_loop = function() { var player = this.player var self = this setTimeout(function() { self.update_player_controls(); self.update_player_controls_loop(); }, 2000); }; VideoPlayer.prototype.update_player_controls = function() { var player = this.player var playerDiv = this.playerDiv var muteButton = playerDiv.getElementsByClassName('player-mute-button')[0]; if (muteButton) { removeClass(muteButton, "muted"); removeClass(muteButton, "low"); if (player.muted) { addClass(muteButton, "muted"); } else if (player.volume < .5) { addClass(muteButton, "low"); } } var volumeBar = playerDiv.getElementsByClassName('player-volume-value')[0]; if (volumeBar) { var volume = (player.volume * 80).toFixed(); if (player.muted) { volume = 0; } volumeBar.style.clip = "rect(0px," + volume / 2 + "px,40px,0px)" } } VideoPlayer.prototype.update_player_progress = function() { var self = this var player = this.player var playerDiv = this.playerDiv var currentTime = player.currentTime; if (self.scrubTime != null) { currentTime = self.scrubTime; } var progressBar = playerDiv.getElementsByClassName('player-progress-value')[0]; if (player.duration && progressBar) { var width = (currentTime / player.duration * 100).toFixed(2); if (width > 100) { width = 100; } progressBar.style.width = width + "%"; } window.requestAnimationFrame(self.update_player_progress); } VideoPlayer.prototype.pause = function() { log('Pausing'); this.paused_ = true this.player.pause(); } VideoPlayer.prototype.setVolume = function(volume, save) { log('Set volume ' + volume.toString() + " save: " + save.toString()); // don't store if we're silently muting if (volume || save) { this.player.volume = volume } if (volume == 0) { this.player.muted = true; } else { this.player.muted = false; } this.saveVolume = save setTimeout(function() { self.saveVolume = true }, 100) } // returns whether player should pause for ad VideoPlayer.prototype.adOpportunity = function() { if (window.STM_PLAYERS) { for (var i = 0; i < window.STM_PLAYERS.length; i++) { if (typeof window.STM_PLAYERS[i].adOpportunity === 'function') { return window.STM_PLAYERS[i].adOpportunity() } } } return false } VideoPlayer.prototype.play = function(noads, retried) { var self = this if (this.isMobile && !this.options.noControls) { this.player.controls = true; } var playOverlay = document.getElementById('play-overlay') var play = true; if (!noads && !this.started) { play = !this.adOpportunity() } this.paused_ = false this.started = true if (play) { if (this.player.prepHls) { this.player.prepHls() } var promise = this.player.play() if (promise !== undefined) { promise.then(function() { // Autoplay started! }).catch(function(err) { console.log("Play blocked: " + err) if (self.options.autoPlayMute && !retried) { self.setVolume(0, false); self.play(noads, true) } else { if (playOverlay) { playOverlay.style.display = "block" } self.paused_ = true self.started = false } }); } } else { log("Got ad, not playing") //playOverlay.style.display = "block" this.spinner.style.display == 'block' } } VideoPlayer.prototype.paused = function() { return !!this.paused_ } VideoPlayer.prototype.destroy = function(callback) { if (this.bufferCheckInterval) { clearInterval(this.bufferCheckInterval); } if (this.progressUpdateInterval) { clearInterval(this.progressUpdateInterval); } this.player.removeEventListener("timeupdate", this.onTimeUpdate) this.player.removeEventListener("progress", this.onProgress) this.player.removeEventListener("canplaythrough", this.onProgress) //replace player to kill all event listeners var clone = this.player.cloneNode(); while (this.player.firstChild) { clone.appendChild(this.player.lastChild); } this.player.parentNode.replaceChild(clone, this.player); this.playerDiv.removeEventListener("fullscreenchange", this.onFullScreenChange); this.player.pause(); while (this.player.firstChild) { this.player.removeChild(this.player.firstChild); } this.player.load(); //forces unloading of video if (callback) {callback();} if (screenfull.isEnabled) { document.removeEventListener(screenfull.raw.fullscreenchange, this.onFullScreenChange) } window.removeEventListener("message", this.onMessage); document.removeEventListener("keyup", this.onKeyPress); } </script>   <style> .media-container { height: 56.25vw; max-width: 177.78vh; } </style> <script id="googleanalytics"> (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','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-56474110-1', {'sampleRate': 1}); ga('send', 'pageview'); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-P6QBGXDK3N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-P6QBGXDK3N'); </script> </head> <body> <div class="media-container" id="media-container"> <div id="filler" style="width: 100%; padding-bottom: 56.25%"></div> <div class="player player--rounded controls hide-audio playing"> <video id="video-player-tag" class="video-player-tag" playsinline loop autoplay poster="//cdn-cf-east.streamable.com/image/us2w7h_first.jpg?Expires=1743514680&Signature=abbZSdhnvq436Qkm8VAkhbByiFqM~KrnuKgFhw208GqiM5nHnNFIcicpgQ4eZ-~zdMJal4tTUfmP9sjdQa58bVYBZ756E6Qki3s~0mo2g6MBBsl8Cdrh7gDz8qiyT5A8ziDSihniyXSWl4LbYEbNocatRSk9JoSfbDBGswqypGR4LW5~QFOMjicz3lI6suzJ35wLk7cTKHR7a1XzQbIIYtCySkyb1QxMGqKhYmc835POWqMLYPCskQw4SVls4wjnVrAk8foKV7cFqjz3fYGXxO81TQPIXMoPIIDju8vWMoOEpPhp3DC2j-xv5BLphHM~SGRohQQy8MK0x3DcnKjmKg__&Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ" src="//cdn-cf-east.streamable.com/video/mp4/us2w7h.mp4?Expires=1743514680&Signature=PP-jymcFRGo9fual4C8VKkM4N-8kTpLRPeeGSgXFBLtlga-ELdaGwpViBqq0yRdsQJpYQd6C9F1s5JX1yWw67K~Q3rC5cuixAZDRfbTdbQWs06dv0QPvR4s0npsAibp2ZnjC6QgtGfRJ6oNzjeuO-zyjxoiTNFuT6zUuTg3lDYG15K1QUl-HuQzP~uk4kvk8H935m-hPUsWsj7t5sPcy0votQ-oi-VSHgsm-0hzsFHCuGfcOjVQ14Zr6vJadz3kOkdP4BkGHHQYhVYSr-22P~et8tP6xemsiN9kEYgABJTy8jeV4bdYw7uqZ4JSQ597D4vV9bpI6MjQsRld4Dc6B7Q__&Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ" controlsList="nodownload" > </video> <div id="spinner" class="player-spinner" style="background:#FFFFFF; color:#FFFFFF;"></div> <div class='player-controls' id="player-controls-footer"> <div class='player-controls-left'> <div id='player-play-pause'> <label> <input type="checkbox" id="player-play-pause-button-input" class="player-play-pause-button-input"></input> <span id='player-play-pause-button' style='border-left: 16px double #FFFFFF;'></span> </label> </div> <div id='player-volume' class='player-volume'> <div id='player-volume-control' class='player-volume-control'> <div id='player-volume-track' class='player-volume-track'> <svg viewBox="0 0 60 60" height="40px" width="40px"> <path style="stroke-linejoin:round;fill-rule:evenodd;color:#FFFFFF;stroke:#FFFFFF;stroke-linecap:round;stroke-width:3;fill:#FFFFFF" transform="translate(52.588 20.551)" d="m1.7857 20.104h-48.748l48.748-21.311-0.0003 21.311z" /> </svg> </div> <div id='player-volume-value' class='player-volume-value'> <svg viewBox="0 0 60 60" height="40px" width="40px"> <path style="stroke-linejoin:round;fill-rule:evenodd;color:#FFFFFF;stroke:#FFFFFF;stroke-linecap:round;stroke-width:3;fill:#FFFFFF" transform="translate(52.588 20.551)" d="m1.7857 20.104h-48.748l48.748-21.311-0.0003 21.311z" /> </svg> </div> </div> <div role='button' id='player-mute-button' class='player-mute-button'> <svg class="volume-mute" width="30" height="28" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1280 352v1088q0 26-19 45t-45 19-45-19l-333-333h-262q-26 0-45-19t-19-45v-384q0-26 19-45t45-19h262l333-333q19-19 45-19t45 19 19 45z" fill="#FFFFFF"/></svg> <svg class="volume-down" width="30" height="28" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1088 352v1088q0 26-19 45t-45 19-45-19l-333-333h-262q-26 0-45-19t-19-45v-384q0-26 19-45t45-19h262l333-333q19-19 45-19t45 19 19 45zm384 544q0 76-42.5 141.5t-112.5 93.5q-10 5-25 5-26 0-45-18.5t-19-45.5q0-21 12-35.5t29-25 34-23 29-35.5 12-57-12-57-29-35.5-34-23-29-25-12-35.5q0-27 19-45.5t45-18.5q15 0 25 5 70 27 112.5 93t42.5 142z" fill="#FFFFFF"/></svg> <svg class="volume-up" width="30" height="28" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M832 352v1088q0 26-19 45t-45 19-45-19l-333-333h-262q-26 0-45-19t-19-45v-384q0-26 19-45t45-19h262l333-333q19-19 45-19t45 19 19 45zm384 544q0 76-42.5 141.5t-112.5 93.5q-10 5-25 5-26 0-45-18.5t-19-45.5q0-21 12-35.5t29-25 34-23 29-35.5 12-57-12-57-29-35.5-34-23-29-25-12-35.5q0-27 19-45.5t45-18.5q15 0 25 5 70 27 112.5 93t42.5 142zm256 0q0 153-85 282.5t-225 188.5q-13 5-25 5-27 0-46-19t-19-45q0-39 39-59 56-29 76-44 74-54 115.5-135.5t41.5-173.5-41.5-173.5-115.5-135.5q-20-15-76-44-39-20-39-59 0-26 19-45t45-19q13 0 26 5 140 59 225 188.5t85 282.5z" fill="#FFFFFF"/></svg> </div> </div> </div> <div id="player-progress" class="player-progress"> <div id="player-progress-hover" class="player-progress-hover" style='color: #FFFFFF;'></div> <div id="player-progress-track" class="player-progress-track" style='background-color: #FFFFFF;'></div> <div id="player-progress-value-hover" class="player-progress-value-hover" style='background-color: #FFFFFF;'></div> <div id="player-progress-value" class="player-progress-value" style='background-color: #FFFFFF;'></div> </div> <div class='player-controls-right'> <div class="player-settings"> <div id='player-settings-overlay' class='player-settings-overlay'> <div id="player-settings-quality-header">Quality</div> <div data-quality="mp4" class="player-settings-quality-option checked"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24"> <path fill="#FFFFFF" d="M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z"></path> </svg> 576p </div> <div data-quality="mp4-mobile" class="player-settings-quality-option "> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18" height="18" viewBox="0 0 24 24"> <path fill="#FFFFFF" d="M9 16.172l10.594-10.594 1.406 1.406-12 12-5.578-5.578 1.406-1.406z"></path> </svg> 360p </div> </div> <div role='button' id='player-settings-button' class='player-settings-button'> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="21" height="21" > <path d="M42.3,26.4c0-.72.25-1.68.25-2.4a8,8,0,0,0-.25-2.4L47.48,18a1.1,1.1,0,0,0,.25-1.68l-4.94-8.4a1.11,1.11,0,0,0-1.48-.72L35.39,9.84a15.85,15.85,0,0,0-4.44-2.4L30.21,1.2A1.15,1.15,0,0,0,29,0H19.1a1.15,1.15,0,0,0-1.23,1.2l-.74,6a19.11,19.11,0,0,0-4.44,2.4L6.76,7.2a1.2,1.2,0,0,0-1.48.48L.34,16.08c-.49.72-.49,1.44.25,1.68L5.77,21.6c0,.72-.25,1.68-.25,2.4a8,8,0,0,0,.25,2.4L.59,30a1.1,1.1,0,0,0-.25,1.68l4.94,8.4a1.11,1.11,0,0,0,1.48.72l5.92-2.64a15.85,15.85,0,0,0,4.44,2.4l.74,6.24A1.15,1.15,0,0,0,19.1,48H29a1.15,1.15,0,0,0,1.23-1.2l.74-6.24a19.11,19.11,0,0,0,4.44-2.4l5.92,2.64a1.2,1.2,0,0,0,1.48-.48l4.94-8.4a1.45,1.45,0,0,0-.25-1.68ZM24,34A10,10,0,1,1,34,24,10,10,0,0,1,24,34Z" fill="#FFFFFF"/> </svg> </div> </div> <div role='button' id='player-fullscreen-button' class='player-fullscreen-button'> <svg class="compact" width="23" height="23" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M896 960v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45zm755-672q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23z" fill="#FFFFFF"/></svg> <svg class="expand" width="23" height="23" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z" fill="#FFFFFF"/></svg> </div> </div> </div> <div id="play-overlay"> <img id="play-background" src="//cdn-cf-east.streamable.com/image/us2w7h.jpg?Expires=1743514680&Signature=FSRITElU8gz2d8m-v6Z7iIhwlGK6NBmOkUBB3rrUjKM~iPhGreKxyZBnd4u8rNZO6~42mXBr2VhcuaUSXKqmNCn9q6oZNRaRRP7ajG5fNpqMKLXf4LSKvFD6SDRbLNFZtetD82X0D02scRlLs1Vmjaa8qCo35KPBvdfBqOgOeNcsNhDThAPhMJ9uwRyHsJjigxsC7WgzWqYtRuqeZhQVVge5TacWSZyykdl62CS3-9KEzFE3BERu7yJyuxzDKEhbquYT6-jg5Izc9Xg5IcJFACnYoFaulXZ5zVl2~n7FxXbOCPwurrp5oZfDBBF0m2TV6aLRjPDmx7dE82V5DwwJtA__&Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ"></img> <div id="play-button"><div class="triangle" style="background-color:#FFFFFF;"></div></div> </div> </div> <div id="context-menu"> <div class="context-menu-item context-menu-selection-item separator" id="speed"> Speed <span class="speed-button context-menu-selection-item-button" data-speed="2">2</span> <span class="speed-button context-menu-selection-item-button" data-speed="1.5">1.5</span> <span class="speed-button context-menu-selection-item-button active"data-speed="1">1</span> <span class="speed-button context-menu-selection-item-button" data-speed=".5">陆</span> <span class="speed-button context-menu-selection-item-button" data-speed=".25">录</span> </div> <a href="#" class="context-menu-item" id="copyurl">Copy video URL</a> <a href="#" class="context-menu-item" id="copyembed">Copy embed code</a> <a href="https://report.streamable.checkstep.com/?content_id=us2w7h" target="_blank" class="context-menu-item">Report issue</a> <a href="https://streamable.com/?src_player=context-powered-by" target="_blank" class="context-menu-item context-menu-footer"><img src="https://statics.streamable.com/static/favicon.ico" height="16" width="16"><b>Powered by Streamable</b></a> </div> </div> <script id="embed-js"> var EXTERNAL_JS_LOADED = false; var videoObject = {"ad_parameters": null, "ad_tag": null, "ad_tags": null, "ad_type": null, "allow_download": false, "allowed_domain": "", "audio_channels": 0, "bitrate": 690588, "color": "#FFFFFF", "date_added": 1741664748.723, "debug": false, "description": "", "disable_streamable": false, "duration": 5.375, "dynamic_thumbnail_url": "//cdn-cf-east.streamable.com/image/us2w7h.jpg", "error": null, "ext": null, "extract_id": null, "extractor": null, "file_id": "us2w7h", "files": {"mp4": {"audio_channels": 0, "bitrate": 690588, "duration": 5.375, "dynamic_thumbnail_url": "//cdn-cf-east.streamable.com/image/us2w7h.jpg", "error": null, "execution_time": 2182.0, "framerate": 24, "height": 576, "input_metadata": {"audio_channels": 0, "avg_frame_rate": "24/1", "bitrate": 913687, "constant_frame_rate": true, "duration": 5.375, "fps": "24", "framerate": 24, "has_b_frames": 2, "has_subtitles": false, "height": 576, "is_stream": false, "level": 31, "profile": "High", "r_frame_rate": "24/1", "real_framerate": 24, "refs": 1, "rotation": 0, "size": 613884, "video_codec_name": "h264", "width": 1024}, "job_id": "mp4-us2w7h-0", "name": "mp4/us2w7h.mp4", "percent": 100, "poster_file_name": "us2w7h_first.jpg", "poster_url": "//cdn-cf-east.streamable.com/image/us2w7h_first.jpg?Expires=1743514680\u0026Signature=abbZSdhnvq436Qkm8VAkhbByiFqM~KrnuKgFhw208GqiM5nHnNFIcicpgQ4eZ-~zdMJal4tTUfmP9sjdQa58bVYBZ756E6Qki3s~0mo2g6MBBsl8Cdrh7gDz8qiyT5A8ziDSihniyXSWl4LbYEbNocatRSk9JoSfbDBGswqypGR4LW5~QFOMjicz3lI6suzJ35wLk7cTKHR7a1XzQbIIYtCySkyb1QxMGqKhYmc835POWqMLYPCskQw4SVls4wjnVrAk8foKV7cFqjz3fYGXxO81TQPIXMoPIIDju8vWMoOEpPhp3DC2j-xv5BLphHM~SGRohQQy8MK0x3DcnKjmKg__\u0026Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ", "preset": "mp4", "reencoded": true, "size": 463989, "status": 2, "thumbnail_file_name": "us2w7h.jpg", "thumbnail_url": "//cdn-cf-east.streamable.com/image/us2w7h.jpg?Expires=1743514680\u0026Signature=FSRITElU8gz2d8m-v6Z7iIhwlGK6NBmOkUBB3rrUjKM~iPhGreKxyZBnd4u8rNZO6~42mXBr2VhcuaUSXKqmNCn9q6oZNRaRRP7ajG5fNpqMKLXf4LSKvFD6SDRbLNFZtetD82X0D02scRlLs1Vmjaa8qCo35KPBvdfBqOgOeNcsNhDThAPhMJ9uwRyHsJjigxsC7WgzWqYtRuqeZhQVVge5TacWSZyykdl62CS3-9KEzFE3BERu7yJyuxzDKEhbquYT6-jg5Izc9Xg5IcJFACnYoFaulXZ5zVl2~n7FxXbOCPwurrp5oZfDBBF0m2TV6aLRjPDmx7dE82V5DwwJtA__\u0026Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ", "url": "//cdn-cf-east.streamable.com/video/mp4/us2w7h.mp4?Expires=1743514680\u0026Signature=PP-jymcFRGo9fual4C8VKkM4N-8kTpLRPeeGSgXFBLtlga-ELdaGwpViBqq0yRdsQJpYQd6C9F1s5JX1yWw67K~Q3rC5cuixAZDRfbTdbQWs06dv0QPvR4s0npsAibp2ZnjC6QgtGfRJ6oNzjeuO-zyjxoiTNFuT6zUuTg3lDYG15K1QUl-HuQzP~uk4kvk8H935m-hPUsWsj7t5sPcy0votQ-oi-VSHgsm-0hzsFHCuGfcOjVQ14Zr6vJadz3kOkdP4BkGHHQYhVYSr-22P~et8tP6xemsiN9kEYgABJTy8jeV4bdYw7uqZ4JSQ597D4vV9bpI6MjQsRld4Dc6B7Q__\u0026Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ", "version": 0, "width": 1024}, "mp4-mobile": {"audio_channels": 0, "bitrate": 838139, "duration": 5.366667, "error": null, "execution_time": 2630.0, "framerate": 30, "height": 360, "input_metadata": {"audio_channels": 0, "avg_frame_rate": "24/1", "bitrate": 913687, "constant_frame_rate": true, "duration": 5.375, "fps": "24", "framerate": 24, "has_b_frames": 2, "has_subtitles": false, "height": 576, "is_stream": false, "level": 31, "profile": "High", "r_frame_rate": "24/1", "real_framerate": 24, "refs": 1, "rotation": 0, "size": 613884, "video_codec_name": "h264", "width": 1024}, "job_id": "mp4-mobile-us2w7h-0", "name": "mp4-mobile/us2w7h.mp4", "percent": 100, "poster_file_name": null, "preset": "mp4-mobile", "reencoded": true, "size": 562287, "status": 2, "thumbnail_file_name": null, "url": "//cdn-cf-east.streamable.com/video/mp4-mobile/us2w7h.mp4?Expires=1743514680\u0026Signature=KDzyB9YmaOkqN6MNkxELubSCk6R6e8wQ4EuVZ454Gyh6KgkDiYV--vshPsErcUCwHWcpoglL3M9g-leAcRWugzZ1N5XU6NWOywQkCARJeFhIBhVkeYga0VzSfTWOxtRvsbOssfikXS2oY9kCVxSHj1MA-KQkZgF9bYmEguBgh2k--oCedsFAbTCPbydsRf-JDwLSGtZA~lSnMudRtmXzC2vEjBZv3kQCLVgaVLE60mf47UuaxhHNlif~vgNI8Vf9tTg0UwiySGb6URGEnwlcFdhFHFjBBQFfhiP35gesNgHniISsaamIK7q6obSh3U4~Ank~v4wyLaPB0Am4A4ItYQ__\u0026Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ", "version": 0, "width": 640}}, "flagged": 0, "gif": null, "height": 576, "hide_sharing": false, "hot": 1, "input_metadata": {"audio_channels": 0, "avg_frame_rate": "24/1", "bitrate": 913687, "constant_frame_rate": true, "duration": 5.375, "fps": "24", "framerate": 24, "has_b_frames": 2, "has_subtitles": false, "height": 576, "is_stream": false, "level": 31, "profile": "High", "r_frame_rate": "24/1", "real_framerate": 24, "refs": 1, "rotation": 0, "size": 613884, "video_codec_name": "h264", "width": 1024}, "is_owner": false, "manifest": "#EXTM3U\n#EXT-X-VERSION:7\n#EXT-X-STREAM-INF:BANDWIDTH=690588,RESOLUTION=1024x576\n/us2w7h/mp4.m3u8\n#EXT-X-STREAM-INF:BANDWIDTH=838139,RESOLUTION=640x360\n/us2w7h/mp4-mobile.m3u8\n", "max_version": 0, "original_bitrate": 913687, "original_duration": 5.375, "original_framerate": 24, "original_height": 576, "original_name": "movie_0037.mp4", "original_size": 613884, "original_width": 1024, "owner_plan": "streamable-basic-107_88-usd-annually", "percent": 100, "plays": 6221, "poster_url": "//cdn-cf-east.streamable.com/image/us2w7h_first.jpg?Expires=1743514680\u0026Signature=abbZSdhnvq436Qkm8VAkhbByiFqM~KrnuKgFhw208GqiM5nHnNFIcicpgQ4eZ-~zdMJal4tTUfmP9sjdQa58bVYBZ756E6Qki3s~0mo2g6MBBsl8Cdrh7gDz8qiyT5A8ziDSihniyXSWl4LbYEbNocatRSk9JoSfbDBGswqypGR4LW5~QFOMjicz3lI6suzJ35wLk7cTKHR7a1XzQbIIYtCySkyb1QxMGqKhYmc835POWqMLYPCskQw4SVls4wjnVrAk8foKV7cFqjz3fYGXxO81TQPIXMoPIIDju8vWMoOEpPhp3DC2j-xv5BLphHM~SGRohQQy8MK0x3DcnKjmKg__\u0026Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ", "privacy": 0, "privacy_settings": {"allow_download": false, "allow_sharing": true, "allowed_domain": "", "domain_restrictions": "off", "hide_view_count": false, "visibility": "public"}, "queued": null, "reddit_title": null, "reddit_url": null, "remove_branding": null, "shortcode": "us2w7h", "size": 463989, "source_title": null, "source_url": null, "status": 2, "subreddit": null, "tags": [], "thumb_gif": null, "thumbnail_offset": null, "thumbnail_url": "//cdn-cf-east.streamable.com/image/us2w7h.jpg?Expires=1743514680\u0026Signature=FSRITElU8gz2d8m-v6Z7iIhwlGK6NBmOkUBB3rrUjKM~iPhGreKxyZBnd4u8rNZO6~42mXBr2VhcuaUSXKqmNCn9q6oZNRaRRP7ajG5fNpqMKLXf4LSKvFD6SDRbLNFZtetD82X0D02scRlLs1Vmjaa8qCo35KPBvdfBqOgOeNcsNhDThAPhMJ9uwRyHsJjigxsC7WgzWqYtRuqeZhQVVge5TacWSZyykdl62CS3-9KEzFE3BERu7yJyuxzDKEhbquYT6-jg5Izc9Xg5IcJFACnYoFaulXZ5zVl2~n7FxXbOCPwurrp5oZfDBBF0m2TV6aLRjPDmx7dE82V5DwwJtA__\u0026Key-Pair-Id=APKAIEYUVEN4EVB2OKEQ", "title": "movie_0037", "trending": null, "upload_source": "web", "url": "https://streamable.com/us2w7h", "version": 0, "waiting_for_best": false, "watermark_link": null, "watermark_url": null, "width": 1024}; var player = document.getElementById('video-player-tag'); var playOverlay = document.getElementById('play-overlay') var spinner = document.getElementById('spinner') var id = null; var playerObject = new VideoPlayer(videoObject, player, id, { autoPlayMute: true, }); playerObject.initialize(); var playerWasPlaying = null //null means it never started //we store the volume so we mute the player while the ad is loading, //no way to get around this when using native controls to catch play var storedVolume = null function initPlayerJs() { var adapter = playerjs.HTML5Adapter(player); // Start accepting events adapter.ready(); } window.onunhandledrejection = function (e) { console.log("UNHANDLED REJECTION: " + e.reason) return false; }; </script> <script src="//v.embed-cdn.com/v16/player.js" async data-autoplay="true" data-background="black" data-anchor=".video-player-tag" data-shortcode="us2w7h" data-videoplays="6221" data-type="linear" data-responsive="true" data-duration="5.375" data-bitrate="690588" data-filename="mp4/us2w7h.mp4" data-title="movie_0037 - Embed" ></script> <script type="text/javascript" src="//cdn.embed.ly/player-0.1.0.min.js" async onload="initPlayerJs()"></script> </body> </html>

CINXE.COM

movie_0037 - Embed