webserverai
Version:
WebServerAI is an advanced project using AI to revolutionize web development. It empowers users to create visually stunning websites tailored to their needs without extensive coding knowledge. This innovative tool streamlines the design process, offering
101 lines • 4.93 kB
HTML
<section class="video-player-section">
<div class="video-container">
<div class="video_player">
<div class="spinner"></div>
<video class="video"></video>
<p class="caption_text"></p>
<div class="video-controls">
<div class="video-thumbnail"></div>
<div class="video-progresstime">00:00</div>
<div class="video-progress">
<div class="video-progress-bar">
<span></span>
</div>
<div class="buffered-progress-bar"></div>
</div>
<div class="controls-list">
<div class="controls-left">
<span class="icon">
<i class="material-icons fast-rewind">replay_10</i>
</span>
<span class="icon">
<i class="material-icons play_pause">play_arrow</i>
</span>
<span class="icon">
<i class="material-icons fast-forward">forward_10</i>
</span>
<span class="icon">
<i class="material-icons volume">volume_up</i>
<input type="range" min="0" max="100" value="100" class="volume_range"/>
</span>
<div class="video-timer">
<span class="current">00:00</span>/<span class="duration">0:00</span>
</div>
</div>
<div class="controls-right">
<span class="icon">
<i class="material-icons auto-play"></i>
</span>
<span class="icon">
<i class="material-icons settingsBtn">settings</i>
</span>
<span class="icon">
<i class="material-icons captionsBtn">closed_caption</i>
</span>
<span class="icon">
<i class="material-icons pip">picture_in_picture_alt</i>
</span>
<span class="icon">
<i class="material-icons fullscreen">fullscreen</i>
</span>
</div>
</div>
<div class="video-settings">
<div data-label="video-settingsHome">
<ul>
<li data-label="speed">
<span>Speed</span>
<span class="material-icons">arrow_forward_ios</span>
</li>
<li data-label="quality">
<span>Quality</span>
<span class="material-icons">arrow_forward_ios</span>
</li>
</ul>
</div>
<div class="video-playback" data-label="speed" hidden>
<span>
<i class="material-icons icon back_arrow" data-label="video-settingsHome">arrow_back</i>
<span>Playback Speed</span>
</span>
<ul>
<li data-speed="0.25">0.25</li>
<li data-speed="0.5">0.5</li>
<li data-speed="0.75">0.75</li>
<li data-speed="1" class="active">Normal</li>
<li data-speed="1.25">1.25</li>
<li data-speed="1.5">1.5</li>
<li data-speed="1.75">1.75</li>
<li data-speed="2">2</li>
</ul>
</div>
<div class="video-quality" data-label="quality" hidden>
<span>
<i class="material-icons icon back_arrow" data-label="video-settingsHome">arrow_back</i>
<span>Playback Quality</span>
</span>
<ul>
<li data-quality="auto" class="active">auto</li>
</ul>
</div>
</div>
<div class="video-captions">
<div class="video-caption">
<span>Select Subtitle</span>
<ul></ul>
</div>
</div>
</div>
</div>
</div>
</section>