arcplayer

v1.0.1

Published

a month ago

Player de YouTube moderno, customizável e leve. Sem dependências.

Downloads

0High
0Medium
0Low

steveodev

youtube player video embed youtube-embed video-player youtube-player shorts youtube-shorts vanilla-js

🎬 ArcPlayer

Player de YouTube moderno, customizável e leve. Sem dependências externas.

✨ Características

🎨 UI Moderna - Interface limpa e responsiva
📱 Suporte a Shorts - Detecta e adapta para vídeos verticais automaticamente
⌨️ Atalhos de Teclado - Controles completos via teclado
🎯 Zero Dependências - JavaScript puro, sem frameworks
🔧 Altamente Customizável - CSS Variables para personalização
📦 Leve - ~27KB minificado (bundle com CSS incluído)

🚀 Instalação via CDN

Opção 1: Bundle Único (Recomendado)

Inclui CSS automaticamente - apenas uma linha de código:

<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/arcplayer.bundle.min.js"></script>

<!-- ou unpkg -->
<script src="https://unpkg.com/[email protected]/dist/arcplayer.bundle.min.js"></script>

Opção 2: CSS + JS Separados

Mais controle sobre o carregamento:

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/arcplayer.min.css">

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/arcplayer.min.js"></script>

📦 Instalação via npm

npm install arcplayer

// ES Modules
import ArcPlayer from 'arcplayer';
import 'arcplayer/dist/arcplayer.min.css';

// CommonJS
const ArcPlayer = require('arcplayer');

📖 Uso Básico

<!DOCTYPE html>
<html>
<head>
  <!-- Bundle único (inclui CSS) -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/arcplayer.bundle.min.js"></script>
</head>
<body>
  <!-- Container do player -->
  <div id="player"></div>

  <script>
    // Inicializar com URL do YouTube
    const player = new ArcPlayer('#player', {
      url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
      autoplay: true
    });
  </script>
</body>
</html>

⚙️ Opções de Configuração

const player = new ArcPlayer('#player', {
  // Fonte do vídeo (usar url OU videoId)
  url: 'https://www.youtube.com/watch?v=VIDEO_ID',
  videoId: 'VIDEO_ID',
  
  // Comportamento
  autoplay: true,        // Iniciar automaticamente (default: true)
  muted: true,           // Iniciar mutado (default: true, necessário para autoplay)
  
  // Aparência
  vertical: false,       // Forçar modo vertical/Shorts (auto-detectado)
  accent: '#8b5cf6'      // Cor de destaque (default: #202020)
});

Formatos de URL Suportados

// Todos esses formatos são aceitos:
'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
'https://youtu.be/dQw4w9WgXcQ'
'https://www.youtube.com/embed/dQw4w9WgXcQ'
'https://www.youtube.com/shorts/SXHMnicI6Pg'

🎮 API de Controle

// Reprodução
player.play();
player.pause();
player.stop();

// Navegação
player.seekTo(30);          // Ir para 30 segundos
player.seekBy(10);          // Avançar 10 segundos
player.seekBy(-5);          // Voltar 5 segundos

// Volume
player.mute();
player.unmute();
player.toggleMute();
player.setVolume(0.8);      // 0 a 1
player.getVolume();

// Velocidade
player.setPlaybackRate(1.5); // 0.25 a 2
player.getPlaybackRate();

// Qualidade
player.setQuality('hd1080'); // auto, hd2160, hd1440, hd1080, hd720, large, medium, small, tiny
player.getQuality();
player.getAvailableQualities();

// Informações
player.getCurrentTime();     // Tempo atual em segundos
player.getDuration();        // Duração total em segundos
player.isPlaying();          // Boolean

// Destruir
player.destroy();

Métodos Estáticos

// Extrair ID de qualquer URL do YouTube
const videoId = ArcPlayer.extractVideoId('https://youtu.be/dQw4w9WgXcQ');
// Resultado: 'dQw4w9WgXcQ'

// Verificar se é um Short
const isShort = ArcPlayer.isShortUrl('https://youtube.com/shorts/abc123');
// Resultado: true

// Versão
console.log(ArcPlayer.version); // '1.0.1'

⌨️ Atalhos de Teclado

| Tecla | Ação | |-------|------| | Space / K | Play/Pause | | ← / J | Voltar 5s | | → / L | Avançar 5s | | ↑ | Aumentar volume | | ↓ | Diminuir volume | | M | Mutar/Desmutar | | F | Tela cheia | | , | Diminuir velocidade | | . | Aumentar velocidade |

🎨 Personalização CSS

Via CSS Variables

:root {
  --arcplayer-accent: #8b5cf6; /* Cor principal */
}

/* Ou por player específico */
#meu-player {
  --arcplayer-accent: #ef4444;
}

Via JavaScript

const player = new ArcPlayer('#player', {
  url: '...',
  accent: '#8b5cf6' // Cor de destaque
});

Classes CSS Disponíveis

.arcplayer { }                /* Container principal */
.arcplayer.vertical { }       /* Modo vertical (Shorts) */
.arcplayer.ready { }          /* Player carregado */
.arcplayer.controls-hidden { } /* Controles ocultos */
.arcplayer-btn { }            /* Botões de controle */
.arcplayer-progress { }       /* Barra de progresso */
.arcplayer-bar { }            /* Indicador de progresso */
.arcplayer-timecode { }       /* Display de tempo */

📁 Estrutura de Arquivos

arcplayer/
├── dist/
│   ├── arcplayer.min.js        # JS minificado (22KB)
│   ├── arcplayer.min.css       # CSS minificado (5.6KB)
│   ├── arcplayer.bundle.js     # Bundle completo
│   └── arcplayer.bundle.min.js # Bundle minificado (27KB)
├── arcplayer.js                # JS fonte
├── arcplayer.css               # CSS fonte
└── package.json

🔗 Links CDN Diretos

jsDelivr (Recomendado)

https://cdn.jsdelivr.net/npm/[email protected]/dist/arcplayer.bundle.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/arcplayer.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/arcplayer.min.css

unpkg

https://unpkg.com/[email protected]/dist/arcplayer.bundle.min.js
https://unpkg.com/[email protected]/dist/arcplayer.min.js
https://unpkg.com/[email protected]/dist/arcplayer.min.css

⚠️ Notas Importantes

Servidor Local Necessário: O player não funciona via file://. Use um servidor local:
```
npx serve
# ou
python -m http.server
```
Autoplay com Som: Navegadores bloqueiam autoplay com áudio. Inicie mutado (muted: true) e o usuário desmuta manualmente.
Restrições de Embed: Alguns vídeos têm embed desabilitado pelo autor.

📄 Licença

MIT © Seu Nome

🤝 Contribuindo

Contribuições são bem-vindas! Abra uma issue ou pull request.