"Dynamic" Video Playing #187

thejupitergroup · 2024-08-30T00:16:38Z

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>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Dynamic" Video Playing #187

"Dynamic" Video Playing #187

thejupitergroup commented Aug 30, 2024 •

edited

Loading

"Dynamic" Video Playing #187

"Dynamic" Video Playing #187

Comments

thejupitergroup commented Aug 30, 2024 • edited Loading

thejupitergroup commented Aug 30, 2024 •

edited

Loading