Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Player de vídeo estilo YouTube</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-8 offset-md-2"> | |
| <h1>Player de vídeo</h1> | |
| <form id="video-form"> | |
| <div class="form-group"> | |
| <label for="video-url">URL do vídeo:</label> | |
| <input type="text" class="form-control" id="video-url" placeholder="Cole a URL do vídeo"> | |
| </div> | |
| <button type="submit" class="btn btn-primary">Reproduzir</button> | |
| </form> | |
| <div id="video-player" class="mt-4"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> | |
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> | |
| <script> | |
| $(document).ready(function() { | |
| $("#video-form").submit(function(event) { | |
| event.preventDefault(); | |
| var videoUrl = $("#video-url").val(); | |
| var videoPlayer = ` | |
| <video width="640" height="480" controls> | |
| <source src="${videoUrl}" type="video/mp4"> | |
| </video> | |
| `; | |
| $("#video-player").html(videoPlayer); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |