sopplayer
Version:
Sopplayer is a sleek and feature-rich HTML5 video player that enhances the visual experience of videos on web pages. It offers compatibility across devices and browsers, supporting various video formats. With intuitive controls and customizable options, S
95 lines (84 loc) • 4.28 kB
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.0" />
<link rel="icon" href="./assets/favicon.svg" />
<link rel="stylesheet" href="./styles/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&display=swap" rel="stylesheet" />
<title>SopPlayer - Rainplayer Video Player</title>
</head>
<body>
<div id="tool" style="text-align:center;margin-top: 50px;margin-top: 20px;">
<img width="250px" src="./assets/favicon.svg" alt="logo">
<div class="form">
<input class="btnn-sponge" id="vidurl" type="text" placeholder="Enter Video URL *" autocomplete>
<br><br>
<input class="btnn-sponge" id="vidposter" type="text" placeholder="Poster URL" autocomplete>
<br><br>
<input class="btnn-sponge" id="vidtitle" type="text" placeholder="Title for Video" autocomplete>
<br><br>
<input class="btnn-sponge" id="viddesc" type="text" placeholder="Description for Video" autocomplete>
<br><br>
<button type="submit" class="bg-green btnn-sponge" onclick="preview()">Preview</button>
<br><br>
<button class="btnn-sponge" onclick="embed()">Embed</button>
<br><br>
<textarea placeholder="Your code will appear here" style="width: 80%;height: 100px;" class="bg-green btnn-sponge" id="code"></textarea>
<br><br><br>
<div id="preview">
</div>
<footer> © <a href="https://sh20raj.github.io/SopProducts/" target="_blank" rel="dofollow">SopProducts</a> | <a href="https://sh20raj.github.io/Sopplayer/" target="_blank" rel="dofollow">SopPlayer</a> </footer>
</div>
</div>
<main id="wrapper" class="wrapper">
<div class="player">
<div class="player-overlay" data-fullscreen="false">
<div class="container">
<div class="information-container">
<h1 id="title" class="title">Rain</h1>
<p id="description" class="description">
This is an example paragraph that serves to exemplify a
description of a video. This text is only visible at the
beginning of the video and when the mouse is over the screen.
</p>
</div>
<div class="player-container">
<div class="video-progress">
<div class="video-progress-filled"></div>
</div>
<div class="player-controls">
<div class="player-buttons">
<button aria-label="play" class="button play" title="play" type="button"></button>
<button aria-label="pause" class="button pause" hidden title="pause" type="button"></button>
<button aria-label="backward" class="button backward" title="backward" type="button"></button>
<button aria-label="forward" class="button forward" title="forward" type="button"></button>
<button aria-label="volume" class="button volume" title="volume" type="button"></button>
<button aria-label="silence" class="button silence" hidden title="silence" type="button"></button>
<div class="volume-progress">
<div class="volume-progress-filled"></div>
</div>
<div class="time-container">
<p class="current-time">0:00</p>
<p class="time-separator">/</p>
<p class="duration-video">0:00</p>
</div>
</div>
<div class="expand-container">
<button aria-label="expand" class="button expand" title="expand" type="button"></button>
<button aria-label="reduce" class="button reduce" hidden title="reduce" type="button"></button>
</div>
</div>
</div>
</div>
</div>
<video id="video" class="video" poster="./assets/poster.png" src="./assets/rain.mp4"></video>
</div>
</main>
<script src="./js/script.js"></script>
<script src="./js/index.js"></script>
</body>
</html>