"Dynamic" Video Playing

Hello all,

We are working on a web-based media player that can play videos and music. We'd like to use Playable to handle videos, but we cannot get the player to work. Is it possible to let the user select the video they want to use, open it in the website (our current code is below) and have Playable reload with the video, similar to how it's used on Wix?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Media Center</title>
    <link rel="stylesheet" href="./jquery-ui.css">
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #2c3e50;
        color: #ecf0f1;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    #media-center {
        width: 80%;
        max-width: 800px;
        background-color: #34495e;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    #video-player {
        margin: 20px 0;
        text-align: center;
    }

    #video {
        width: 100%;
        border: 1px solid #95a5a6;
        border-radius: 5px;
        background-color: black;
    }

    #controls {
        text-align: center;
    }

    #open-file {
        margin-top: 20px;
        background-color: #1abc9c;
        color: white;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        font-size: 16px;
        transition: background-color 0.3s ease;
    }

    #open-file:hover {
        background-color: #16a085;
    }

</style>
<body>
    <div id="media-center" class="ui-widget ui-widget-content ui-corner-all">
        <h1 class="ui-widget-header ui-corner-all">Media Center</h1>
        <div id="video-player">
            <video id="video" controls>
                Your browser does not support the video tag.
            </video>
        </div>
        <div id="controls">
            <button id="open-file" class="ui-button ui-corner-all">Open Video</button>
        </div>
    </div>

    <script src="./jquery-3.7.1.js"></script>
    <script src="./jquery-ui.js"></script>
    <script>
        $(document).ready(function () {
        $('#open-file').click(function () {
            $('<input type="file" accept="video/*">').on('change', function (e) {
                const file = e.target.files[0];
                const url = URL.createObjectURL(file);
                $('#video').attr('src', url);
            }).click();
        });
    });
    </script>
</body>
</html>

wix-incubator / playable

"Dynamic" Video Playing #187