Play local video with HTML and Javascript

Asked

Viewed 768 times

-1

Hello, I want to make a local player with HTML. I want to play locally, without uploading. I want to select a folder with music or video files and play randomly. Below follows my website with the demo: https://piersoft.net/robles/player/

I wanted this input instead of "Select File" to be "Select Folder", and after selecting it, I would click RANDOM and play a random file from the folder. The link shows how far I’ve come. Edit: when I select a file, instead of appearing the path, it appears "fakepath". There is no way to select the entire folder?

Follows my code:

<body>
    <div class="container">
        <h1>Player</h1>
        <br>
        <br>
        <input type="file" id="video" value="">
        <input type="button" id="random" value="RANDOM">
        <br><br>
        <p id="urlText"></p>
        <br><br>
        <video id="custom_video_play" width="400" controls="controls">>
            <source src="" type="video/mp4"> Browser Not Supporting
        </video>
    </div>

    <script>
        $("#video").change(function(){
            const url = $("#video").val()
            alert(url)

            $("#urlText").text("URL ("+ url + ")")
            $("source").attr('src', url)

        });

    </script>
</body>
javascript jquery html5 html5-video player

1 answer

1


Robles,

The way I know it, is you create the src the video with the aid of URL.createObjectURL, see an example below:

$("#video").change(function(){
  const files = $("#video").prop("files");

  if ( files[0] ) {
    $("#custom_video_play").attr("src", URL.createObjectURL(files[0]));
    $("#urlText").text("URL ("+ files[0].name + ")");
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <h1>Player</h1>
    <br>
    <br>
    <input type="file" id="video" value="">
    <input type="button" id="random" value="RANDOM">
    <br><br>
    <p id="urlText"></p>
    <br><br>
    <video id="custom_video_play" width="400" controls="controls"></video>
</div>

Reference: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURl

Since not every file can be displayed, you can use the method canPlayType to check this before trying to play:

function mudou(file) { 
  const arquivo = file.files[0];

  if (arquivo) {
    const video = document.getElementById("custom_video_play");
    console.log( video.canPlayType(arquivo.type) );
  }
}
<input type="file" id="video" value="" onchange="mudou(this)">
<video id="custom_video_play" width="400" controls="controls"></video>

Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType

It is also possible to create an input/file constraint to display only video files:

<input type="file" id="video" accept="video/*"/>

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

  • Good, great answer!

  • You’ve helped me, thank you!!

Browser other questions tagged javascript jquery html5 html5-video player

You are not signed in. Login or sign up in order to post.