Skip to content

Instantly share code, notes, and snippets.

@DrDanL

DrDanL/html5_player.html

Last active June 25, 2023 15:02
Show Gist options
  • Save DrDanL/3bc0ff054bc80c303ea0bba4caa0f2a2 to your computer and use it in GitHub Desktop.
Save DrDanL/3bc0ff054bc80c303ea0bba4caa0f2a2 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 API Video Player (Local Video) - See https://leightley.com/gist-html5-video-player-with-javascript/
Raw
html5_player.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- see https://leightley.com/gist-html5-video-player-with-javascript/ -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>HTML5 API Video Player</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom styles for this template -->
<style>
body {
padding-top: 54px;
}
video {
width: 900px;
height: 900px;
}
@media (min-width: 992px) {
body {
padding-top: 56px;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">HTML Video Player</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div id="message"></div>
<video controls autoplay></video>
<ul class="list-unstyled">
<li><input type="file" accept="video/*" /></li>
</ul>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
(function localFileVideoPlayer() {
'use strict'
var URL = window.URL || window.webkitURL
var playSelectedFile = function(event) {
var file = this.files[0]
var type = file.type
var videoNode = document.querySelector('video')
var canPlay = videoNode.canPlayType(type)
var isError = canPlay === 'no'
if (isError) {
return
}
var fileURL = URL.createObjectURL(file)
videoNode.src = fileURL
}
var inputNode = document.querySelector('input')
inputNode.addEventListener('change', playSelectedFile, false)
})()
</script>
</body>
</html>
@sayan1999
Copy link

sayan1999 commented Jun 25, 2021 •
edited

Thank you for the solution but I don't want to let the user select the file. I will hardcode the file path in the code. How to acheive that?

@DrDanL
Copy link
Author

DrDanL commented Jun 25, 2021 •
edited

Thank you for the solution but I don't want to let the user select the file. I will hardcode the file path in the code. How to acheive that?

You can set the 'src' attribute of the video tag to specify the location.

@sayan1999
Copy link

Yeah learnt it the hard way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment