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

html

responsive-design

video-tag

local-video-playback

byAlex Kataev·Sep 5, 2024

Play a local video in your HTML5 code by adjusting the file path appropriately in the <video> tag's src attribute. Make it a point to rely on universally supported formats like MP4, WebM, or Ogg. A simple code illustration would be as follows:

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser can't play this video.
</video>

Ensure to substitute "video.mp4" with your video's file name. This is vital: browsers might deny access to local files for security reasons. Therefore, the recommended scenario is to run your HTML either locally or through a server.

Selecting and initiating a user's local video file

The key to playing a video file that resides on the user's hard drive lies in tactfully combining the <input type="file"> element with JavaScript. Here's the modus operandi:

Make a selection: Place a file input field where the user gets to pick a video file.

<input type="file" accept="video/*" id="videoFile">
<!-- Just waiting for you to choose a video file. 📽️ -->

Fetch File object: Keep an eye for the 'change' event on the input that delivers the selected File object.

document.getElementById('videoFile').addEventListener('change', function(event) {
  var file = event.target.files[0];
  // File selected, time to play the video!
});

Generate object URL: Transform the File object into a blob URL.

var videoUrl = URL.createObjectURL(file);
// Your very own red carpet premiere is about to begin. 🎬

Assign video src: Dispatch the generated URL to the src attribute of the video element.

document.querySelector('video').src = videoUrl;
// Teleporting your video file into the theater. 🌐➡️🎥

Tackling video compatibility and security concerns

Ensure compatibility: Examine whether the video format is suitable for playback before attempting to do so.

if(video.canPlayType(file.type) === '') {
  console.error('Ouch! We can\'t handle this video format.');
} else {
  video.play();
  // All the world is a stage, and this video is a player. 😃
}

Heighten security: Here's a reminder that for security purposes, modern browsers curb direct file URL access. To work around this, you could:
- Choose to load your HTML via the file protocol and thereby gain the required permissions.
- Operate a dedicated local web server that hosts your files, which can then be accessed through localhost.

Elevating the user experience

To create a more enriching experience, deliver a smooth-sailing interface:

Styling: Inject some CSS magic into your input and video elements for that sleek, professional look.

User notifications: Offer timely playability status updates to the user via a message.

<div id="message">Awaiting updates...</div>
<!-- For now, let's wait and watch. 🍿 -->

Fallback alternatives: If the video can't be played, provide download links or suggest file conversion options.

Enhancing functionality

Kick the solution up a notch by incorporating the following:

Local Server Tools: Leverage tools like Server2Go to construct a portable web server, simplifying local file playback.
Cross-Browser Compatibility: Depending on the browser, opt for window.URL or window.webkitURL.
Follow Security Protocols: Your solution should respect user consent and privacy standards.