LittlewolfSolutions.Blazor.VideoJsControl 1.0.0.2

This package has been developed to simplify my development on a project I have been working on. It essentially creates a Blazor component that can be placed on your Blazor pages that acts as a wrapper for videojs. This component consists of an html5 video element and an additional div to hold a playlist.

-------------VideoJs-------------------------------------------- VideoJs is a video player that handles more formats and brings increased functionality compared to the standard html5 video element. As it's name suggests it is a javascript library. The whole point of this project is to wrap the javascript code and hide it behind a Blazor component. VideoJs has a lot of functionality and even more is available through the use of plugins. At present, this package includes the core video.js file and two plugins. The videojs-playlist and videojs-playlist-ui plugins. These extend the player to allow it to handles multiple videos in a playlist, and give it a ui. You can read more about them here. https://videojs.com/ https://github.com/brightcove/videojs-playlist https://github.com/brightcove/videojs-playlist-ui

The javascript files are now incorporated into the package and utilised via javascript isolation. You don't need to add references to them for this to work.

--------------CSS files---------------------------- You will need to add references to the css files. At a later stage I will incorporate these into the project in a similar way as the javascript ones. Unfortunately while Blazor supports css isolation, those css files don't allow the importing of external css files.

<link href="./_content/LittlewolfSolutions.Blazor.VideoJsControl/css/video-js.css" rel="stylesheet" />
<link href="./_content/LittlewolfSolutions.Blazor.VideoJsControl/css/videojs-playlist-ui.css" rel="stylesheet" />
<link href="./_content/LittlewolfSolutions.Blazor.VideoJsControl/css/videojs-playlist-ui.vertical.css" rel="stylesheet" />
<link href="https://unpkg.com/@videojs/themes@1/dist/city/index.css" rel="stylesheet" />
	  
	  

The last of those files is a theme. You could choose one of four videojs themes they have created, or create your own and load it here.

---------------Using the Control---------------------------- After you install the nuget package, place the control on the page(or component) you want it. <LWSVideoJs></LWSVideoJs>

You can current set the following parameters:

1. Height (a string eg "500px")
2. Width (a string eg "500px")
3. Playlist (Ienumerable<PlaylistItem> see playlists below)
4. ShowPlaylist (a boolean - whether to show the playlist viewer)
5. Playlisttitle (allows you to configure the titel of the playlist)

This is all the functionalityI required for my project at present. I may try to extend this to provide more of the feature of videojs and make it a proper wrapper for it, if it seems to be have a demand for it.

-----------Playlists------------------ I needed to load a list of videos and present them to my users. the videojs playlist plugin seemed ideal. Again it has more functionality than I am utlising. The playlist property accepts a collection of PlaylistItems. They are in the LittlewolfSolutions.Blazor.VideoJsControl.Models namespace. At present this just supports Name, a poster image and the source details. I'm planning to add a thumbnail image, but haven't captured them yet in my project. the playlist class is essentially a C# wrapper for the items passed through to the playlist in the videojs-playlist documentation https://github.com/brightcove/videojs-playlist

-----------Further development----------------- This package and underlying control are designed to meet the needs of the project I'm working on. As I require more functionality I'll add it. I intend to extend functionality and make it switchable. If you have specific functionality you require exposing then let me know. If it's easy enough to do I'll try to get it in, or if you wish to sponsor additional development on this let me know.

--------------Contact me----------------------- I'm a freelance software developer working under the name Littlewolf Solutions. To get in touch visit http://littlewolfsolutions.com/contact/

========DISCLAIMER======================== This package has been developed for my own use - it is not yet considered production ready. It merely exposes a very limited subset of the functionality in VideoJs library. While you are free to use it, I accept no responsibility for any issues you may encounter.