CXDI - Serve Technology

Custom HTML5 Video Player with Vanilla JavaScript KWG Video Player is a free custom HTML5 video player. It is written in Vanilla JavaScript and no library is required for it to run. The video player can be used in different web projects freely. Multiple instances of the video player can be used in a single page. and the appearance of the player can be customized. Upon creating a KWG Video Player, an Object is created in which one of the members is html5 <video> element and all Media events, properties and methods are available for it. For the whole functionality of KWG Video Player , see documentation source . Integration 1. Load CDNs <link rel= "stylesheet" href= "https://cdn.jsdelivr.net/gh/webgadgets/KwgVideoPlayer@master/kwg-video-player.css" /> <script src= "https://cdn.jsdelivr.net/gh/webgadgets/KwgVideoPlayer@master/kwg-video-player.js" ></script>

Embed User all GitHub Repos Loading Animations is a bonus point Here... Use Website :- https://sh20raj.github.io/GitHub-Cards/ or https://github-cards.sh20raj.repl.co/ URL Syntax :- https://github-cards.sh20raj.repl.co/embed.html?user={username} How to Embed Example (user = sopinstagram ) :- https://github-cards.sh20raj.repl.co/embed.html?user=sopinstagram Use iframe to embed all repos on your website like this <iframe src= "https://github-cards.sh20raj.repl.co/embed.html?user=sopinstagram" frameborder= "0" width= "100%" height= "1000px" ></iframe> Enter fullscreen mode Exit fullscreen mode Other Demo (User = google) :- https://sh20raj.github.io/GitHub-Cards/embed.html?user=google

Not knowing the basic tech can sometimes increase the size, affect the performance and add an extra layer of complexity to the project. This article is a heads up that you can do a lot with just vanilla HTML and a bit of CSS if you want it to look pretty. I have collected some of the most useful HTML tags and attributes, so you can study them and use in your next project. I also created 12 separate Codepens , so you can get a live taste and play around with the examples. 🎨 Color Picker Often in the developer workflow you might want to access the color spectrum and be able to pick up any shade from it. You can use <input type="color"> , which would otherwise be a time-consuming task to write from scratch. 📚 Blockquote When writing articles you might want to highlight some of your favorites quotes. You can use a <blockquote> tag for that. Add some custom styling and you have a nice element that wi

Adding captions and subtitles to HTML5 video - HTML Track Tag See Demo on CXDI-Tutorials (https://tutorials.sh20raj.repl.co/add-subtitles-to-html5-video/) Source Code on Repl  or on GitHub  

  AudiPlay - HTML5 Audio Player AudiPlay Integration - Free HTML5 Audio Player See GitHub :-  https://github.com/SH20RAJ/AudiPlay Steps To Integrate     Step 1 :-  Use  class = "audiplay"  in Your Audio Tag . HERE IS THE AUDIO TAG     <audio controls class="audiplay" > <source src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/Ark.mp3" type="audio/mp3"/> </audio> <!--Here is the Audio Tag Library--> Step 2 :- Add Javascript CDN Just Before  </ body > Tag HERE IS THE JAVASCRIPT CDN <script src="https://cdn.jsdelivr.net/gh/sh20raj/AudiPlay/audiplay.min.js"></script> <!--Here is the JavaScript Library--> You can also Use Style Attribute in your Audio Tag i.e. -:    style = " width: 700px; "  and You Will Get Responsive Audio Player . Before Adding AudiPlay - Free HTML5 Audio Player After Adding AudiPlay - Free HTML5 Audio Play

The Best Choice Listed Here  1.  https://statically.io/  host directly from Github 2. Use JsDelivr  https://www.jsdelivr.com/   See Article        host directly from Github Example :-  https://scriptdecent.blogspot.com/ 1. Glitch  Website :- https://glitch.com/ 2. Github Website :-  https://github.com/ by Using https://pages.github.com 3. Google Drive  Website :-  Using Drive Direct Download Feature or Using https://drv.tw 4. Yourjavascript.com Website :-  http://yourjavascript.com/ 5. Repl.it (Recommended) Website :-  https://repl.it/ 6. Codepen  Website :-  https://codepen.io/ Using by adding .js in last of url You can Find may other js hosting sites here .  https://codexdindia.blogspot.com/2020/12/top-free-static-hosting-provider.html

How to embed Google Photos Videos and get Direct Download link of it  Q.1 Where's The ID Steps :-  1. Get the link of the video (Circled by red color in picture below). 2. Then Get the ID of the Video . Q.2 Create Direct Download Link Steps :-  1. Click on Three Dots (Options) and then Download (or Press Shift + D) 2. Go to chrome Downloads (Ctrl + J) and copy the link of video Using Right Click ..... 3. Now , Direct Download Link is Copied . Example :-  https://video-downloads.googleusercontent.com/AGQNM9KRvhFFqE7np7r3bspjHFmAoA-LTLDhfvnPI9jXjF4f0stGifMIaXyzkEzonOIw-YPLmQFQWgH2FXBFiP6qjOlxNm85ZnxbSoZk5HTXxXbV20ZVlzf7kUQomQdA-rSBHivcTUA3vQBpb1uwjwm-FYdvsR4If1PDjOxaASRrOvLwWPLTRLX2zyq9mwI3nfwvGthgOW1OBiyhe3PPuWq2_Mf8TjDaJRQR350PCWc-s0T50fEZtXZjaX1It182BACxHHj9sDtOgxx-Lx2cNAVRvm_X_LfRQdCX8rNmMyqcwzOsVxcVgC613stEMBI02bL7q7cjMfwJMhrmIdgMAQQkE5Kke2KPluHlaXQWRaWZskZmHbQthKD9o4QU1RwayHvX9WXH5HJenchgoFELwyNwJRYegdPY6dEnWKFYk-zuBm5VWz7eCpouRu83yLKhk50jg4fwVgY66ea6zep0WrpnrN9plk9qwHL2Qi7GlBY

Create a website like/better than drv.tw ....... About Drv.tw :- Publish your website with Google Drive Hosting ... https://drv.tw/  We are going to make a website better than it in just few minutes ...... steps :- Follow our Video !  Comment For More Advanced and deteiled video on this topic ....   Content of Advanced Video .... 1. Hide Your Drive's File ID ... 2. Login/Sign Up Features to save your links and files .... 3. Custum User and File Url (SEO Friendly URL

Full File Here Steps :-  The Audio Tag Syntax <audio controls id="player"> <source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg" type="audio/ogg"> <source src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3" type="audio/mpeg"> Your browser does not support the audio element.-- CodeXD - India </audio> Javascript CDN Just Before </body> Tag <script src="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.min.js"></script> </ body > CSS CDN Just Before </head> Tag <!-- Docs styles --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.css" /> </ head > See Demo :- Your browser does not support the audio element.-- CodeXD - India

Add Clock Gadget for blogger Note - Adjust Width and Height According to Your Website ........... Steps :- 1.  Go to 'Layouts' . 2.  Click on 'dd a Gadget' . 3. Click on HTML/Javascript . 4. Paste Your Code There and Save It . Yeh ! A Clock Frame/Gadjet is added To your Website ..... 1. Glitch Clock  < iframe   width = "100%"   height = "315"   src = "https://glitchclock.blogspot.com/"   scrolling = "no" style = " margin: 0cm;  " frameborder = "0"   allow = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"   allowfullscreen > </ iframe > 2. Digital Clock with vue.js < iframe   width = "100%"   height = "315"   src = "https://digitalclockxd.blogspot.com/"   scrolling = "no" style = " margin: 0cm;  " frameborder = "0"   allow = "accelerometer; autoplay;