Modern Video Player

Description

Click image to view demo View plugin documentation Modern Video Player is a extremely powerful video and audio player that supports all kind of embeddable media from HTML5 video formats to Youtube videos Youtube live feed playlists channels Vimeo videos albums channels collections to reading folders of video audio or image files Apple HLS and MPEG DASH live streaming 360 virtual reality videos and images embed any HTML into the player like Facebook videos Google maps and much more Player can serve different video quality for both desktop and mobile browers display video subtitles in multiple langauges control playback speed multilangauge audio support for live streaming Modern Video Player also supports unlimited playlists and each playlist can contain unlimited number of videos Each playlist can also contain mixed media inside so we can have self hosted videos Youtube videos and some images mixed inside the same playlist Player is packed with a huge amount of features and customization options from different layouts skins color customization social sharing external API video advertisments pre-roll mid-roll end-roll videos video ads popup ads html ads annotations during video playback HTML elements over video showing at specific time intervals private password protected videos Google Analytics Google Adsense Support for VAST formats in the player are VAST VMAP IMA VPAID SIMID Player controls can be adjusted per button meaning each button is optional and can be turned off in admin panel The same goes for social sharing options Use this as full video player player and display full playlist or hide the playlist all together and use this as a simple video player Or display your videos in a fully responsive grid manner showing image thumbnails or open the player in a lightbox Features and options Destop mobile and tablet support fully responsive and mobile optimized buttons Highly customizable with HTML and CSS Written in plain Javascript which means it will run fast in your website and will not interfere with other scripts Accessible semantic elements Player used clean HTML uses the right elements buttons for buttons input range for volume and progress for progress seekbar Only mp4 video format required for all browsers and devices Supported content sources Self hosted video audio images Self hosted virtual reality 360 video example here Self hosted image panorama 360 Apple HLS Live Streaming MPEG DASH Live Streaming Youtube content Single video Playlist Channel 360 video Vimeo content Single video Showcase formerly Album Group Channel 360 video Folder playlist video audio Google Drive One Drive Custom iframe show any iframe into the player Daily Motion Wista Google Maps etc XML playlist JSON playlist Playlist position Right of player Bottom of player Hidden playlist simple video Thumbnail grids Lightbox player Password protected videos Set any frame as poster for self hosted videos Optional poster image for self hosted video Youtube and Vimeo Option to display poster image on mobile to preserve bandwidth Chromecast support Example here AirPlay support Subtitles support for any media video audio Youtube Vimeo vtt srt Google Analytics tracking Adverts support pre-roll mid-roll end-roll Play video audio file on demand Global adverts per playlist or individual per video example here Annotation support show hide HTML elements including iframes over video area during playback Support for shortcodes in annotations Global annotations per playlist or individual per video example here Popup windows support show hide HTML elements including iframes over video area on video pause Popups can be useful for large data display when focus is mainly on popup since video is paused You can use it to display for example some iframes over video or some user forms Popups can also be used for displaying simple images additionally linked to url on click example here AdSense support in player monetize your video content Show video preview on hover like Youtube thumbnails example here Active item and timestamp parameters in url Video Chapters support seek to specific time with presented seekbar and title example here Video Chapters in window example here Transcript support show video subtitles in separate window above the playlist area example here Remember playback position on page reload active video current time Watch limit Restict video watching time and show custom image on video end example here Protect video from being downloaded using url encryption and video blobs Video embedding Embed video player in another website Stream video from camera Support for multiple instances of video player in the same page Option to mix different media types in the same playlist you can have self hosted videos Youtube videos images mixed in same playlist Stick to bottom on page scroll example here Up next video feature example here Load more videos on scroll to playlist bottom example here Playlist is cached in browser to limit API requests For Youtube Vimeo and other services and fast load on start Playback options random playback loop playlist playback speed start end time multiple playback qualities multiple audio playback qualities load more videos on page scroll on media end navigate to url Media end action next loop rewind show poster show custom image coming next videos swipe video Picture in picture Set custom end screen with your orn HTML and CSS Query string parameters load video parameters directly in browser url Responsive breakpoints hide specific buttons or player elements on small screens Autoplay when video comes in viewport example here Theater mode full width video mode example here Serve player as lightbox example here Media aspect ratio original fit-inside fit-outside Keyboard navigation Social sharing facebook twitter tumblr etc API methods to interact with the player on runtime Event callbacks events during video playback Advert callbacks which fire when video ads play Video advertizing Video adverts VAST VMAP IMA VPAID Video annotations Popup ads over video area HTTP Live Streaming HLS DASH Video chapters Virtual reality 360 video Custom video end screen Limit watch time Playlist icons call to action menu Interactive transcripts Chromecast support Mobile friendly menu list playback rate video quality and subtitles Video zoom Show video preview on hover like Youtube thumbnails Autoplay when player enters viewable area Minimize the player to bottom on page scroll Related videos screen Open in lightbox Grid layouts Grid below player load more Notes This is javascript plugin for standalone website Updates Changelog VERSION 15 47 5 9 2024 – ADD cuepoints with javascript callback function VERSION 15 43 20 8 2024 – FIX vast postroll not visible VERSION 15 4 10 8 2024 – DEPRECATED amazon S3 VERSION 15 3 2 7 2024 – ADD option to load folder of hls or dash media VERSION 15 27 30 6 2024 – UPDATE thumbnails preview seek auto responsive size VERSION 15 26 9 6 2024 – FIX elements visibility – FIX playlist holder visible on start on some small screens if playlist closed – FIX pollux skin seekbar thumb position ios VERSION 15 25 8 6 2024 – FIX elements visibility – FIX playlist holder visible on start on some small screens if playlist closed VERSION 15 19 2 6 2024 – UPDATE social sharing add email sms – UPDATE option to convert description url to links VERSION 15 16 30 5 2024 – FIX disable to show subtitles on youtube default player when chromeless player is used VERSION 15 15 26 5 2024 – UPDATE Google Analytics 4 VERSION 15 1 20 5 2024 – FIX preview seek auto on hls media type with mid advert VERSION 15 09 19 5 2024 – UPDATE css improvements for theme conflicts VERSION 15 05 11 5 2024 – FIX subtitles on chromecast with encryption VERSION 15 02 6 5 2024 – FIX ios preloader visible on start above big play button VERSION 15 01 30 3 2024 – FIX vimeo single video list not working VERSION 15 22 3 2024 – FIX statistics play count if percent set to zero – FIX vimeo api next page results on total scroll VERSION 14 99 11 3 2024 – UPDATE youtube api improvements VERSION 14 98 26 2 2024 – UPDATE demos and help on load more in player and grid VERSION 14 95 25 2 2024 – FIX chromecast subtitles VERSION 14 9 16 1 2024 – ADD option show video sort videos buttons above grid or player latest popular oldest – UPDATE option show date from now format in playlist items – ADD option to add custom buttons in player controls – UPDATE hide video title in fullscreen VERSION 14 7 28 12 2023 – UPDATE Youtube allow setting default language for subtitles on start – UPDATE when loading folder of videos option to auto load video subtitles VERSION 14 65 6 12 2023 – FIX skin aviva rewind skip backward forward button icons not working – UPDATE youtube live streaming VERSION 14 6 23 11 2023 – ADD navigator share VERSION 14 59 20 11 2023 – FIX Google Drive folder VERSION 14 58 31 10 2023 – UPDATE autoplay in viewport only loads video poster on page load VERSION 14 56 21 10 2023 – ADD option to exclude Youtube shorts from showing VERSION 14 55 19 10 2023 – ADD option to loop vast tag with pre ads indefinitely VERSION 14 5 12 10 2023 – FIX iphone playing vast twice before main video starts VERSION 14 46 10 10 2023 – UPDATE chromecast improvements VERSION 14 4 8 10 2023 – FIX parsing vast file error depending on vast content – FIX access to the feature xr is disallowed by permissions policy – UPDATE skip empty vast when ima loader is not used VERSION 14 3 26 7 2023 p strong VERSION 14 6 7 2023 strong p pre – UPDATE player markup is now generated internally – ADD stream video from a camera pre p strong VERSION 13 71 1 6 2023 strong p pre – UPDATE display video subtitles in iPhone native fullscreen pre p strong VERSION 13 7 30 5 2023 strong p pre – ADD mobile compact playlist option pre p strong VERSION 13 6 20 5 2023 strong p pre – FIX transcript scrolls page – FIX up next close button triggers next video – FIX skip advert button causing advert loading incorrectly – FIX change video preloader which does not use css perspective because of flickering on safari – ADD mobile friendly scroll option for settings menu transcript langauage menu chapter menu – ADD option to synchronize transcript langauge with subtitles – ADD add keyboard info dialog in settings menu – ADD new keyboard action close dialog info share with escape key – ADD option to preserve playback rate when changing video – ADD option to use global popup close button so it always displays above popup content on small screens – UPDATE floating video top position – UPDATE custom menu with call to action playlist icons in playlist items – UPDATE new zoom controls in settings menu pre p strong VERSION 13 37 12 5 2023 strong p pre – UPDATE swipe tolerance minimum distance to trigger swipe pre p strong VERSION 13 36 4 5 2023 strong p pre – FIX keyboard controls scroll page spacebar page up down pre p strong VERSION 13 35 24 4 2023 strong p pre – ADD auto open fullscreen on play click option – ADD inline adverts while video plays with user roles configuration pre p strong VERSION 13 3 19 4 2023 strong p pre – UPDATE debounce search pre p strong VERSION 13 27 13 4 2023 strong p pre – UPDATE prevent mobile hover for icons – FIX 360 virtual reality mobile sometimes now working pre p strong VERSION 13 25 3 4 2023 strong p pre – UPDATE option to insert your own preformatted title and description for playlist items and updated search pre p strong VERSION 13 2 6 3 2023 strong p pre – UPDATE centered image annotations not to loose width on small screen – UPDATE chapters repeat share buttons visible only on active chapter item css change – ADD popup advertisements on pause any HTML content individual or global behave differently than annotations – UPDATE choose between slide and alpha transitions in player info share embed playlist selector chapter window transcript pre p strong VERSION 13 05 1 3 2023 strong p pre – UPDATE Vimeo api update pre p strong VERSION 13 03 14 2 2023 strong p pre – FIX playlist selector change playlist click inconsistent pre p strong VERSION 13 02 12 2 2023 strong p pre – FIX pollux skin fullscreen button pre p strong VERSION 13 01 2 2 2023 strong p pre – FIX main video not playing after advert pre p strong VERSION 13 0 9 12 2022 strong p pre – FIX some bugs with using search field and navigating between playlist items and transcript – FIX player shadow moved to inner element so its not visible until player loads – FIX age verify screen would not show second time if we change video without interacting with age verify screen first – FIX active transcript item not selected on transcript language change – FIX AWS S3 not getting poster and thumb from folder – FIX if you copy embed url that already contains player query url parameters they will get doubled – ADD loader for pagination grid – ADD option to pass Hls and Dash config parameters – ADD retrieve video title and description in your localized language for Youtube – ADD option to remember video quality across different videos – ADD option to hide annotations on mobile – ADD option to advance to next video if current fails – UPDATE converted to javascript no jquery dependencies – UPDATE accessibility improvements on player markup buttons and inputs for seekbar – UPDATE whatsApp share – UPDATE added CSS container queries – UPDATE added share and repeat buttons to chapter menu window – UPDATE update to gtag analytics – UPDATE prevent seeking past mid adverts if havent already played – UPDATE added advert and chapter indicators to solo seekbar – UPDATE skin aviva sirius seekbar goes above controls on narrow screens to make room for other buttons – UPDATE embeded player is always 100 height of embedding container – UPDATE seekbar tooltip showing on mobile – UPDATE choose swipe action pre p strong VERSION 12 5 16 9 2022 strong p pre – FIX coming next video screen was visible even with single video in playlist – FIX if video autoplay was off youtube videos would show youtube red play button on start instead of player play button – UPDATE option to remember playback position for all videos in playlist – UPDATE disable css hover styles for mobile – UPDATE show We are offline image when you are not streaming – UPDATE added icon to unmute button – UPDATE apect ratio option active again – UPDATE some improvements for RTL layout – UPDATE option to use global keyboard controls – UPDATE embed copied text – ADD transform video option with controls zoom rotate video and save state – ADD set custom video end screen show your own HTML and CSS after video ends – ADD watch limit feature disable video playback at specific time and show custom image with optional url – ADD bottom seekbar when controls autohide – ADD option to add custom icons in playlist with url link attached to each pre p strong VERSION 12 31 10 5 2022 strong p pre – UPDATE thumbnail image not required for skip ad window – FIX vast non linear ads used without ima loader do not show pre p strong VERSION 12 3 5 5 2022 strong p pre – FIX chapter window close button not working – FIX tooltip sometimes wobbly – FIX restrict content header title missing from translation – FIX transcript header title language not updated on language change – FIX playlist button navigation css for buttons overwritten – FIX chapter window display in horizontal bottom navigation – ADD combine player ratio option remove black bars around video in both player and playlist mode – ADD playlist selector option in playlist choose another playlist – ADD option to auto advance to next playlist – UPDATE option to use default browser scrollbar in playlist pre p strong VERSION 12 15 21 3 2022 strong p pre – FIX fail to play next 360 video pre p strong VERSION 12 12 21 2 2022 strong p pre – FIX subtitle vtt will fail if it contains multiple newline breaks in a row – UPDATE option not to pause video when click embed share video info pre p strong VERSION 12 1 22 1 2022 strong p pre – FIX seekbar position not updating when keyboard controls are used to seek and video is paused – FIX elements visiblity comparing video width not whole container width when calculating what icons to show on different screen sizes – FIX You are watching resume screen if already opened stays visible after we click on another playlist item – FIX youtube vimeo single video sometimes not loading on start – ADD option to load multiple vimeo single videos in one query – UPDATE Activate When Parent Visible changed to boolean – ADD option to load Youtube and Vimeo video details without api key pre p strong VERSION 12 0 17 12 2021 strong p pre – FIX quickly opening between share embed info window could leave video playing in the background – FIX setting link on video advert pause opens url link twice – FIX using search field in playlist scroll to playlist top when videos are filtered – UPDATE specify video quality for mobile for self hosted videos – UPDATE simplify data-path for adverts – UPDATE option to load subtitles chapters cross domain – ADD video embed screen embed single video or whole playlist – ADD age verification screen for video – ADD transcript window showing all subtitles change language search function – ADD chapter window showing all chapters alternative to chapter menu search function – ADD option to exclude specific videos from showing in Youtube or Vimeo feed channel playlist etc – UPDATE option to specify midroll adverts start time in percentage – UPDATE option to specify adverts skip time in percentage – ADD support for IMA VAST VMAP VPAID SIMID pre p strong VERSION 11 20 2 11 2021 strong p pre – ADD play videos from OneDrive single or folder – UPDATE option to load folder of 360 videos Google drive folder of 360 videos OneDrive folder of 360 videos pre p strong VERSION 11 16 9 10 2021 strong p pre – FIX previous chapter button showing always pre p strong VERSION 11 15 20 9 2021 strong p pre – FIX audio ad not showing image poster if set – FIX Apple IOS remember playback position time – ADD option to show chapter title in player top left – ADD previous chapter button in controls pre p strong VERSION 11 11 13 8 2021 strong p pre – FIX changing height of the vertical playlist when its below the player not working – FIX display poster on mobile active on desktop as well – ADD AirPlay support pre p strong VERSION 11 1 30 5 2021 strong p pre – UPDATE support for clicktag ads during video playback – FIX local subtitles for live streaming hls dash – FIX if autoplay in viewport unmutes video with user page interaction mute icon is still showing in player controls – ADD next chapter button – UPDATE clicking chapter menu will auto start video with show Controls Before Video Start option – ADD Chromecast support pre p strong VERSION 11 05 28 4 2021 strong p pre – UPDATE Show poster on pause works with autoplay true when poster is not shown on start – ADD load Google Drive folder of videos pre p strong VERSION 11 0 14 4 2021 strong p pre – FIX live streaming video quality menu duplicating on select – FIX audio not playing on ios – FIX audio visualizer disabled on ios and poster is used instead – FIX up next thumb time not registered – FIX if main video had poster poster was shown when main video resumed playing after mirroll ad finished – FIX thumbnail hover preview using only preview from active video for all playlist items – FIX prevent custom context menu over player video description – UPDATE when description over thumbnail is used playlist position vertical right bottom will automatically switch style description over thumbnail description right of thumbnail for best visual appearance – UPDATE thumbnail hover preview can be gif or a small video – UPDATE limit playlist description text has been changed to number of lines to show instead of number of characters – UPDATE option to remember last used subtitle – UPDATE searching for videos in playlist will only play videos found by search – UPDATE chapter title moved below preview seekbar thumbnail – UPDATE show video poster before asking for password protected videos – UPDATE improvements on Sirius skin gradient added below controls to better emphasize controls above the video – UPDATE add media type custom can now be added as HTML directly in admin using external file is still available option – UPDATE new keyboard controls selector and keyboard controls only active when cursor above the player now working with multiple players in page – UPDATE new grid layouts – ADD mid-roll advert coming in 123 seconds message – ADD support for vr stereoscopic videos – ADD option to use PerfectScrollbar instead of mCustomScroll in playlist – ADD audio slideshow as alternative to audio visualizer while audio plays ADD option to prevent user from seeking into not yet watched part of the video pre p strong VERSION 10 71 19 2 2021 strong p pre – FIX youtube not autoplay after we click resume screen – FIX vimeo default player not resume after we click resume screen – FIX youtube vimeo single video use without api not saving – FIX video advert ending causes link to open if set on video pre p strong VERSION 10 7 7 2 2021 strong p pre – FIX add url to image ad not working – UPDATE annotation shown by default on small screen or when player is small in size can be adjusted in responsive breakpoints section pre p strong VERSION 10 63 26 10 2020 strong p pre – FIX swipe not working – FIX subtitles not visible when video has advert – FIX 360 video not pannable when used as advert pre p strong VERSION 10 62 13 8 2020 strong p pre – FIX password field input not working pre p strong VERSION 10 61 18 7 2020 strong p pre – UPDATE play 360 video from hls or dash source pre p strong VERSION 10 6 10 7 2020 strong p pre – FIX vimeo download video not working – FIX playlist position grid wall description style below thumbnail not working – FIX youtube playback rate not working – FIX annotation close not removing correct annotation when showAnnotationsOnlyOnce – FIX create tables on multisite – FIX create playlist from video statistics not working – FIX image ads not detect duration – REMOVE removed Youtube deprecated playback quality menu – UPDATE set poster for custom HTML – UPDATE preloader visible before player loads – UPDATE if duration is used in playlist item thumbnail duration is set after metadata if not available previously – UPDATE google analytics moved to callbacks – UPDATE social sharing url for multiple players in page – ADD attach category tags to videos and filter videos with category tags in frontend – ADD option to show video poster on pause – ADD option to hide player until playlist starts loading – ADD option to prevent Vimeo player from tracking session data including cookies – ADD new skins and templates grid and lists of thumbnails separated playlists from player – ADD option to show multiple playlists in page at once pre p strong VERSION 10 05 18 4 2020 strong p pre – FIX global per playlist video password not working pre p strong VERSION 10 0 12 4 2020 strong p pre – FIX mediaEndAction poster keeps duplicating posters – FIX seekbar wrong calculation – FIX spaced layout having next previous playlist buttons in wrong position – FIX video preloader hidden when resume screen is shown so its now seen behind transparent resume screen – FIX IOS require double tap on unmute button if controls hidden – CHANGE video poster is always shown if exist regardless of autoplay – UPDATE remember playback position now works with adverts it remembers main video position adverts are always played if exist – UPDATE lock video time is now available as global playlist option – UPDATE support for unlimited number of ads before and after main video – ADD option to randomize ads – ADD option to show video duration in thumbnail and upnext – FIX up next thumbnail not showing correctly with random play – ADD up next watched thumbnail over next and previous buttons – ADD coming next screen between videos new mediaEndAction – ADD related videos screen after video ends new mediaEndAction Show related videos from other playlists and load playlist on demand – ADD chapters menu list and button in controls to show chapter menu – UPDATE option to display video controls before video starts including chapter selector requires video duration on self hosted video – UPDATE menu items bigger padding for better mobile usability – ADD player settings can now be passes with query string parameters begins with mvp- – ADD create playlist from query string parameters – UPDATE share specific video in playlist when used with social networking direct link to video and current time – UPDATE right click context menu update share url to specific video in playlist – UPDATE option to provide multiple youtube api keys – ADD cache playlist in browser to limit api requests for Youtube and Vimeo services pre p strong VERSION 9 6 1 3 2020 strong p pre – ADD unmute button to unmute the video – ADD optional search field in playlist – UPDATE use your own input search field for playlist items and specify dom selector – ADD optional closed caption button in controls to toggle caption state – UPDATE autoplay in viewport multiple players like facebook – ADD open player in lightbox with or without playlist – ADD init player on dom selector click and open specific video – ADD optional button to close player minimize – ADD display collections from Vimeo on demand Vimeo user videos Vimeo folders – ADD LIVE indicator in controls for live streams auto or manual – ADD option to disable seekbar to prevent skipping video – ADD only logged in users can download video non logged in users are presented with login or register message – ADD lock some videos only logged in users can watch specific videos or partial watch for example first 15 seconds – ADD callback beforeLoginScreen called before login screen opens – ADD optional resume playback position prompt – ask user to continue watching where left off or start from the beginning – FIX parse vtt with multiline of text pre p strong VERSION 9 56 31 1 2020 strong p pre – UPDATE cleaned double autoPlay setting no more forceMutedAutoplay autoPlay settings is now reponsible for muted autoplay pre p strong VERSION 9 55 21 1 2020 strong p pre – UPDATE player now retains layout in page while minimize on scroll – UPDATE Google Analytics update – UPDATE new setting combinePlayerRatio boolean keeps video ratio same when playlist is opened closed in vlb vrb layouts – ADD option to hide playlist on player minimize – ADD restrict player width on minimize – ADD option to sort media loaded from folder – ADD set playback rate values – ADD load json playlist – ADD load any HTML into the player ex Facebook videos Google maps etc pre p strong VERSION 9 53 3 1 2020 strong p pre – ADD option to activate the player when parent visible pre tags adsense advertising audio mp4 streaming video video player video wall vimeo Vimeo Channel youtube youtube gallery pre pre