Play video from local folder with HTML5 video player using jQuery in ASP.Net

Last Reply on May 03, 2017 09:56 AM By dharmendr

Posted on May 02, 2017 04:03 AM

Hello guys,

I want to play a local video in an application through HTML5 video tag.

the problem is it is static! now how can i pass different source files to video tag through javascript?

Posted on May 03, 2017 09:56 AM Modified on on May 03, 2017 09:58 AM

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