CXDI - Serve Technology

Posts

Showing posts with the label Video Player

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

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

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>

HTML5 Video Player - Clapper - An extensible media player Integration - 360 HTML5 Video Player Support

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>

HTML5 Video Player with Playlist Using JavaScript - A Simple HTML5 Video Playlist Design

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

Mediaelements.js Dailymotion Embed Player

Custom Dailymotion Embed Video Player with Video.JS

Custom Dailymotion Embed Video Player with Video.JS See the Pen Dailymotion Embed Player Using Video.JS by SH20RAJ ( @SH20RAJ ) on CodePen . See All Related Links Blogger Demo with Fantasy Skin :- https://codexd-india.blogspot.com/2021/05/new-song.html Simple Dailymotion Player on Codepen :- https://codepen.io/SH20RAJ/pen/XWMbjaG Add Skins To your VideoJS Player :- https://codexdindia.blogspot.com/2021/01/video-js-custom-skin-implement-city.html Video Player with forest theme on JsFiddle :- https://jsfiddle.net/sh20raj/Lhmtcznv/3/

Custom HTML5 Video Player - CuteSu - VideoJS Custom Skin Implementation

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.

VideoJs Custom YouTube Embed Player

VideoJs Custom YouTube Embed Player There are 2 Ways to Integrate .I will show you the simplest way. Ways :- 1. Go and see Documentation :- https://www.npmjs.com/package/videojs-youtube 2. See Below --- Add CDNs To Your WebPage :- 1. Css CDN Before </head> Tag <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.12.0/video-js.min.css" /> 2. JavaScript CDNs before </body> Tag <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.12.0/video.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-youtube/2.6.1/Youtube.min.js"></script> 3. And add <video> Tag with type="video/youtube" in body ( where you want to place video ) <video id="my-video" class="video-js" controls preload="auto" width="640" height="

Custom Video Player Integration - SopPlayer Red Rose Theme

Custom Video Player Integration - SopPlayer Red Rose Theme Link :- https://redrose-lite.blogspot.com/ CodePen Link :- See the Pen RedRose-Lite - Custom HTML5 Video Player - SopPlayer by SH20RAJ ( @SH20RAJ ) on CodePen . https://cdn.jsdelivr.net/gh/CDNSFree/SopPlayer/RedRose/redrose-lite.js Forked and Modified From here :- https://custom-html5-video.surge.sh/

Add Ckin Video Player to YouTube and HTML5 Video Player

Custom HTML5 Video Player with Ckins... See Demo - https://hunzaboy.github.io/Ckin-Video-Player/ On CodePen :- https://codepen.io/SH20RAJ/pen/gOgyeEy Just Copy Paste The CDNs To Your Website... Css CDN <link rel="stylesheet" href="https://cdn.statically.io/gh/CDNSFree/Ckin-Video-Player/30fefa5a/dist/css/ckin.min.css"/> Js CDN <script src="https://cdn.statically.io/gh/CDNSFree/Ckin-Video-Player/30fefa5a/dist/js/ckin.min.js"></script> Add Video Player <video poster="https://hunzaboy.github.io/Ckin-Video-Player/ckin.jpg" src="https://ghcdn.rawgit.org/CDNSFree/Ckin-Video-Player/master/ckin.mp4" data-ckin="default" data-overlay="1" data-title="The curious case of Chameleon..." ></video> See Demo :- Here are Some Skins Also :- Defaul

Mediaelement YouTube Embed Player Integration

Mediaelement YouTube Embed Player Integration Firstly Check This Things :- Insert MediaElements.js Html5 Video player HTML5 Audio Player Using Media Elements.js See Demo :- https://repl.it/@SH20RAJ/mediaelement#youtube-embed.html Steps To Integrate :- 1. Add src in <video/> Tag <video width="640" height="360"> <source src="https://www.youtube.com/watch?v=RroiPxzCYac" type="video/youtube"> </video> 2. Add Css CDN. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css"/> 3. Add JavaScript CDN. And it's done now. <script src="https://cdn.jsdelivr.net/gh/CDNSFree2/Mediaelements.js@main/mediaelements.js"></script> See Demo Here :- Tips :- You can also add a poster attribute to show a

SP-FLAMINGO - SopPlayer Skin Integration

SP-FLAMINGO SopPlayer Skin Integration See Demo :- https://sopplayer.sh20raj.repl.co/flamingo/ Demo Website :- https://sopplayer.github.io/SP-FLAMINGO/ or https://sopplayer.sh20raj.repl.co/flamingo View on Repl.it :- https://replit.com/@SH20RAJ/SopPlayer#flamingo Steps to Import :- Steps :- 1. Use class = "sopplayer" in Your <video> Tag . 2. And Add data-setup = "{}" , attribute like this . HERE IS THE FULL VIDEO CODE < video id = "my-video" poster = " https://i.ytimg.com/vi/YE7VzlLtp-4/maxresdefault.jpg " class = "sopplayer" controls preload = "auto" data-setup = "{}" width = "500px" >  < source src = "https://commondatastorage.googleapis.com/gtv-videos-bucket/CastVideos/mp4/BigBuckBunny.mp4"