A transparent youtube raw source integration for afterglow HTML5 video player, this integration will help you integrate youtube sources with afterglow seamlessly. This integration request sources asynchronously as soon as the DOM is loaded.
You can also use this with a plain HTML5 video player as it only changes video sources. Check example.html for a practical preview.
Obtain "raw" links to video resources with this yt integration, get sources for multiple videos in the same page.
This integration comes in two flavors:
- Source requests are sent through a proxy that runs PHP and intermediates the request for raw sources.
- Includes a PHP intermediator and client JS:
video.php,vaux.php,vconfig.php, andvideo.js. - Executes on both client and server, may use additional proxy chaining.
- Source requests are sent through a google proxy and intermediates the request for raw sources.
- Includes client JS requester:
video.js. - Executes on the client only.
-
Edit
vconfig.phpand add to$videosarray the yt videos id (https://www.youtube.com/watch?v=jNQXAC9IVRw) you want the proxy API to reply to, edit configuration as needed. -
Upload
video.php,vconfig.php,vaux.php, andvideo.jsto your webhost appropriate folder location. -
If you're using Apache configure both
.htaccessandvideo.jsto the appropriate values for requests to be valid. -
Add afterglow player and
video.jsto your HTML page preferably before</head>tag closing.- Edit configuration object inside
video.jsfile as needed to point to the right proxy location. - Example:
<head> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <script src="./video.js"></script> </head>
- Edit configuration object inside
-
Add your
<video>tags with custom attributes as needed and include:video-id="VIDEOID", (Required) 'VIDEOID' should be replaced with actual yt video idclass="afterglow", (Recommended) 'afterglow' class should be in place for afterglow to work, you should also add any other classes you may need to further style the player element.poster="PATH/TO/IMAGE.JPG", (Recommended) 'PATH/TO/IMAGE.JPG' should be replaced with actual poster/thumb image path for the videowidth="1920" height="1080", (Recommended) replace width and height values with appropriate dimensions as necessary, if you're using afterglow then it's necessary.playsinline, (Optional) prevents going full screen when playedcontrols, (Optional) shows video controls- Example:
<video video-id="VIDEOID" class="afterglow" poster="PATH/TO/IMAGE.JPG" width="1920" height="1080" playsinline controls></video>
-
Sit back and enjoy your new direct sources.
-
Edit
video.jsand add toidsarray the yt videos id (https://www.youtube.com/watch?v=jNQXAC9IVRw) you want the JS requester to reply to, edit configuration as needed. -
Upload
video.jsto your webhost appropriate folder location. -
If you're using Apache configure both
.htaccessandvideo.jsto the appropriate values for requests to be valid. -
Add afterglow player and
video.jsto your HTML page preferably before</head>tag closing.- Edit configuration object inside
video.jsfile as needed to point to the right proxy location. - Example:
<head> <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> <script src="./video.js"></script> </head>
- Edit configuration object inside
-
Add your
<video>tags with custom attributes as needed and include:video-id="VIDEOID", (Required) 'VIDEOID' should be replaced with actual yt video idclass="afterglow", (Recommended) 'afterglow' class should be in place for afterglow to work, you should also add any other classes you may need to further style the player element.poster="PATH/TO/IMAGE.JPG", (Recommended) 'PATH/TO/IMAGE.JPG' should be replaced with actual poster/thumb image path for the videowidth="1920" height="1080", (Recommended) replace width and height values with appropriate dimensions as necessary, if you're using afterglow then it's necessary.playsinline, (Optional) prevents going full screen when playedcontrols, (Optional) shows video controls- Example:
<video video-id="VIDEOID" class="afterglow" poster="PATH/TO/IMAGE.JPG" width="1920" height="1080" playsinline controls></video>
-
Sit back and enjoy your new direct sources.
video.php - Requests fresh raw sources <source src="..." type="..."> for your video tag, this only uses a single GET parameter code that corresponds to the yt video id.
vconfig.php - Proxy configuration where you are able set which videos are allowed to request for in the $videos array.
vaux.php - Auxiliary functions for the proxy such as getting domain name and string verification.
video.js - Allows the browsers to request and apply video.php freshly obtained sources onto afterglow video tags.
Q. Can i use this without afterglow player?
A. Yes, just don't add class="afterglow" to your video tag.
Q. Can i use this if i use Cloudflare?
A. Yes this is just a simple proxy, video will be streamed directly from third-party servers (googlevideo).
Q. Does this work with multiple <video> tags inside the same page?
A. Yes, sources are obtained asynchronously as configured.
Q. Can i restrict access to this API?
A. You can and should restrict allowed video IDs, IPs and domain referrers via config file. Other restrictions can be applied via custom code or application configurations.
Distributed under MIT License. See license.md for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent