Reprodutor de vídeo brutalista

518 alejandrokundrah

Abrir no Editor Publique Seu Código

Recomendado

12 May 2025

Texto para arquivo

28 March 2023

11 September 2025

Jogo de tiro HTML5 Canvas com placar

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Futuristic Video Player</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div class="video-container">
    <div class="video-wrapper">
      <video id="video" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
      
      <div class="video-controls">
        <div class="top-controls">
          <div class="title">Big Buck Bunny</div>
          <div class="right-controls">
            <button id="cast-btn" class="control-btn tooltip" data-tooltip="Cast to device">
              <i class="fas fa-cast"></i>
            </button>
            <button id="download-btn" class="control-btn tooltip" data-tooltip="Download">
              <i class="fas fa-download"></i>
            </button>
            <button id="share-btn" class="control-btn tooltip" data-tooltip="Share">
              <i class="fas fa-share-alt"></i>
            </button>
          </div>
        </div>
        
        <div class="center-controls">
          <button id="rewind-btn" class="control-btn">
            <i class="fas fa-backward"></i>
          </button>
          <button id="play-pause-btn" class="control-btn">
            <i class="fas fa-play"></i>
          </button>
          <button id="forward-btn" class="control-btn">
            <i class="fas fa-forward"></i>
          </button>
        </div>
        
        <div class="bottom-controls">
          <div class="progress-container">
            <div class="buffered-progress"></div>
            <div class="playback-progress"></div>
            <input type="range" class="progress-slider" min="0" max="100" value="0" step="0.1">
          </div>
          
          <div class="controls-bar">
            <div class="left-controls">
              <button id="volume-btn" class="control-btn">
                <i class="fas fa-volume-up"></i>
              </button>
              <div class="volume-slider-container">
                <input type="range" class="volume-slider" min="0" max="1" value="1" step="0.1">
              </div>
              <div class="time-display">
                <span id="current-time">0:00</span>
                <span>/</span>
                <span id="duration">0:00</span>
              </div>
            </div>
            
            <div class="right-controls">
              <div class="quality-control dropdown">
                <button class="dropdown-toggle tooltip" data-tooltip="Quality">
                  <i class="fas fa-cog"></i>
                </button>
                <div class="dropdown-menu">
                  <div class="dropdown-item active" data-quality="auto">Auto</div>
                  <div class="dropdown-item" data-quality="1080p">1080p</div>
                  <div class="dropdown-item" data-quality="720p">720p</div>
                  <div class="dropdown-item" data-quality="480p">480p</div>
                  <div class="dropdown-item" data-quality="360p">360p</div>
                </div>
              </div>
              
              <div class="subtitles-control dropdown">
                <button class="dropdown-toggle tooltip" data-tooltip="Subtitles">
                  <i class="fas fa-closed-captioning"></i>
                </button>
                <div class="dropdown-menu">
                  <div class="dropdown-item active" data-subtitle="off">Off</div>
                  <div class="dropdown-item" data-subtitle="en">English</div>
                  <div class="dropdown-item" data-subtitle="es">Spanish</div>
                  <div class="dropdown-item" data-subtitle="fr">French</div>
                  <div class="dropdown-item" data-subtitle="de">German</div>
                  <div class="dropdown-item" data-subtitle="ja">Japanese</div>
                </div>
              </div>
              
              <div class="language-control dropdown">
                <button class="dropdown-toggle tooltip" data-tooltip="Audio">
                  <i class="fas fa-language"></i>
                </button>
                <div class="dropdown-menu">
                  <div class="dropdown-item active" data-language="original">Original</div>
                  <div class="dropdown-item" data-language="en">English</div>
                  <div class="dropdown-item" data-language="es">Spanish</div>
                  <div class="dropdown-item" data-language="fr">French</div>
                  <div class="dropdown-item" data-language="de">German</div>
                  <div class="dropdown-item" data-language="ja">Japanese</div>
                </div>
              </div>
              
              <button id="translate-btn" class="control-btn tooltip" data-tooltip="Live Translation">
                <i class="fas fa-globe"></i>
              </button>
              
              <button id="fullscreen-btn" class="control-btn tooltip" data-tooltip="Fullscreen">
                <i class="fas fa-expand"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div id="share-modal" class="modal">
    <div class="modal-content">
      <span class="close-modal">×</span>
      <h2>Share Video</h2>
      <div class="share-options">
        <button class="share-option" data-platform="facebook">
          <i class="fab fa-facebook"></i> Facebook
        </button>
        <button class="share-option" data-platform="twitter">
          <i class="fab fa-twitter"></i> Twitter
        </button>
        <button class="share-option" data-platform="whatsapp">
          <i class="fab fa-whatsapp"></i> WhatsApp
        </button>
        <button class="share-option" data-platform="email">
          <i class="fas fa-envelope"></i> Email
        </button>
      </div>
      <div class="share-link">
        <input type="text" id="share-url" value="https://example.com/video/big-buck-bunny" readonly>
        <button id="copy-link-btn">Copy</button>
      </div>
    </div>
  </div>
  
  <div id="cast-modal" class="modal">
    <div class="modal-content">
      <span class="close-modal">×</span>
      <h2>Cast to Device</h2>
      <div class="cast-devices">
        <div class="cast-device">
          <i class="fas fa-tv"></i>
          <span>Living Room TV</span>
        </div>
        <div class="cast-device">
          <i class="fas fa-tablet-alt"></i>
          <span>Bedroom Tablet</span>
        </div>
        <div class="cast-device">
          <i class="fas fa-desktop"></i>
          <span>Office Computer</span>
        </div>
        <div class="cast-device">
          <i class="fas fa-hdd"></i>
          <span>Media Center</span>
        </div>
      </div>
    </div>
  </div>
  
  <div id="translate-modal" class="modal">
    <div class="modal-content">
      <span class="close-modal">×</span>
      <h2>Live Translation Settings</h2>
      <div class="translation-options">
        <div class="translation-option">
          <label for="translation-source">Translate from:</label>
          <select id="translation-source">
            <option value="auto">Auto-detect</option>
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="ja">Japanese</option>
          </select>
        </div>
        <div class="translation-option">
          <label for="translation-target">Translate to:</label>
          <select id="translation-target">
            <option value="en">English</option>
            <option value="es">Spanish</option>
            <option value="fr">French</option>
            <option value="de">German</option>
            <option value="ja">Japanese</option>
          </select>
        </div>
      </div>
      <button id="apply-translation-btn">Apply</button>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

