{"id":21978587,"url":"https://github.com/aradalvand/vidazor","last_synced_at":"2026-04-10T10:02:56.730Z","repository":{"id":143349903,"uuid":"321030844","full_name":"aradalvand/vidazor","owner":"aradalvand","description":"The HTML5 Video API For Blazor | Vidazor provides a C#/Blazor interface for the HTML5 video API, which you can normally only access via JavaScript.","archived":false,"fork":false,"pushed_at":"2021-01-13T23:56:37.000Z","size":28687,"stargazers_count":16,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-01T19:35:40.089Z","etag":null,"topics":["blazor","blazor-client","blazor-component","blazor-wasm","blazor-webassembly","html5video","html5videoapi"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aradalvand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-13T09:44:56.000Z","updated_at":"2025-03-06T20:55:52.000Z","dependencies_parsed_at":"2023-06-09T22:15:35.028Z","dependency_job_id":null,"html_url":"https://github.com/aradalvand/vidazor","commit_stats":null,"previous_names":["aradaral/vidazor"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/aradalvand/vidazor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aradalvand%2Fvidazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aradalvand%2Fvidazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aradalvand%2Fvidazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aradalvand%2Fvidazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aradalvand","download_url":"https://codeload.github.com/aradalvand/vidazor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aradalvand%2Fvidazor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31637748,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T07:40:12.752Z","status":"ssl_error","status_checked_at":"2026-04-10T07:40:11.664Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-client","blazor-component","blazor-wasm","blazor-webassembly","html5video","html5videoapi"],"created_at":"2024-11-29T16:24:55.130Z","updated_at":"2026-04-10T10:02:56.711Z","avatar_url":"https://github.com/aradalvand.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Vidazor poster](Poster.svg)\n\n# What Is Vidazor? [![NuGet version (Vidazor)](https://img.shields.io/nuget/v/Vidazor.svg?style=flat-square)](https://www.nuget.org/packages/Vidazor/)\nVidazor = Video + Blazor\n\nVidazor is a Blazor library (RCL) that allows you to seamlessly work with the HTML5 video API, which normally you'd have to work with manually via JS interop.\n\n[Checkout the demo here](https://aradaral.github.io/Vidazor)\n\n\u003e Vidazor currently only supports Blazor WebAssembly, due to the fact that it uses `JSInProcessRuntime`, it won't work on Blazor Server projects at the moment.\n\n# Getting Setup\nYou can set up Vidazor in your project in just 3 simple steps:\n## 1. Install the NuGet package:\nYou can install the package via NuGet Package Manager, just search for \"Vidazor\".\n\nOr if running commands is your thing, you can:\n```powershell\nInstall-Package Vidazor\n```\nOr via the .NET CLI:\n```bash\ndotnet add package Vidazor\n```\n## 2. Add the imports:\nAfter having installed the package, add the following `@using` directives either to the `_Imports.razor` file in your Blazor project, or if you intend to use Vidazor in a specific component, add the directives to the top of that component: \n```razor\n@using Vidazor\n@using Vidazor.Types\n```\n## 3. Start using the `\u003cVidazorVideo\u003e` component with a reference:\nNow you're all set up! You can start using Vidazor!\nIn your components, use the `\u003cVidazorVideo\u003e` tag, and reference the component to a private field. Through the private field, you can access the properties and methods that Vidazor offers.\n```razor\n\u003cVidazorVideo @ref=\"video\" OnTimeUpdate=\"@(() =\u003e Console.WriteLine($\"Current time is: {video.CurrentTime}\"))\"\u003e\n    \u003csource src=\"/sample.mp4\" /\u003e\n\u003c/VidazorVideo\u003e\n\n\u003cbutton type=\"button\" @onclick=\"() =\u003e video.Play()\"\u003ePlay\u003c/button\u003e\n\u003cbutton type=\"button\" @onclick=\"() =\u003e video.Pause()\"\u003ePause\u003c/button\u003e\n\u003cbutton type=\"button\" @onclick=\"() =\u003e video.Muted = !video.Muted\"\u003eToggle Sound\u003c/button\u003e\n\n@code {\n    VidazorVideo video;\n}\n```\n### Using HTML attributes on the `\u003cvideo\u003e` tag:\nVidazor supports [attribute splatting](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0#attribute-splatting-and-arbitrary-parameters), which means you can pass in any number of HTML attributes you want to the `\u003cVidazorVideo\u003e` component, and those attributes will then be captured and *splatted* onto the `\u003cvideo\u003e` element when the component is rendered.\n```razor\n\u003cVidazorVideo @ref=\"video\" class=\"foo bar\" preload=\"auto\"\u003e\n    \u003csource src=\"/sample.mp4\" /\u003e\n\u003c/VidazorVideo\u003e\n```\nHTML ouput:\n```HTML\n\u003cvideo class=\"foo bar\" preload=\"auto\"\u003e\n    \u003csource src=\"/sample.mp4\" /\u003e\n\u003c/video\u003e\n```\n\n# Features:\nVidazor provides nearly all the methods, properties, and events that the JavaScript `HTMLMediaElement` object provides:\n- [Methods](#methods)\n- [Properties](#properties)\n- [Events](#events)\n\n## Methods:\nThe following methods can be called easily through the `VidazorVideo` object:\n| Vidazor Method | JavaScript Equivalent | Description |\n| :---            | :---                   | :---         |\n| `.Play()` | [`.play()`](https://www.w3schools.com/tags/av_met_play.asp) | Plays the video playback. |\n| `.Pause()` | [`.pause()`](https://www.w3schools.com/tags/av_met_pause.asp) | Pauses the video playback. |\n| `.Load()` | [`.load()`](https://www.w3schools.com/tags/av_met_load.asp) | Reloads the video. |\n| `.CanPlayType(string)` | [`.canPlayType(string)`](https://www.w3schools.com/tags/av_met_canplaytype.asp) | Checks if the browser can play a video with the specified MIME media type. |\n\n## Properties:\nThe following properties can be accessed easily through the `VidazorVideo` object:\n| Vidazor Property | Data Type | Get \u0026 Set | JavaScript Equivalent | Description |\n| :--- | :--- | :--- | :--- | :--- |\n| `.Autoplay` | `bool` | ✔ | [`.autoplay`](https://www.w3schools.com/tags/av_prop_autoplay.asp) | Gets or sets a Boolean indicating whether playback automatically begins as soon as enough of the video is available to do so without interruption. |\n| `.Buffered` | `TimeRange[]` | Read-only | [`.buffered`](https://www.w3schools.com/tags/av_prop_buffered.asp) | Gets an array of `TimeRange` objects representing the parts of the video that the browser has buffered (i.e. loaded). |\n| `.Controls` | `TimeRange[]` | ✔ | [`.controls`](https://www.w3schools.com/tags/av_prop_controls.asp) | Gets or sets a Boolean reflecting the \"controls\" HTML attribute, indicating whether browser's default UI controls are displayed for the video. |\n| `.CrossOrigin` | `string` | ✔ | [`.crossorigin`](https://www.w3schools.com/tags/av_prop_crossorigin.asp) | Gets or sets the CORS settings of the video. |\n| `.CurrentSrc` | `string` | Read-only | [`.currentSrc`](https://www.w3schools.com/tags/av_prop_currentsrc.asp) | Gets the source URL of the current video. Tip: To set the source URL, use the `Src` property. |\n| `.CurrentTime` | `double` | ✔ | [`.currentTime`](https://www.w3schools.com/tags/av_prop_currenttime.asp) | Gets or sets a double indicating the current playback time in seconds. |\n| `.DefaultMuted` | `bool` | ✔ | [`.defaultMuted`](https://www.w3schools.com/tags/av_prop_defaultmuted.asp) | Gets or sets a Boolean reflecting the \"muted\" HTML attribute, indicating whether the video is muted by default. |\n| `.DefaultPlaybackRate` | `double` | ✔ | [`.defaultPlaybackRate`](https://www.w3schools.com/tags/av_prop_defaultplaybackrate.asp) | Gets or sets a double indicating the default playback rate (i.e. speed) for the video. |\n| `.Duration` | `double` | Read-only | [`.duration`](https://www.w3schools.com/tags/av_prop_duration.asp) | Gets a double indicating the total length of the video in seconds. |\n| `.Ended` | `bool` | Read-only | [`.ended`](https://www.w3schools.com/tags/av_prop_ended.asp) | Gets a Boolean indicating whether the video has ended. |\n| `.Loop` | `bool` | ✔ | [`.loop`](https://www.w3schools.com/tags/av_prop_loop.asp) | Gets or sets a Boolean reflecting the \"loop\" HTML attribute, indicating whether the video should start over again after it has ended. |\n| `.MediaGroup` | `string` | ✔ | [`.mediaGroup`](https://www.w3schools.com/tags/av_prop_mediagroup.asp) | Gets or sets the name of the media group that the video belongs to. |\n| `.Muted` | `bool` | ✔ | [`.muted`](https://www.w3schools.com/tags/av_prop_muted.asp) | Gets or sets a Boolean indicating whether the video is muted or not. |\n| `.NetworkState` | `NetworkdState` enum | Read-only | [`.networkState`](https://www.w3schools.com/tags/av_prop_networkstate.asp) | Gets a `NetworkState` enum indicating the current state of fetching the media over the network. |\n| `.Paused` | `bool` | Read-only | [`.paused`](https://www.w3schools.com/tags/av_prop_paused.asp) | Gets a Boolean indicating whether the video is paused or not. |\n| `.PlaybackRate` | `double` | ✔ | [`.playbackRate`](https://www.w3schools.com/tags/av_prop_playbackrate.asp) | Gets or sets a double indicating the current playback rate (i.e. speed) of the video. Can be a negative number, which indicates backward playback. |\n| `.Played` | `TimeRange[]` | Read-only | [`.played`](https://www.w3schools.com/tags/av_prop_played.asp) | Gets an array of `TimeRange` objects representing the parts of the video that has been played by the user. |\n| `.Preload` | `Preload` enum | ✔ | [`.preload`](https://www.w3schools.com/tags/av_prop_preload.asp) | Gets or sets a `Preload` enum reflecting the \"preload\" HTML attribute, indicating what content should be loaded before the video is played by the user. |\n| `.ReadyState` | `ReadyState` enum | Read-only | [`.readyState`](https://www.w3schools.com/tags/av_prop_readystate.asp) | Gets a `ReadyState` enum indicating the readiness state of the video (e.g. whether enough of the video has been downloaded to be able to play the video, etc.) |\n| `.Seekable` | `TimeRange[]` | Read-only | [`.seekable`](https://www.w3schools.com/tags/av_prop_seekable.asp) | Gets an array of `TimeRange` objects representing the parts of the video that the user can seek to (i.e. move the playback position to). |\n| `.Seeking` | `bool` | Read-only | [`.seeking`](https://www.w3schools.com/tags/av_prop_seeking.asp) | Gets a Boolean indicating whether the user is currently seeking in the video. |\n| `.Src` | `string` | ✔ | [`.src`](https://www.w3schools.com/tags/av_prop_src.asp) | Gets or sets a URL reflecting the \"src\" HTML attribute, indicating the source URL of the video. |\n| `.Volume` | `double` | ✔ | [`.volume`](https://www.w3schools.com/tags/av_prop_volume.asp) | Gets or sets a double indicating the volume level, from 0.0 (silent) to 1.0 (loudest). |\n\n## Events:\nThe following events can be hooked into through the `\u003cVidazorVideo\u003e` component. The type of all the events is the standard Blazor `EventCallback` struct:\n| Vidazor Event | JavaScript Equivalent | Description |\n| --- | --- | --- |\n| `OnAbort` | [`abort`](https://www.w3schools.com/tags/av_event_abort.asp) | Fires when the loading of a video is aborted. |\n| `OnCanPlay` | [`canplay`](https://www.w3schools.com/tags/av_event_canplay.asp) | Fires when the browser can start playing the video, but estimates that it will have to stop for further buffering (i.e. loading). |\n| `OnCanPlayThrough` | [`canplaythrough`](https://www.w3schools.com/tags/av_event_canplaythrough.asp) |  Fires when the browser can play through the video without stopping for buffering (i.e. loading). |\n| `OnDurationChange` | [`durationchange`](https://www.w3schools.com/tags/av_event_durationchange.asp) | Fires when the duration of the video is updated. |\n| `OnEmptied` | [`emptied`](https://www.w3schools.com/tags/av_event_emptied.asp) | Fires when the current playlist is empty. |\n| `OnEnded` | [`ended`](https://www.w3schools.com/tags/av_event_ended.asp) | Fires when the video has finished, and no further data is available. |\n| `OnError` | [`error`](https://www.w3schools.com/tags/av_event_error.asp) | Fires when the video could not be loaded due to an error. |\n| `OnLoadedData` | [`loadeddata`](https://www.w3schools.com/tags/av_event_loadeddata.asp) | Fires when the browser has loaded the current frame of the video. |\n| `OnLoadedMetadata` | [`loadedmetadata`](https://www.w3schools.com/tags/av_event_loadedmetadata.asp) | Fires when the browser has loaded the video's metadata (e.g. length, etc.) |\n| `OnLoadStart` | [`loadstart`](https://www.w3schools.com/tags/av_event_loadstart.asp) | Fires when the browser has started to load the video. |\n| `OnPause` | [`pause`](https://www.w3schools.com/tags/av_event_pause.asp) | Fires when the video has been paused. |\n| `OnPlay` | [`play`](https://www.w3schools.com/tags/av_event_play.asp) | Fires when the video has been started or is no longer paused. |\n| `OnPlaying` | [`playing`](https://www.w3schools.com/tags/av_event_playing.asp) | Fires when the video has been started to play after having been paused OR stopped for buffering (i.e. loading). |\n| `OnProgress` | [`progress`](https://www.w3schools.com/tags/av_event_progress.asp) | Fires preiodically when the browser loads the video. |\n| `OnRateChanged` | [`ratechanged`](https://www.w3schools.com/tags/av_event_ratechanged.asp) | Fires when the playback rate (i.e. speed) of the video has changed. |\n| `OnSeeked` | [`seeked`](https://www.w3schools.com/tags/av_event_seeked.asp) | Fires when the user has finished moving/skipping to a new position in the video. |\n| `OnSeeking` | [`seeking`](https://www.w3schools.com/tags/av_event_seeking.asp) | Fires when the user begins moving/skipping to a new position in the video. |\n| `OnStalled` | [`stalled`](https://www.w3schools.com/tags/av_event_stalled.asp) | Fires when the browser is trying to get media data, but data is unexpectedly not forthcoming. |\n| `OnSuspend` | [`suspend`](https://www.w3schools.com/tags/av_event_suspend.asp) | Fires when the browser is intentionally not getting media data. |\n| `OnTimeUpdate` | [`timeupdate`](https://www.w3schools.com/tags/av_event_timeupdate.asp) | Fires when the current time has changed. |\n| `OnVolumeChange` | [`volumechange`](https://www.w3schools.com/tags/av_event_volumechange.asp) | Fires when the volume level has been changed. |\n| `OnWaiting` | [`waiting`](https://www.w3schools.com/tags/av_event_waiting.asp) | Fires when the video stops because it needs to buffer (i.e. load) the next frame. |\n\n# Copyright and License\nThis software is released under [the MIT license](https://github.com/AradAral/Vidazor/blob/main/LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faradalvand%2Fvidazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faradalvand%2Fvidazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faradalvand%2Fvidazor/lists"}