Skip to main content

Posts

Stylish HTML5 Audio Player Using Media Elements.js (Integration)

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 = "te...

Top Websites to convert your Github Repositories to CDN

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

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...

Unlimited Audio Hosting on blogger or any website Using Base64 Technique

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 tex...

How to disable right click on Images to avoid unwanted Image Download

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,...

How to change Adress bar URL without refreshing the page using JavaScript

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 . ....

Plyr.io Youtube Embedded Video Player Integration

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 e...

Random Posts