Article Categories

Selected Reading

Play local (hard-drive) video file with HTML5 video tag?

HTML Javascript Programming Scripts

The HTML5 <video> tag allows you to play local video files from the user's hard drive using JavaScript's File API and URL.createObjectURL() method. This technique works with MP4, WebM, and Ogg video formats.

HTML Structure

Create a file input and video element:

<!DOCTYPE html>
<html>
<head>
    <title>Local Video Player</title>
</head>
<body>
    <input type="file" id="videoFile" accept="video/*">
    <br><br>
    <video id="videoPlayer" width="600" height="400" controls>
        Your browser does not support the video tag.
    </video>

    <script>
        const fileInput = document.getElementById('videoFile');
        const videoPlayer = document.getElementById('videoPlayer');

        fileInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            
            if (file && file.type.startsWith('video/')) {
                // Create object URL for the selected file
                const videoURL = URL.createObjectURL(file);
                
                // Set the video source to the object URL
                videoPlayer.src = videoURL;
                
                console.log('Video loaded:', file.name);
                console.log('File size:', (file.size / 1024 / 1024).toFixed(2) + ' MB');
            } else {
                alert('Please select a valid video file');
            }
        });
    </script>
</body>
</html>

How It Works

The process involves four key steps:

File Selection: The change event fires when user selects a file via the input element
File Object Access: The files property returns a File object containing file information
Object URL Creation: URL.createObjectURL() creates a temporary URL pointing to the file
Video Source Assignment: The object URL is assigned to the video's src property

Advanced Example with Error Handling

<!DOCTYPE html>
<html>
<head>
    <title>Advanced Local Video Player</title>
    <style>
        .video-container { margin: 20px 0; }
        .file-info { background: #f5f5f5; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <h2>Local Video Player</h2>
    
    <input type="file" id="videoFile" accept="video/mp4,video/webm,video/ogg">
    <div id="fileInfo" class="file-info" style="display: none;"></div>
    
    <div class="video-container">
        <video id="videoPlayer" width="800" height="450" controls>
            Your browser does not support the video tag.
        </video>
    </div>

    <script>
        const fileInput = document.getElementById('videoFile');
        const videoPlayer = document.getElementById('videoPlayer');
        const fileInfo = document.getElementById('fileInfo');
        let currentObjectURL = null;

        fileInput.addEventListener('change', function(event) {
            const file = event.target.files[0];
            
            // Clean up previous object URL to prevent memory leaks
            if (currentObjectURL) {
                URL.revokeObjectURL(currentObjectURL);
            }
            
            if (file) {
                if (file.type.startsWith('video/')) {
                    // Create new object URL
                    currentObjectURL = URL.createObjectURL(file);
                    
                    // Set video source
                    videoPlayer.src = currentObjectURL;
                    
                    // Display file information
                    fileInfo.style.display = 'block';
                    fileInfo.innerHTML = `
                        <strong>File:</strong> ${file.name}<br>
                        <strong>Size:</strong> ${(file.size / 1024 / 1024).toFixed(2)} MB<br>
                        <strong>Type:</strong> ${file.type}<br>
                        <strong>Last Modified:</strong> ${new Date(file.lastModified).toLocaleString()}
                    `;
                    
                    console.log('Video loaded successfully');
                } else {
                    alert('Please select a valid video file (MP4, WebM, or Ogg)');
                    fileInfo.style.display = 'none';
                }
            }
        });

        // Clean up object URL when video loads
        videoPlayer.addEventListener('loadstart', function() {
            console.log('Video loading started');
        });

        videoPlayer.addEventListener('error', function() {
            console.error('Error loading video file');
            alert('Error: Unable to load the selected video file');
        });
    </script>
</body>
</html>

Key Points

File Validation: Always check if the selected file is a video using file.type.startsWith('video/')
Memory Management: Use URL.revokeObjectURL() to clean up object URLs and prevent memory leaks
Supported Formats: HTML5 video supports MP4, WebM, and Ogg formats across different browsers
Security: Object URLs are temporary and only accessible within the same origin

Browser Compatibility

Feature	Chrome	Firefox	Safari	Edge
File API	13+	3.6+	6+	12+
URL.createObjectURL()	8+	4+	6+	12+
HTML5 Video	4+	3.5+	4+	9+

Conclusion

Playing local video files with HTML5 requires combining the File API with URL.createObjectURL() to create temporary URLs. Always validate file types and clean up object URLs to prevent memory leaks.

George John

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next