148 lines
7.4 KiB
HTML
148 lines
7.4 KiB
HTML
|
<!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.0">
|
||
|
|
<title>Video Player</title>
|
||
|
|
<link rel="stylesheet" href="css/player.css">
|
||
|
|
<script src="js/player.js" defer></script>
|
||
|
|
<script src="js/num2unit.js"></script>
|
||
|
|
<script src="js/tytd-jquery.js"></script>
|
||
|
|
<script src="js/jquery.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="video-container paused" data-volume-level="high">
|
||
|
|
<img class="thumbnail-img">
|
||
|
|
<div class="video-controls-container">
|
||
|
|
<div class="timeline-container">
|
||
|
|
<div class="timeline">
|
||
|
|
<div class="thumb-indicator"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="controls">
|
||
|
|
<button class="play-pause-btn">
|
||
|
|
<svg class="play-icon" viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M8,5.14V19.14L19,12.14L8,5.14Z" />
|
||
|
|
</svg>
|
||
|
|
<svg class="pause-icon" viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M14,19H18V5H14M6,19H10V5H6V19Z" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<div class="volume-container">
|
||
|
|
<button class="mute-btn">
|
||
|
|
<svg class="volume-high-icon" viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z" />
|
||
|
|
</svg>
|
||
|
|
<svg class="volume-low-icon" viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M5,9V15H9L14,20V4L9,9M18.5,12C18.5,10.23 17.5,8.71 16,7.97V16C17.5,15.29 18.5,13.76 18.5,12Z" />
|
||
|
|
</svg>
|
||
|
|
<svg class="volume-muted-icon" viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<input class="volume-slider" type="range" min="0" max="1" step="any" value="1">
|
||
|
|
</div>
|
||
|
|
<div class="duration-container">
|
||
|
|
<div class="current-time">0:00</div>
|
||
|
|
/
|
||
|
|
<div class="total-time"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<button class="speed-btn wide-btn">
|
||
|
|
1x
|
||
|
|
</button>
|
||
|
|
|
||
|
|
|
||
|
|
<button class="download-btn">
|
||
|
|
<svg viewBox="0 0 48 48">
|
||
|
|
<path fill="currentColor" d="M24 32.35 14.35 22.7 16.5 20.55 22.5 26.55V8H25.5V26.55L31.5 20.55L33.65 22.7ZM11 40Q9.8 40 8.9 39.1Q8 38.2 8 37V29.85H11V37Q11 37 11 37Q11 37 11 37H37Q37 37 37 37Q37 37 37 37V29.85H40V37Q40 38.2 39.1 39.1Q38.2 40 37 40Z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button class="mini-player-btn">
|
||
|
|
<svg viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14zm-10-7h9v6h-9z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button class="theater-btn">
|
||
|
|
<svg class="tall" viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M19 6H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H5V8h14v8z"/>
|
||
|
|
</svg>
|
||
|
|
<svg class="wide" viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M19 7H5c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm0 8H5V9h14v6z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
<button class="full-screen-btn">
|
||
|
|
<svg class="open" viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
|
||
|
|
</svg>
|
||
|
|
<svg class="close" viewBox="0 0 24 24">
|
||
|
|
<path fill="currentColor" d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<video src=""></video>
|
||
|
|
<a href="" download id="Mux" hidden></a>
|
||
|
|
<a href="" download id="PreMuxed" hidden></a>
|
||
|
|
<a href="" download id="Audio" hidden></a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="video-info">
|
||
|
|
<div class="video-title" >
|
||
|
|
<h3 id="video-title">Title</h3>
|
||
|
|
</div>
|
||
|
|
<div class="video-stats">
|
||
|
|
<div><span id="video-views">0 </span> views • <span id="video-date"></span></div>
|
||
|
|
<div class="video-actions">
|
||
|
|
<button class="video-action" onclick="alert('Likes are readonly')">
|
||
|
|
|
||
|
|
<svg viewBox="0 0 24 24" width="30" height="30">
|
||
|
|
<path d="M18.77,11h-4.23l1.52-4.94C16.38,5.03,15.54,4,14.38,4c-0.58,0-1.14,0.24-1.52,0.65L7,11H3v10h4h1h9.43 c1.06,0,1.98-0.67,2.19-1.61l1.34-6C21.23,12.15,20.18,11,18.77,11z M7,20H4v-8h3V20z M19.98,13.17l-1.34,6 C18.54,19.65,18.03,20,17.43,20H8v-8.61l5.6-6.06C13.79,5.12,14.08,5,14.38,5c0.26,0,0.5,0.11,0.63,0.3 c0.07,0.1,0.15,0.26,0.09,0.47l-1.52,4.94L13.18,12h1.35h4.23c0.41,0,0.8,0.17,1.03,0.46C19.92,12.61,20.05,12.86,19.98,13.17z"/>
|
||
|
|
</svg> <a id="video-likes">LIKE</a>
|
||
|
|
</button>
|
||
|
|
<button class="video-action" onclick="alert('Dislikes are readonly')">
|
||
|
|
|
||
|
|
<svg viewBox="0 0 24 24" width="30" height="30">
|
||
|
|
<path d="M17,4h-1H6.57C5.5,4,4.59,4.67,4.38,5.61l-1.34,6C2.77,12.85,3.82,14,5.23,14h4.23l-1.52,4.94C7.62,19.97,8.46,21,9.62,21 c0.58,0,1.14-0.24,1.52-0.65L17,14h4V4H17z M10.4,19.67C10.21,19.88,9.92,20,9.62,20c-0.26,0-0.5-0.11-0.63-0.3 c-0.07-0.1-0.15-0.26-0.09-0.47l1.52-4.94l0.4-1.29H9.46H5.23c-0.41,0-0.8-0.17-1.03-0.46c-0.12-0.15-0.25-0.4-0.18-0.72l1.34-6 C5.46,5.35,5.97,5,6.57,5H16v8.61L10.4,19.67z M20,13h-3V5h3V13z"/>
|
||
|
|
</svg> <a id="video-dislikes"> DISLIKE</a>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button class="video-action">
|
||
|
|
|
||
|
|
<svg class="share-icon" viewBox="0 0 24 24" width="30" height="30">
|
||
|
|
<path fill="currentColor" d="M15,5.63L20.66,12L15,18.37V15v-1h-1c-3.96,0-7.14,1-9.75,3.09c1.84-4.07,5.11-6.4,9.89-7.1L15,9.86V9V5.63 M14,3v6 C6.22,10.13,3.11,15.33,2,21c2.78-3.97,6.44-6,12-6v6l8-9L14,3L14,3z"/>
|
||
|
|
</svg> SHARE
|
||
|
|
|
||
|
|
|
||
|
|
</button>
|
||
|
|
<button class="video-action res-btn">
|
||
|
|
PreMuxed
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<hr>
|
||
|
|
<div class="channel-info">
|
||
|
|
<img src="" id="video-channel-icon" alt="" width="64" height="64">
|
||
|
|
<div>
|
||
|
|
<p id="video-channel-title"></p>
|
||
|
|
</div>
|
||
|
|
<button type="button" class="subscribe">SUBSCRIBE</button>
|
||
|
|
<button type="button" class="bell">
|
||
|
|
<svg viewBox="0 0 24 24" width="30" height="30">
|
||
|
|
<path d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="description" id="video-description">
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus dolorum dolore corrupti quos, unde aliquam rerum libero saepe eius ipsam neque? Impedit magnam quam minus molestias ipsam quos voluptates repellat.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|