CXDI - Serve Technology

Posts

Showing posts with the label Custom Video Player

TweetX: HTML5 Twitter like Video Player for Your Website ✨

Introducing TweetX: The Twitter Video Player Clone for Your Website! SH20RAJ / TweetX TweetX Video Player - A Twitter/X UI HTML5 Video Player TweetX A Twitter video player clone for embedding Twitter-style video players on your website TweetX Video Player - A Twitter/X UI HTML5 Video Player Key Features: 🎥 Sleek Twitter-like Design: Get the Twitter video player look and feel on your website. 🎨 Customizable: Easily tweak colors and styles to match your website's theme. ▶️ Play, Pause, Volume Control: All the essential video player functionalities. 📐 Responsive: Works seamlessly on desktops, tablets, and mobile devices. 💻 Lightweight: Minimal footprint for fast loading times. Codepen | Demo Installation To use the TweetX video player on your website, follow these steps: Include the CSS file in the <head> section of your

OpenPlayerJS - HTML5 Video/Audio/YouTube Player - Integration

GitHub :- https://github.com/openplayerjs/openplayerjs/ OpenPlayerJS :- https://www.openplayerjs.com/ Video < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.css" />  < video class = "op-player__media" id = "player" controls playsinline width = "100%" > < source src = "https://archive.org/download/sample-video_202306/SampleVideo.mp4" type = "video/mp4" /> </ video > < hr > < script src = "https://cdn.jsdelivr.net/npm/openplayerjs@latest/dist/openplayer.min.js" > </ script >  < script > // Check the `API and events` link below for more options const player = new OpenPlayerJS( 'player' ); player.init(); </ script > Audio < link re

Custom HTML5 Video Player with Vanilla JavaScript - KWG Video Player

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>

Moovie.js - Media player made for movies - Integration 🚀

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

xgplayer - Custom HTML5 Video Player - Integration - A HTML5 video player with a parser that saves traffic

xgplayer - Custom HTML5 Video Player - Integration - A HTML5 video player with a parser that saves traffic GitHub | Documentation | Codepen Demo See Demo See the Pen xgplayer - Custom HTML5 Video Player by SH20RAJ ( @SH20RAJ ) on CodePen .

griffith : A React-based web video player - Integration - HTML5 Video Player #13

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

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.  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flowplayer/7.2.7/skin/skin.css" />  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>  <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.  <div class="flowplayer"> <video>