Video: Update to VidstackPlayer library (#5609)

* Update video to use VidstackPlayer

* Use latest dash and hls JS files

* Use Plyr implemetation of vidstack

* Remove unused code

* Expand VideoTracks

* Register events

* Add tracks

* Fix control functions

* Change tracks on updateSource

* Fix VideoTrack

* Add test subtitles

* Fix controls

* Remove unused hls event

* controls-change event

* Methods to control text tracks

* Release notes

* Add hls protection for widevine

* Fix drmSystems

* Add ProtectionServerCertificateUrl to support apple fairplay

* Remove exceptions from ParseAspectRatio

* Add PlayReady to hls

* Remove change of DefaultQuality in the demo

* Update to latest player version

* Use width in demo

* Add default player theme css

* Switch to default VidstackPlayer with Plyr layout

* Add Thumbnails API

* Add chapters file

* Rewrite release notes

* Mention new parameters

* Fix stop action

* Detect source Type from extension if none was provided

Demos/Blazorise.Demo/Pages/Tests/VideoPage.razor

@@ -16,31 +16,50 @@
                     <Button Color="Color.Primary" Clicked="@(()=>videoRef.Stop())">
                         <Icon Name="IconName.Stop" />
                     </Button>
+                    <Button Color="Color.Primary" Clicked="@(()=>videoRef.TogglePlay())">
+                        <Icon Name="IconName.PlayCircle" />
+                    </Button>
                 </Buttons>
                 <Button Color="Color.Primary" Clicked="@OnChangeVideoUrl">Change Video</Button>
                 <Button Color="Color.Primary" Clicked="@OnChangeCurrentTime">Go to 20 seconds</Button>
-                <Button Color="Color.Secondary" Clicked="@OnChangeQuality">Change Quality to 1080</Button>
             </CardBody>
             <CardBody>
-                <Video @ref="@videoRef" Source="@videoSource" CurrentTime="@currentTime" DefaultQuality="@quality" />
+                <Video @ref="@videoRef" Source="@videoSource" Thumbnails="https://files.vidstack.io/sprite-fight/thumbnails.vtt" CurrentTime="@currentTime" DefaultQuality="@defaultQuality" />
             </CardBody>
         </Card>
     </Column>
 </Row>
 @code {
     Video videoRef;
+    // VideoSource videoSource = new VideoSource()
+    // {
+    //     Medias = new ValueEqualityList<VideoMedia>
+    //     {
+    //         new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4", "video/mp4", 1024, 576),
+    //         new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4", "video/mp4", 1280, 720),
+    //         new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4", "video/mp4", 1920, 1080),
+    //     },
+    //     Tracks = new ValueEqualityList<VideoTrack>
+    //     {
+    //         new VideoTrack("_content/Blazorise.Demo/subtitles/View_From_A_Blue_Moon_Trailer-HD.en.vtt", "en-US"){ Kind = "subtitles", Label = "English", Default = true },
+    //         new VideoTrack("_content/Blazorise.Demo/subtitles/View_From_A_Blue_Moon_Trailer-HD.fr.vtt", "fr-FR"){ Kind = "subtitles", Label = "French" },
+    //     }
+    // };
     VideoSource videoSource = new VideoSource()
     {
         Medias = new ValueEqualityList<VideoMedia>
         {
-            new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4", "video/mp4", 576),
-            new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4", "video/mp4", 720),
-            new VideoMedia("https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4", "video/mp4", 1080),
+            new VideoMedia("https://files.vidstack.io/sprite-fight/720p.mp4", "video/mp4", 1280, 720),
+        },
+        Tracks = new ValueEqualityList<VideoTrack>
+        {
+            new VideoTrack("_content/Blazorise.Demo/subtitles/sprite-fight.en.vtt", "en-US"){ Kind = "subtitles", Label = "English", Default = true },
+            new VideoTrack("_content/Blazorise.Demo/subtitles/sprite-fight.es.vtt", "es-ES"){ Kind = "subtitles", Label = "Spanish" },
         }
     };
 
     double currentTime = 10;
-    int quality = 576;
+    int defaultQuality = 720;
 
     Task OnChangeVideoUrl()
     {
@@ -56,11 +75,4 @@
 
         return Task.CompletedTask;
     }
-
-    Task OnChangeQuality()
-    {
-        quality = 1080;
-
-        return Task.CompletedTask;
-    }
 }

Demos/Blazorise.Demo/wwwroot/chapters/sprite-fight.vtt

@@ -0,0 +1,31 @@
+WEBVTT
+
+00:00 --> 01:13
+The Forest
+
+01:13 --> 02:31
+Camp Site
+
+02:31 --> 03:57
+The Sprites
+
+03:57 --> 04:10
+Campfire
+
+04:10 --> 07:01
+Escape
+
+07:01 --> 07:50
+Eat Salt!
+
+07:50 --> 08:21
+Motacilla Flava
+
+08:21 --> 08:43
+Tree Bridge
+
+08:43 --> 09:14
+March Home
+
+09:14 --> 10:29
+Credits

Demos/Blazorise.Demo/wwwroot/subtitles/View_From_A_Blue_Moon_Trailer-HD.en.vtt

@@ -0,0 +1,29 @@
+WEBVTT FILE
+
+1
+00:00:09.500 --> 00:00:12.000
+The ocean floor rises 5 miles to the shores
+
+2
+00:00:12.001 --> 00:00:16.500
+of what people call, the seven mile miracle
+
+3
+00:00:25.500 --> 00:00:28.000
+What would it be like to be born on this island?
+
+4
+00:00:32.500 --> 00:00:34.500
+To grow up on these shores
+
+5
+00:00:37.500 --> 00:00:40.000
+To witness this water, every day
+
+6
+00:00:43.500 --> 00:00:46.000
+You're about to meet someone, who did
+
+7
+00:02:45.500 --> 00:02:49.000
+This is a film about John John Florence

Demos/Blazorise.Demo/wwwroot/subtitles/View_From_A_Blue_Moon_Trailer-HD.fr.vtt

@@ -0,0 +1,29 @@
+WEBVTT FILE
+
+1
+00:00:09.500 --> 00:00:12.000
+Le fond de l'océan monte 5 miles des rives
+
+2
+00:00:12.001 --> 00:00:16.500
+de ce que les gens appellent le miracle de sept mile
+
+3
+00:00:25.500 --> 00:00:28.000
+Que serait-il d'être né sur cette île?
+
+4
+00:00:32.500 --> 00:00:34.500
+Pour grandir sur ces rivages
+
+5
+00:00:37.500 --> 00:00:40.000
+Pour assister à cette eau, tous les jours
+
+6
+00:00:43.500 --> 00:00:46.000
+Vous êtes sur le point de rencontrer quelqu'un, qui ne
+
+7
+00:02:45.500 --> 00:02:49.000
+Ceci est un film sur John John Florence