CXDI - Serve Technology

Stylish HTML5 Audio Player Using Media Elements.js (Integration) See Video Documentation :-  Steps :-   1. Here a Simple HTML5 Audio Tag .      < div   class = "players" >          < audio   id = "player2"   preload = "none"   controls   style = " width: 450px; " >              < source   src = "https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_1MG.mp3"   type = "audio/mp3" >          </ audio >      </ div >      2. Add Css and Javascript CDNs .      Css CDN   <!-- Css library -->      < link   rel = "stylesheet"   type = "text/css"   href = "https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css" > JavaScript CDN <!-- JS Library by CXDI --> < script   src = " https://cdnjs.cloudflare.

Top Websites to convert your Github Repositories to CDN 1.  https://www.jsdelivr.com/ 2. https://rawgit.org/   (Recommended) 3.  https://statically.io/ 4.  https://combinatronics.com/ 5.  https://raw.githack.com/ Bonus 6.  https://unpkg.com/ (NPM)

Sopplayer Integration - HTML5 Stylish Video Player See Demo :-      Visit GitHub  - Codepen  - Repl.it Demo Sopplayer Screenshot See Video Documentation : -  Steps :-       1. Use  class = "sopplayer" in Your <video> Tag .      2. And Add  data-setup = "{}" , attribute like this . <video id="my-video" class="sopplayer" controls preload="auto" data-setup="{}" width="500px"> <!--Use class="sopplayer" and data-setup="{}" --> <source src="https://cdn.jsdelivr.net/gh/SH20RAJ/SopPlayer@main/sample.mp4" type="video/mp4" /> </video>      3. Add the Css CDN before  </ head >  Tag . <link href="https://cdn.jsdelivr.net/gh/SH20RAJ/SopPlayer@main/sopplayer.css" rel="stylesheet" /> <!--Here is the Css Library-->      4. Add t

Convert Here :-  https://base64.guru/converter/encode/audio See Demo :-  https://codexd-india.blogspot.com/2020/12/song-title-here.html https://base64.guru/converter/encode/audio Website :-  https://base64.guru/converter/encode/audio See Demo :-  https://codexd-india.blogspot.com/2020/12/song-title-here.html See Demo :-  https://codexd-india.blogspot.com/2020/12/song-title-here.html Chats During Video Making .......... Unlimited Audio Hosting on blogger or any website   Artical Link is in Description ......    Site :- https://base64.guru/converter/encode/audio We just have to convert(encode)  our audio into base64(text) Take your audio (online / offline) and click on encode .... It will take some time ..... and you will get the text ... Select Output formate as  < audio ></ audio > Here You can see we get the text and we just have to palace our html into our page / blog ..... Let's Test it ........... We had pasted it now we just have to publish and see whether it's

How to disable right click on Images  To avoid unwanted Image Download Right Click on this Image for Testing..                                                                 Right Click on this Image for Testing.. Use This Attribute to your IMG Tag or any other tags ........ (i.e. body) oncontextmenu = " return   false " See Full Document Example :- Take All file used in Video Making from here :-  https://github.com/CXDI/youtube-files/blob/main/javascript/disable-rightclick-on-img-tag.html <! DOCTYPE   html > < html   lang = "en" > < head >      < meta   charset = "UTF-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1.0" >      < title > How to disable right click on Images          to avoid Image Download </ title > </ head > < body >      < h1 > How to disable right click on Images          to avoid Image Download </ h1 >          &l

Code Here window.history.pushState('new' , 'title' , 'new.html') Test it Here   Hlw Change URL to new2.html Change URL to new3.html Change URL ti new4 Chats During Video Making .... How to change Adress bar URL without refreshing the page Code :- window.history.pushState('new' , 'title' , 'new.html') Uses :-      1. Use setTimeout's ....     2. Use in Button onclick Let's Do it ;;;;; See here URL automatic Changed ... Let's Check it with Buttons ...... See here we did it ..... Let's use it more efficiently .......... Thats alll We did it ....... Thanks . ....

