vp-outstream-player/src/ui/template.ts

Outstream video player with Google IMA integration

const template = () => `
<video class="vp-video" playsinline webkit-playsinline x5-playsinline x5-video-player-autoplay></video>
<div class="vp-ad-container"></div>
<div class="vp-loading"><div class="vp-loader"><svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="3" stroke-miterlimit="10"/></svg></div></div>
<div class="vp-ui-backdrop"></div>
	<div class="vp-player-ui">
		<div class="vp-controls">
			<button class="vp-btn vp-play hidden"></button>
      <div class="vp-volume-container">
        <button class="vp-btn vp-mute hidden"></button>
        <input class="vp-slider vp-volume" type="range" min="0" max="1" step="0.02" value="0" />
      </div>
			<div class="vp-progress-time">
				<span class="vp-time">00:00</span>
			</div>
			<button class="vp-btn vp-skip hidden"></button>
			<div class="vp-progress">
				<div class="vp-progress-bar"></div>
			</div>
		</div>
	</div>
`;

export default template;