如何使用TailwindCSS和JavaScript构建自定义的HTML5视频播放器




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom HTML5 Video Player</title>
    <!-- Tailwind CSS -->
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="mx-auto max-w-lg bg-white rounded-lg shadow overflow-hidden">
        <video id="video" class="w-full" controls>
            <source src="your-video-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="flex items-center justify-between px-2 py-2 bg-gray-100">
            <!-- Play/Pause Button -->
            <button id="playPause" class="text-blue-500" onclick="togglePlayPause()">
                Play/Pause
            </button>
            <!-- Progress Bar -->
            <div class="w-1/4">
                <input id="seek" type="range" min="0" max="100" value="0" onchange="seekTo()">
            </div>
            <!-- Timer -->
            <div id="timer" class="text-gray-600">00:00 / 00:00</div>
        </div>
    </div>
 
    <script>
        function togglePlayPause() {
            var video = document.getElementById('video');
            if (video.paused) {
                video.play();
            } else {
                video.pause();
            }
        }
 
        function seekTo() {
            var video = document.getElementById('video');
            var seekTo = (event.target.value / 100) * video.duration;
            video.currentTime = seekTo;
        }
 
        // Update the seek slider and timer
        function updateProgress() {
            var video = document.getElementById('video');
            var progress = (video.currentTime / video.duration) * 100;
            document.getElementById('seek').value = progress;
 
            // Calculate the time left and time total
            var minutes = Math.floor(video.currentTime / 60);
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            var seconds = Math.floor(video.currentTime % 60);
            if (seconds < 10) {
                seconds = '0' + seconds;
            }
            var totalMinutes = Math.floor(video.duration / 60);
            if (totalMinutes < 10) {
                totalMinutes = '0' + totalMinutes;
            }
如何使用TailwindCSS和JavaScript构建自定义的HTML5视频播放器

评论已关闭

推荐阅读
