Skip to main content

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" /> <!-- Adding Css CDN --> < 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 > <!-- Adding JavaScript CDN --> < script > // Check the `API and events` link below for more options const player = new OpenPlayerJS( 'player' ); player.init(); </ script > Audio < link re...
Post a Comment
Read more

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...
Post a Comment
Read more

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. <!-- 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> ...
Post a Comment
Read more

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> ...
2 comments
Read more

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
2 comments
Read more

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/
1 comment
Read more

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....
Post a Comment
Read more

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="...
1 comment
Read more

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/
1 comment
Read more

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...
1 comment
Read more

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...
Post a Comment
Read more

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" >        <!--Use class="sopplayer" and data-setup="{}" -->    ...
Post a Comment
Read more

Random Posts