Посоветую посмотреть мой пример
<{CODE_COLLAPSE_OFF}><{CODE_WRAP_OFF}>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<title>Пример для showOpenFilePicker</title>
<style>
.player {
background-color: orange;
}
.player::-webkit-media-controls {
background-color: rgba(0, 0, 0, 0.1);
color: white;
}
.player::-webkit-media-controls-panel {
background-color: transparent;
}
</style>
</head>
<body>
<video src="" id="player" class="player" controls></video>
<br>
<button id="baton">Клик сюда!</button>
<script>
window.onload = function () {
var baton = document.getElementById("baton");
baton.addEventListener('click', async () => {
const pickerOpts = {
types: [
{
description: "Видосы (.avi, .mkv, .mp4, .webm)",
accept: {
"video/avi": [".avi"],
"video/x-matroska": [".mkv"],
"video/mp4": [".mp4"],
"video/webm": [".webm"],
},
},
],
excludeAcceptAllOption: true,
multiple: false,
};
try {
const [handle] = await window.showOpenFilePicker(pickerOpts);
const file = await handle.getFile();
const fileURL = URL.createObjectURL(file);
const player = document.getElementById("player");
player.src = fileURL;
player.play();
} catch (err) {
console.log('Error "' + err.name + '": ', err.message);
}
});
};
</script>
</body>
</html>