daffy0208/ai-dev-standards/video-producer

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

Expert in video playback, streaming, and video player customization

Install

npx vskill@latest install daffy0208/ai-dev-standards/video-producer

SKILL.md

Video Producer Skill

I help you build video players, handle video streaming, and create engaging video experiences.

What I Do

Video Playback:

  • Custom video players with controls
  • Adaptive bitrate streaming (HLS, DASH)
  • Picture-in-picture mode
  • Fullscreen support

Video Features:

  • Subtitles and captions
  • Quality selection
  • Playback speed control
  • Thumbnail previews

Streaming:

  • Live video streaming
  • Video on demand (VOD)
  • Progressive download
  • Adaptive streaming

Custom Video Player

typescript
// components/VideoPlayer.tsx
'use client'
import { useRef, useState, useEffect } from 'react'
interface VideoPlayerProps {
  src: string
  poster?: string
  title?: string
}
export function VideoPlayer({ src, poster, title }: VideoPlayerProps) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const [playing, setPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(0)
  const [volume, setVolume] = useState(1)
  const [fullscreen, setFullscreen] = useState(false)
  const [showControls, setShowControls] = useState(true)
  useEffect(() => {
    const video = videoRef.current
    if (!video) return
    const updateTime = () => setCurrentTime(video.currentTime)
    const updateDuration = () => setDuration(video.duration)
    const handleEnded = () => setPlaying(false)
    video.addEventListener('timeupdate', updateTime)
    video.addEventListener('loadedmetadata', updateDuration)
    video.addEventListener('ended', handleEnded)
    return () => {
      video.removeEventListener('timeupdate', updateTime)
      video.removeEventListener('loadedmetadata', updateDuration)
      video.removeEventListener('ended', handleEnded)
    }
  }, [])
  const togglePlay = () => {
    if (!videoRef.current) return
    if (playing) {
      videoRef.current.pause()
    } else {
      videoRef.current.play()
    }
    setPlaying(!playing)
  }
  const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
    const time = parseFloat(e.target.value)
    setCurrentTime(time)
    if (videoRef.current) {
      videoRef.current.currentTime = time
    }
  }
  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const vol = parseFloat(e.target.value)
    setVolume(vol)
    if (videoRef.current) {
      videoRef.current.volume = vol
    }
  }
  const toggleFullscreen = () => {
    if (!videoRef.current) return
    if (!fullscreen) {
      videoRef.current.requestFullscreen()
    } else {
      document.exitFullscreen()
    }
    setFullscreen(!fullscreen)
  }
  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
    const secs = Math.floor(seconds % 60)
    return `${mins}:${secs.toString().padStart(2, '0')}`
  }
  return (
    <div
      className="relative bg-black rounded-lg overflow-hidden"
      onMouseEnter={() => setShowControls(true)}
      onMouseLeave={() => setShowControls(playing ? false : true)}
    >
      {title && (
        <div className="absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent z-10">
          <h3 className="text-white font-semibold">{title}</h3>
        </div>
      )}
      <video
        ref={videoRef}
        src={src}
        poster={poster}
        onClick={togglePlay}
        className="w-full"
      />
      {showControls && (
        <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent">
          {/* Progress Bar */}
          <input
            type="range"
            min="0"
            max={duration || 0}
            value={currentTime}
            onChange={handleSeek}
            className="w-full mb-2"
          />
          <div className="flex items-center gap-4">
            {/* Play/Pause */}
            <button
              onClick={togglePlay}
              className="text-white text-2xl hover:scale-110 transition"
            >
              {playing ? '⏸️' : '▶️'}
            </button>
            {/* Time */}
            <span className="text-white text-sm">
              {formatTime(currentTime)} / {formatTime(duration)}
            </span>
            {/* Volume */}
            <div className="flex items-center gap-2">
              <span className="text-white">��</span>
              <input
                type="range"
                min="0"
                max="1"
                step="0.1"
                value={volume}
                onChange={handleVolumeChange}
                className="w-20"
              />
            </div>
            <div className="flex-1" />
            {/* Fullscreen */}
            <button
              onClick={toggleFullscreen}
              className="text-white hover:scale-110 transition"
            >
              {fullscreen ? '⬛' : '⬜'}
            </button>
          </div>
        </div>
      )}
    </div>
  )
}

HLS Streaming (Adaptive Bitrate)

bash
npm install hls.js
typescript
// components/HLSPlayer.tsx
'use client'
import { useEffect, useRef } from 'react'
import Hls from 'hls.js'
export function HLSPlayer({ src }: { src: string }) {
  const videoRef = useRef<HTMLVideoElement>(null)
  useEffect(() => {
    const video = videoRef.current
    if (!video) return
    if (Hls.isSupported()) {
      const hls = new Hls({
        enableWorker: true,
        lowLatencyMode: true
      })
      hls.loadSource(src)
      hls.attachMedia(video)
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        console.log('HLS manifest loaded, quality levels:', hls.levels)
      })
      hls.on(Hls.Events.ERROR, (event, data) => {
        console.error('HLS error:', data)
        if (data.fatal) {
          switch (data.type) {
            case Hls.ErrorTypes.NETWORK_ERROR:
              hls.startLoad()
              break
            case Hls.ErrorTypes.MEDIA_ERROR:
              hls.recoverMediaError()
              break
            default:
              hls.destroy()
              break
          }
        }
      })
      return () => {
        hls.destroy()
      }
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      // Native HLS support (Safari)
      video.src = src
    }
  }, [src])
  return <video ref={videoRef} controls className="w-full" />
}

Picture-in-Picture

typescript
// components/PIPVideoPlayer.tsx
'use client'
import { useRef, useState } from 'react'
export function PIPVideoPlayer({ src }: { src: string }) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const [pipActive, setPipActive] = useState(false)
  const togglePIP = async () => {
    if (!videoRef.current) return
    try {
      if (!pipActive) {
        await videoRef.current.requestPictureInPicture()
        setPipActive(true)
      } else {
        await document.exitPictureInPicture()
        setPipActive(false)
      }
    } catch (error) {
      console.error('PIP error:', error)
    }
  }
  return (
    <div>
      <video ref={videoRef} src={src} controls className="w-full" />
      <button
        onClick={togglePIP}
        className="mt-4 px-4 py-2 bg-blue-600 text-white rounded"
      >
        {pipActive ? 'Exit PIP' : 'Enter PIP'}
      </button>
    </div>
  )
}

Subtitles/Captions

typescript
// components/VideoWithSubtitles.tsx
'use client'
export function VideoWithSubtitles() {
  return (
    <video controls className="w-full">
      <source src="/video.mp4" type="video/mp4" />
      <track
        kind="subtitles"
        src="/subtitles/en.vtt"
        srcLang="en"
        label="English"
        default
      />
      <track
        kind="subtitles"
        src="/subtitles/es.vtt"
        srcLang="es"
        label="Español"
      />
      <track
        kind="subtitles"
        src="/subtitles/fr.vtt"
        srcLang="fr"
        label="Français"
      />
    </video>
  )
}

VTT Subtitle File:

vtt
WEBVTT
 
00:00:00.000 --> 00:00:02.000
Hello, welcome to our video.
 
00:00:02.500 --> 00:00:05.000
Today we'll learn about web development.
 
00:00:05.500 --> 00:00:08.000
Let's get started!

Quality Selection

typescript
// components/QualitySelector.tsx
'use client'
import { useState } from 'react'
const qualities = [
  { label: '1080p', src: '/video-1080p.mp4' },
  { label: '720p', src: '/video-720p.mp4' },
  { label: '480p', src: '/video-480p.mp4' },
  { label: '360p', src: '/video-360p.mp4' }
]
export function QualitySelector() {
  const [currentQuality, setCurrentQuality] = useState(qualities[1])
  return (
    <div>
      <video src={currentQuality.src} controls className="w-full" />
      <div className="mt-4">
        <label className="mr-2">Quality:</label>
        <select
          value={currentQuality.label}
          onChange={(e) => {
            const quality = qualities.find(q => q.label === e.target.value)
            if (quality) setCurrentQuality(quality)
          }}
          className="px-4 py-2 border rounded"
        >
          {qualities.map((q) => (
            <option key={q.label} value={q.label}>
              {q.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  )
}

Playback Speed Control

typescript
// components/PlaybackSpeed.tsx
'use client'
import { useRef, useState } from 'react'
const speeds = [0.5, 0.75, 1, 1.25, 1.5, 2]
export function PlaybackSpeed({ src }: { src: string }) {
  const videoRef = useRef<HTMLVideoElement>(null)
  const [speed, setSpeed] = useState(1)
  const handleSpeedChange = (newSpeed: number) => {
    setSpeed(newSpeed)
    if (videoRef.current) {
      videoRef.current.playbackRate = newSpeed
    }
  }
  return (
    <div>
      <video ref={videoRef} src={src} controls className="w-full" />
      <div className="mt-4 flex gap-2">
        <span>Speed:</span>
        {speeds.map((s) => (
          <button
            key={s}
            onClick={() => handleSpeedChange(s)}
            className={`px-3 py-1 rounded ${
              speed === s ? 'bg-blue-600 text-white' : 'bg-gray-200'
            }`}
          >
            {s}x
          </button>
        ))}
      </div>
    </div>
  )
}

Video Thumbnail on Hover

typescript
// components/VideoThumbnailPreview.tsx
'use client'
import { useState } from 'react'
export function VideoThumbnailPreview({ videoSrc }: { videoSrc: string }) {
  const [thumbnailTime, setThumbnailTime] = useState(0)
  const handleProgressHover = (e: React.MouseEvent<HTMLDivElement>) => {
    const rect = e.currentTarget.getBoundingClientRect()
    const percent = (e.clientX - rect.left) / rect.width
    // Assuming 60 second video
    setThumbnailTime(percent * 60)
  }
  return (
    <div className="relative">
      <div
        onMouseMove={handleProgressHover}
        className="h-2 bg-gray-300 rounded cursor-pointer relative"
      >
        {/* Thumbnail preview */}
        <div
          className="absolute bottom-4 -translate-x-1/2 pointer-events-none"
          style={{ left: `${(thumbnailTime / 60) * 100}%` }}
        >
          <video
            src={videoSrc}
            className="w-40 h-24 object-cover rounded shadow-lg"
            muted
            currentTime={thumbnailTime}
          />
          <span className="block text-center text-sm mt-1">
            {Math.floor(thumbnailTime)}s
          </span>
        </div>
      </div>
      <video src={videoSrc} controls className="w-full mt-4" />
    </div>
  )
}

Video Upload with Progress

typescript
// components/VideoUpload.tsx
'use client'
import { useState } from 'react'
export function VideoUpload() {
  const [uploading, setUploading] = useState(false)
  const [progress, setProgress] = useState(0)
  const [videoURL, setVideoURL] = useState<string | null>(null)
  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return

This is the start of the file. Read the full SKILL.md on GitHub.

Security

  • Security scanPassed, 95 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
26
Repository forks
7
7-day trend score
16

Stars and forks are for the whole GitHub repository, not this skill alone. Refreshed 28 Mar 2026, 6 months ago.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/daffy0208/ai-dev-standards/video-producer/badge)](https://verified-skill.com/skills/daffy0208/ai-dev-standards/video-producer)

Something wrong with this skill or its page? Tell us.