CSS

:root {
  --primary-color: #00b4ff;
  --secondary-color: #7a29ff;
  --background-color: #0f1923;
  --surface-color: #1a2530;
  --text-color: #ffffff;
  --text-secondary-color: #a0a0a0;
  --accent-color: #ff2970;
  --overlay-color: rgba(0, 0, 0, 0.7);
  --tooltip-background: rgba(26, 37, 48, 0.95);
  --gradient: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container {
  width: 90%;
  max-width: 1200px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background-color: var(--surface-color);
}

.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

.video-controls {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.8) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.video-wrapper:hover .video-controls,
.video-controls.active {
  opacity: 1;
}

.top-controls, .bottom-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}

.top-controls {
  justify-content: space-between;
}

.title {
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.center-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 2;
}

.control-btn {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 16px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.center-controls .control-btn {
  font-size: 20px;
}

#play-pause-btn {
  background-color: var(--primary-color);
  width: 50px;
  height: 50px;
}

.control-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

#play-pause-btn:hover {
  background-color: var(--secondary-color);
  transform: scale(1.05);
}

.progress-container {
  position: relative;
  width: 100%;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 10px;
}

.buffered-progress, .playback-progress {
  position: absolute;
  height: 100%;
  border-radius: 5px;
  left: 0;
}

.buffered-progress {
  background-color: rgba(255, 255, 255, 0.3);
  width: 70%; /* Example value */
}

.playback-progress {
  background: var(--gradient);
  width: 30%; /* Example value */
}

.progress-slider {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.time-display {
  color: var(--text-secondary-color);
  font-size: 14px;
  margin-left: 15px;
}

.controls-bar {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.left-controls, .right-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.volume-slider-container {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

.volume-slider-container.active {
  width: 80px;
}

.volume-slider {
  width: 80px;
  height: 5px;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  outline: none;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-color);
  cursor: pointer;
}

.tooltip {
  position: relative;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background-color: var(--tooltip-background);
  color: var(--text-color);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tooltip:hover::after {
  opacity: 1;
}

.dropdown {
  position: relative;
}

.dropdown-toggle {
  background: none;
  border: none;
  color: var(--text-color);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.dropdown-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown-menu {
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: var(--tooltip-background);
  border-radius: 8px;
  padding: 8px 0;
  min-width: 150px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 10;
  margin-bottom: 10px;
}

.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: var(--text-secondary-color);
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
}

.dropdown-item.active {
  color: var(--primary-color);
  font-weight: 500;
}

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--surface-color);
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary-color);
  transition: color 0.2s ease;
}

.close-modal:hover {
  color: var(--text-color);
}

.modal-content h2 {
  margin-bottom: 20px;
  color: var(--text-color);
  font-weight: 500;
}

/* Share Modal */
.share-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.share-option {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--text-color);
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}

.share-option:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.share-link {
  display: flex;
  margin-top: 15px;
}

#share-url {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  border-radius: 6px 0 0 6px;
  outline: none;
}

#copy-link-btn {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  padding: 0 15px;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#copy-link-btn:hover {
  background-color: var(--secondary-color);
}

/* Cast Modal */
.cast-devices {
  display: grid;
  gap: 12px;
}

.cast-device {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cast-device:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.cast-device i {
  font-size: 20px;
  color: var(--primary-color);
}

/* Translation Modal */
.translation-options {
  display: grid;
  gap: 15px;
  margin-bottom: 20px;
}

.translation-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.translation-option label {
  color: var(--text-secondary-color);
  font-size: 14px;
}

.translation-option select {
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: var(--text-color);
  outline: none;
}

#apply-translation-btn {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s ease;
  margin-top: 10px;
}

#apply-translation-btn:hover {
  background-color: var(--secondary-color);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .video-controls {
    padding: 15px;
  }
  
  .title {
    font-size: 16px;
  }
  
  .control-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  #play-pause-btn {
    width: 46px;
    height: 46px;
  }
  
  .right-controls {
    gap: 10px;
  }
  
  .share-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .video-controls {
    padding: 10px;
  }
  
  .top-controls .right-controls,
  .bottom-controls .right-controls {
    gap: 8px;
  }
  
  .control-btn {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  #play-pause-btn {
    width: 42px;
    height: 42px;
  }
  
  .time-display {
    font-size: 12px;
  }
  
  .modal-content {
    padding: 15px;
  }
}

JS

Recomendado

Texto para arquivo

Jogo de tiro HTML5 Canvas com placar

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS