-1

Olá, quero fazer um player local com HTML. quero reproduzir localmente, sem fazer upload. Quero selecionar uma pasta com arquivos de música ou vídeo e reproduzir aleatoriamente. Abaixo segue meu site com a demonstração: https://piersoft.net/robles/player/

Eu queria que esse input ao invés de ser "Selecionar Arquivo" fosse "Selecionar Pasta", e após selecionar, eu clicaria em RANDOM e reproduziria um arquivo aleatório da pasta. No link mostra até onde eu cheguei. Edit: quando seleciono algum arquivo, ao inves de aparecer o caminho, aparece "fakepath". Não tem como selecionar a pasta inteira?

Segue meu código:

<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>

1 Resposta 1

1

Robles,

A forma que conheço, é você criar o src do vídeo com o auxílio da URL.createObjectURL, veja um exemplo abaixo:

$("#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>

Referência: https://developer.mozilla.org/pt-BR/docs/Web/API/URL/createObjectURl


Como nem todo arquivo poderá ser exibido, você pode utilizar do método canPlayType para verificar isso antes de tentar reproduzir:

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>

Referência: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType


Também é possível criar uma restrição no input/file para exibir somente arquivos de vídeo:

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

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

2
  • Boa, ótima resposta!
    – user170164
    Commented 6/12/2019 às 15:52
  • Já me ajudou, Obrigado!! Commented 6/12/2019 às 16:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .