-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Revert "feat(GLUE-14941): change demo page with permanent stream URL (#9)" This reverts commit 30c4627. * Revert "Merge pull request #8 from dailymotion/feat/permanent-url" This reverts commit 2eeb0b4, reversing changes made to 9bb2613.
- Loading branch information
Showing
6 changed files
with
108 additions
and
293 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
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
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
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
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 |
|---|---|---|
| @@ -1,164 +1,120 @@ | ||
| <!DOCTYPE html> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="referrer" content="no-referrer" /> | ||
| <title>Demo</title> | ||
| <style> | ||
| body { | ||
| font-family: sans-serif; | ||
| } | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta name="referrer" content="no-referrer"> | ||
| <title>Demo</title> | ||
| <style> | ||
| body { | ||
| font-family: sans-serif; | ||
| } | ||
|
|
||
| main { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 0 20px; | ||
| width: 500px; | ||
| } | ||
| main { | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 0 20px; | ||
| width: 500px; | ||
| } | ||
|
|
||
| h1 { | ||
| margin: 10px 0; | ||
| } | ||
| h1 { | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| input, | ||
| select, | ||
| button { | ||
| border-radius: 3px; | ||
| border: 1px solid #000; | ||
| box-sizing: border-box; | ||
| min-height: 24px; | ||
| padding: 5px; | ||
| } | ||
| input, select, button { | ||
| border-radius: 3px; | ||
| border: 1px solid #000; | ||
| box-sizing: border-box; | ||
| min-height: 24px; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .input { | ||
| margin: 20px 0; | ||
| } | ||
| .input { | ||
| margin: 20px 0; | ||
| } | ||
|
|
||
| .input > label { | ||
| display: block; | ||
| font-size: 14px; | ||
| font-weight: bold; | ||
| margin: 10px 0; | ||
| } | ||
| .input > label { | ||
| display: block; | ||
| font-size: 14px; | ||
| font-weight: bold; | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| .input > input, | ||
| .input > select { | ||
| width: 50%; | ||
| } | ||
| .input > input, .input > select { | ||
| width: 50%; | ||
| } | ||
|
|
||
| .streamUrl { | ||
| margin-top: 40px; | ||
| } | ||
| .streamUrl { | ||
| margin-top: 40px; | ||
| } | ||
|
|
||
| .streamUrl > input { | ||
| width: 100%; | ||
| } | ||
| .streamUrl > input { | ||
| width: 100%; | ||
| } | ||
|
|
||
| button { | ||
| background: #000; | ||
| border-radius: 3px; | ||
| border: 0; | ||
| color: #fff; | ||
| font-weight: bold; | ||
| padding: 5px 15px; | ||
| } | ||
| button { | ||
| background: #000; | ||
| border-radius: 3px; | ||
| border: 0; | ||
| color: #fff; | ||
| font-weight: bold; | ||
| padding: 5px 15px; | ||
| } | ||
|
|
||
| footer { | ||
| margin: 2em 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <h1>Stream URL Demo Page</h1> | ||
| <div class="inputs"> | ||
| <div class="input"> | ||
| <label for="video_id">Enter your video xID</label> | ||
| <input | ||
| id="video_id" | ||
| type="text" | ||
| name="video_id" | ||
| placeholder="Video xid" | ||
| /> | ||
| </div> | ||
| <div class="input"> | ||
| <label for="format_type">Select quality</label> | ||
| <select id="format_type" name="format_type"> | ||
| <option value="stream_h264_url">stream_h264_url</option> | ||
| <option value="stream_h264_hq_url"> | ||
| stream_h264_hq_url | ||
| </option> | ||
| <option value="stream_h264_hd_url"> | ||
| stream_h264_hd_url | ||
| </option> | ||
| <option value="stream_h264_hd1080_url"> | ||
| stream_h264_hd1080_url | ||
| </option> | ||
| <option value="stream_h264_qhd_url"> | ||
| stream_h264_qhd_url | ||
| </option> | ||
| <option value="stream_h264_uhd_url"> | ||
| stream_h264_uhd_url | ||
| </option> | ||
| <option value="stream_hls_url">stream_hls_url</option> | ||
| </select> | ||
| </div> | ||
| <button id="fetch_btn" name="fetch_btn">Get stream</button> | ||
| <div class="input streamUrl"> | ||
| <label for="stream_url">Fetched stream URL</label> | ||
| <input id="stream_url" type="text" name="stream_url" /> | ||
| </div> | ||
| </div> | ||
| <video-js id="demo" controls></video-js> | ||
| footer { | ||
| margin: 2em 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <main> | ||
| <h1>Stream URL Demo Page</h1> | ||
| <div class="inputs"> | ||
| <div class="input"> | ||
| <label for="video_id">Enter your video xID</label> | ||
| <input id="video_id" type="text" name="video_id" placeholder="Video xid" /> | ||
| </div> | ||
| <div class="input"> | ||
| <label for="format_type">Select quality</label> | ||
| <select id="format_type" name="format_type"> | ||
| <option value="stream_h264_url">stream_h264_url</option> | ||
| <option value="stream_h264_hq_url">stream_h264_hq_url</option> | ||
| <option value="stream_h264_hd_url">stream_h264_hd_url</option> | ||
| <option value="stream_h264_hd1080_url">stream_h264_hd1080_url</option> | ||
| <option value="stream_h264_qhd_url">stream_h264_qhd_url</option> | ||
| <option value="stream_h264_uhd_url">stream_h264_uhd_url</option> | ||
| <option value="stream_hls_url">stream_hls_url</option> | ||
| </select> | ||
| </div> | ||
| <button id="fetch_btn" name="fetch_btn">Get stream</button> | ||
| <div class="input streamUrl"> | ||
| <label for="stream_url">Fetched stream URL</label> | ||
| <input id="stream_url" type="text" name="stream_url" /> | ||
| </div> | ||
| </div> | ||
| <video-js id="demo" controls></video-js> | ||
| <footer> | ||
| <a href="/docs">Stream URL Server API documentation</a> | ||
| </footer> | ||
| </main> | ||
| <link href="https://vjs.zencdn.net/7.21.1/video-js.css" rel="stylesheet" /> | ||
| <script src="https://vjs.zencdn.net/7.21.1/video.min.js"></script> | ||
| <script type="text/javascript"> | ||
| const apiUrl = '/stream-urls' | ||
| const fetchBtn = document.getElementById('fetch_btn') | ||
| const streamUrlInput = document.getElementById('stream_url') | ||
|
|
||
| <h2>Permanent stream</h2> | ||
| const videoPlayer = videojs('demo') | ||
|
|
||
| <button id="fetch_btn_permanent" name="fetch_btn"> | ||
| Get a permanent stream | ||
| </button> | ||
|
|
||
| <footer> | ||
| <a href="/docs">Stream URL Server API documentation</a> | ||
| </footer> | ||
| </main> | ||
| <link | ||
| href="https://vjs.zencdn.net/7.21.1/video-js.css" | ||
| rel="stylesheet" | ||
| /> | ||
| <script src="https://vjs.zencdn.net/7.21.1/video.min.js"></script> | ||
| <script type="text/javascript"> | ||
| const apiUrl = "/stream-urls"; | ||
| const permanentApiUrl = "/permanent-stream-url"; | ||
| const fetchBtn = document.getElementById("fetch_btn"); | ||
| const fetchPermanentBtn = document.getElementById( | ||
| "fetch_btn_permanent" | ||
| ); | ||
| const streamUrlInput = document.getElementById("stream_url"); | ||
|
|
||
| const videoPlayer = videojs("demo"); | ||
|
|
||
| fetchBtn.addEventListener("click", () => { | ||
| const videoId = document.getElementById("video_id").value; | ||
| const formatType = document.getElementById("format_type").value; | ||
| fetch( | ||
| `${apiUrl}?video_id=${videoId}&video_formats=${formatType}` | ||
| ) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| videoPlayer.src(data[formatType]); | ||
| streamUrlInput.value = data[formatType]; | ||
| }); | ||
| }); | ||
| fetchPermanentBtn.addEventListener("click", () => { | ||
| const videoId = document.getElementById("video_id").value; | ||
| const formatType = document.getElementById("format_type").value; | ||
| fetch( | ||
| `${permanentApiUrl}?video_id=${videoId}&video_format=${formatType}` | ||
| ).then((res) => { | ||
| // Redirect to the permanent stream URL | ||
| window.location.href = res.url; | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| fetchBtn.addEventListener('click', () => { | ||
| const videoId = document.getElementById('video_id').value | ||
| const formatType = document.getElementById('format_type').value | ||
| fetch(`${apiUrl}?video_id=${videoId}&video_formats=${formatType}`) | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| videoPlayer.src(data[formatType]) | ||
| streamUrlInput.value = data[formatType] | ||
| }) | ||
| }) | ||
| </script> | ||
| </body> | ||
| </html> |
Oops, something went wrong.