After a lot of experiment i conclude that the videos should be inside the project folder. So that you can set src property to play the video like below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function () {
var videoPlayer = document.getElementById("ss");
var video = document.getElementById("myVideo");
videoPlayer.setAttribute("src", "test2.mp4");
video.play();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<video id="myVideo" height="400" width="400" autoplay controls>
<source id="ss" type='video/mp4'>
</video>
</div>
</form>
</body>
</html>
Below is with file upload control.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('input[type=file]').change(function () {
var fileInput = document.getElementById('fileItem');
var files = fileInput.files;
var fileURL = URL.createObjectURL(files[0]);
document.querySelector('video').src = fileURL;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="fileItem" type="file" accept="video/*" />
<br />
<br />
<video controls autoplay style="height: 200px; width: 200px;"></video>
</div>
</form>
</body>
</html>
Demo
