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

To know more features about this player visit GitHub . BMSVieira / moovie.js Movie focused HTML5 Player Demo ▪️ Installation ▪️ Shortcuts ▪️ API ▪️ Integrations ▪️ Events Styling ▪️ Plugins ▪️ Custom Events ▪️ i18n ▪️ Settings ◼️ Features: 🔧 Fully customizable and Easy-to-use 💎 Built-in caption offset adjust on the fly 🎬 Built-in support for .vtt and .srt caption files 🕹 Built-in Plugins , use the code that you really need! 🎯 Built-in CustomEvents , add multiple events that will run a specific currentTime 🖊 Add tracks/captions dynamically using our API 🗃 Add tracks/captions locally on the fly (no server or upload required) 🌠 Adjust speed on the fly 🛠 Standardized events / shortcuts / API 🖌 Caption customization 💪 No dependencies, built with VanillaJS 🌎 Tested in all mode...

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

 Hide or show Elements in HTML Using JavaScript and Css Steps :- For This Firstly create a . hidden class where the css display property is set to " none ". <style> .hidden{ display:none; } </style> Then Using JavaScript we will toggle (add / remove) the hidden class from the element. So that results hiding and showing of the div/any other  element. Creating a JavaScript function to hide/show elements. <script> function hideunhide(a){ document.querySelector(a).classList.toggle('hidden'); } </script> This function takes a parameter ( queryselector ) and select the element and add or remove hidden from the class list of the element. If hidden is present it will remove and vice-versa .That's the work of toggle. See the Demo Below or on CXDI - Tutorials :-  https://tutorials.sh20raj.repl.co/hide-or-show-elements-in-html-using-javascript-and-css/ . Demo Codes :-  htt...

griffith : A React-based web video player - Integration - HTML5 Video Player #13 Github  | Demo  | Standalone Usage <div id="player"></div> <script crossorigin src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js" ></script> <script> const target = document.getElementById('player') const sources = { hd: { play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4', }, sd: { play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4', }, } // create player instance const player = Griffith.createPlayer(target) // load video player.render({sources}) // dispose video //player.dispose();//This sunction will remove your player </script> See Codepen Demo :- See the Pen griffith : A React-based web video player - Integration by SH20RAJ ( @SH20RAJ ) on CodePen . ...

Flowplayer Integration : The HTML5 video player for the web For Integrating Flowplayer to your website/blogger/HTML you have to integrate the jQuery First then add the flowplayer js and css file to your webpage. Step 1 : Add CDNs B/W <head> Tag. <!-- player skin --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flowplayer/7.2.7/skin/skin.css" /> <!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ --> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- include flowplayer --> <script src="https://cdnjs.cloudflare.com/ajax/libs/flowplayer/7.2.7/flowplayer.js"></script> Add Video Tag Where you want to put your video. <!-- player 1 --> <div class="flowplayer"> <video> ...

HTML5 Video Player - Clapper - An extensible media player Integration - 360 HTML5 Video Player Support Clapper :-  http://clappr.io/ | GitHub :-  https://github.com/clappr/clappr See Demos :-  https://sopplayer.sh20raj.repl.co/Clapper/  | Video Documentation :-  https://youtu.be/5qX7yG_7WDs Firstly Import the Clappr CDN in head tag <head> <script src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script> <head/> Then Use the below codes to initialize your video player. <div id="player"></div> <script> var player = new Clappr.Player( { source:"https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4", parentId: "#player", poster:"https://i.pinimg.com/564x/f3/df/a6/f3dfa67d82133295a97731532fb625b0.jpg" }); </script> ...

Add Auto Colorful Css TopBar on Website show automatic onload ft. AutoTopBar Add Auto TopBar on Website onload See Demo on Repl.it AutoTopBar :- Automatic Top Loader onload Steps For Integration :- Just Copy Paste the CDN Just After Starting <body> Tag and Thats All <script src="https://rebrand.ly/AutoTopBarJS"></script> Here is Some Optional Advance Features of Topbar See the Frame :-

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  

HTML5 Video Player with Playlist Using JavaScript - A Simple HTML5 Video Playlist Design See Demo on Repl :-  https://tutorials.sh20raj.repl.co/video-player-with-playlist/ Codes :-  https://replit.com/@SH20RAJ/Tutorials#video-player-with-playlist/index.html

Custom HTML5 Video Player - CuteSu - VideoJS Custom Skin Implementation Full Screen Demo :-  https://sopplayer.sh20raj.repl.co/CatSu/ Steps :- 1. Add </video> Tag...     - About Video Tag -> <video id="my-video" class="video-js" controls poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" data-setup='' loop> <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type='video/mp4'/> </video> 2. Add CSS CDN...     (Before </head> Tag) <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sh20raj/SopPlayer@main/CatSu/catsu.min.css"/> <link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Questrial'> 3....