How to Play Youtube Embedded Video With Plyr.io Video Player  See Demo on Repl :-  https://repl.it/@SH20RAJ/PlyrVideo#index.html Video Documentation :-  See Latest Documentation :-  Plyr.io Video Player - Integration - Skin Customizing - Adding Download Button :-  https://codexdindia.blogspot.com/2021/05/plyrio-video-player-integration-skin-Customizing-and-Adding-Download-Button-to-plyr.html Step 1 :- Add CDNs       1. Css CDN before </head> Tag <!-- Docs styles --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.css" />      2. JS CDN before </body> Tag <script src="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.js"></script> Step 2 :-      Insert Your YouTube iframe Code in Between these div tags :-          (Here The main thing is to add or assign id="player" to your div element) <div style="width: 500p

 How To Grab ScreenShot of any WebSite and use it in  <img> tag WEBSITE URL HERE  https://grabwebscreenshot.blogspot.com/ Chats During Video Making ...     How To Grab ScreenShot of any WebSite and use it in        < img >  tag  Here is the website :- https://grabwebscreenshot.blogspot.com/  Link in Description ..... Copy and paste the url of the website you want to take Screenshot of ..... Like Google.com It will take some time to take screenshots Article and website Link is in description ... Thanks ......

GetUnBlo - Get Unlimited Blog Views Blogger Integration See Screenshot :-  How To Use Just Enter The URL . Select no. of Views You Want . Hit Get Button . See Demo :-  https://toolade.github.io/GetUnBlo/ Get Script :-  https://github.com/Toolade/GetUnBlo

Site Link :- https://blondbtun.blogspot.com/ BlondBtun Free Open Source Css button Library . You Can Use Any CDN Here <link rel="stylesheet" href=" https://cdn.jsdelivr.net/gh/SH20RAJ/BlondBtun@latest/blondbtun.css " /> <link rel="stylesheet" href=" https://bit.ly/blondbtun " /> <link rel="stylesheet" href=" https://cdn.statically.io/gh/SH20RAJ/BlondBtun/main/blondbtun.css " /> #Get a big Collection of beautiful Buttons and all documentation Here :-  https://blondbtun.blogspot.com/

How to turn any GitHub repo into a CDN Last week I discovered  jsDeliver , a service that let’s you turn any GitHub repository into a CDN. Example :- https://cdn.jsdelivr.net/gh/SH20RAJ/BlondBtun@latest/blondbtun.css Recommendation :- Always Use @latest in URL to get the latest version and file. ( Hat tip to  Sarah Dayan, aka Frontstuff , for this one. ) Here’s how it works. The base URL is  https://cdn.jsdelivr.net/gh/{username}/{repo}/ , where you replace  {username}  with the GitHub username and  {repo}  with the repository name for the project. Append that URL with the path to the file you want to access in the project. For example, for my  Atomic XHR plugin , the JavaScript file is located in the  /dist  directory. You’d use this.  html <script src="https://cdn.jsdelivr.net/gh/cferdinandi/atomic/dist/atomic.js"></script> You can also take advantage of semantic versioning by adding  @{version-number}  to the repository name. You can target major, minor, and pa

See Demo Here -> youtube-thumbgrab.blogspot.com Download on Github -> Here

Live Examples GET https://cdn.statically.io /screenshot/google.com GET https://cdn.statically.io /screenshot/full=true/wikipedia.org <img src=" https://cdn.statically.io /screenshot/[ Your Website URL]" /> Example :- <img src=" https://cdn.statically.io /screenshot/ google.com" /> You got ScreenShot of google.com Automagically converts URL to image and PDF Quick start GET https://cdn.statically.io /screenshot/:url Getting mobile version (device=mobile) GET https://cdn.statically.io /screenshot/device=mobile/:url Getting full page (full=true) GET https://cdn.statically.io /screenshot/full=true/:url Combine params Params can be combined using commas and after /screenshot/ path. GET https://cdn.statically.io /screenshot/device=mobile,full=true/:url Live demo GET https://cdn.statically.io /screenshot/google.com GET https://cdn.statically.io /screenshot/full=true/wikipedia.org   Image resizing `w` and `h` available only on desktop mode.