-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add temporary work space for a redefined media player
- Loading branch information
1 parent
90c35a7
commit 2f0fc96
Showing
2 changed files
with
113 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| <!DOCTYPE html> | ||
| <!--suppress JSUnresolvedLibraryURL --> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
| <title>FastAPI video streaming</title> | ||
| <meta content="no-cache, no-store, must-revalidate" http-equiv="content-type"/> | ||
| <meta content="no-cache" http-equiv="refresh"/> | ||
| <meta property="og:type" content="VideoStreaming"> | ||
| <meta name="keywords" content="Python, streaming, fastapi, JavaScript, HTML, CSS"> | ||
| <meta name="author" content="Vignesh Rao"> | ||
| <meta name="image" property="og:image" content="https://thevickypedia.com/img/apple-touch-icon.jpg"> | ||
| <meta content="width=device-width, initial-scale=1" name="viewport"> | ||
| <!-- Disables 404 for favicon.ico which is a logo on top of the webpage tab --> | ||
| <link rel="shortcut icon" href="#"> | ||
| <!-- Font Awesome icons --> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
| <!-- CSS and JS for night mode --> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> | ||
| <!-- Use defer to download in parallel to parsing the page, and execute after the page has finished parsing --> | ||
| <script type="text/javascript" src="https://rawgit.com/thevickypedia/open-source/main/nightmode/night.js" defer></script> | ||
| <link rel="stylesheet" href="https://rawgit.com/thevickypedia/open-source/main/nightmode/night.css"> | ||
| <!-- Button CSS --> | ||
| <style> | ||
| .home { | ||
| position: absolute; /* relative or fixed or absolute; */ | ||
| top: 3.8%; | ||
| right: 218px; | ||
| background-color: #4169E1; | ||
| border: none; | ||
| color: black; | ||
| padding: 10px 14px; | ||
| font-size: 16px; | ||
| cursor: pointer; | ||
| } | ||
| .back { | ||
| position: absolute; /* relative or fixed or absolute; */ | ||
| top: 3.8%; | ||
| right: 130px; | ||
| background-color: #4169E1; | ||
| border: none; | ||
| color: black; | ||
| padding: 10px 14px; | ||
| font-size: 16px; | ||
| cursor: pointer; | ||
| } | ||
| .logout { | ||
| position: absolute; /* relative or fixed or absolute; */ | ||
| top: 3.8%; | ||
| right: 30px; | ||
| background-color: #4169E1; | ||
| border: none; | ||
| color: black; | ||
| padding: 10px 14px; | ||
| font-size: 16px; | ||
| cursor: pointer; | ||
| } | ||
| </style> | ||
| <!-- Video, title and body CSS --> | ||
| <style> | ||
| video { | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| display: block | ||
| } | ||
| body { | ||
| font-family: 'PT Serif', serif; | ||
| } | ||
| h1 { | ||
| text-align: center; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body translate="no"> | ||
| <div class="toggler fa fa-moon-o"></div> | ||
| <button class="home" onclick="goHome()"><i class="fa fa-home"></i> Home</button> | ||
| <button class="back" onclick="goBack()"><i class="fa fa-backward"></i> Back</button> | ||
| <button class="logout" onclick="logOut()"><i class="fa fa-sign-out"></i> Logout</button> | ||
| <br><br> | ||
| <h1>{{title}}</h1> | ||
| <video id="video-player" width="1000" controls muted="muted" style="position: relative"> | ||
| <source id="video-source" type="video/mp4" src=""/> | ||
| </video> | ||
| <script> | ||
| let path = "/video.mp4"; // Get the path variable from Jinja template | ||
| let origin = window.location.origin; // Get the current origin using JavaScript | ||
|
|
||
| // Construct the video source URL by combining origin and path | ||
| let videoSource = origin + path; | ||
|
|
||
| // Set the source URL for the video element | ||
| let videoElement = document.getElementById("video-source"); | ||
| videoElement.setAttribute("src", videoSource); | ||
|
|
||
| // Load and play the video | ||
| let videoPlayer = document.getElementById("video-player"); | ||
| videoPlayer.load(); // Load the video | ||
| // videoPlayer.play(); // Play the video | ||
| </script> | ||
| <script> | ||
| function logOut() { | ||
| window.location.href = window.location.origin + '/logout'; | ||
| } | ||
| function goHome() { | ||
| window.location.href = window.location.origin; | ||
| } | ||
| function goBack() { | ||
| window.history.back(); | ||
| } | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
Binary file not shown.