Converting to use Video JS since apparently Azure Media Player won't …

…be supported anymore.
pticostaricags · Apr 9, 2024 · bdae97b · bdae97b
1 parent 88cdccf
commit bdae97b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 28 deletions.
diff --git a/src/FairPlayCombinedSln/FairPlayTube/Components/App.razor b/src/FairPlayCombinedSln/FairPlayTube/Components/App.razor
@@ -36,12 +36,19 @@
     <!--Paypal-->
     <script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>
     <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
+
+    <!--VideoJS-->
+    <link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
+
+
     <HeadOutlet />
 </head>
 
 <body>
     <Routes />
     <script src="_framework/blazor.web.js"></script>
+    <script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script>
+    <script src="scripts/videojs.js"></script>
 </body>
 
 </html>
diff --git a/src/FairPlayCombinedSln/FairPlayTube/Components/Pages/Public/WatchVideo.razor b/src/FairPlayCombinedSln/FairPlayTube/Components/Pages/Public/WatchVideo.razor
@@ -14,21 +14,22 @@
 <FluentLabel Typo="Typography.H3">WatchVideo</FluentLabel>
 
 <LoadingIndicator ShowSpinners="this.IsBusy"></LoadingIndicator>
-@if (!this.UseFallbackMode)
+@if (!this.UseFallbackMode && !String.IsNullOrWhiteSpace(this.VideoUrl))
 {
     <div id="container" data-permanent>
-        <video id="video"
-               class="azuremediaplayer amp-default-skin amp-stream-skin"
-               autoplay
-               controls
-               width="200"
-               height="200">
-            <p class="amp-no-js">
-                To view this video please enable JavaScript, and consider upgrading to
-                a web browser that supports HTML5 video
-            </p>
+        <!-- HTML -->
+        <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"
+               data-setup='{}'>
+            <source src="@this.VideoUrl" type="application/x-mpegURL">
+            @if (this.SupportedLanguages?.Length > 0)
+            {
+                foreach (var singleSupportedLanguage in this.SupportedLanguages)
+                {
+                    <track kind="captions" src="@($"/api/video/{this.VideoId}/captions/{singleSupportedLanguage.languageCode}")"
+                           srclang="@singleSupportedLanguage.languageCode" label="@singleSupportedLanguage.name" />
+                }
+            }
         </video>
-        <div class="inline"></div>
     </div>
     <div>
         <FluentButton Type="ButtonType.Button"
@@ -53,6 +54,8 @@ else
     private CancellationTokenSource cancellationTokenSource = new();
     private bool UseFallbackMode { get; set; }
     private string? FallbackModeUrl { get; set; }
+    private string? VideoUrl { get; set; }
+    private SupportedLanguageModel[]? SupportedLanguages { get; set; }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
@@ -66,24 +69,12 @@ else
             this.videoIndex = await azureVideoIndexerService
             .GetVideoIndexAsync(this.VideoId!, viAccessTokenResponse!.AccessToken!,
             this.cancellationTokenSource.Token);
-            var supportedLanguages = await azureVideoIndexerService
+            this.VideoUrl = $"{videoIndex!.videos![0].publishedUrl}?accessToken={viAccessTokenResponse.AccessToken}";
+            this.SupportedLanguages = await azureVideoIndexerService
             .GetSupportedLanguagesAsync(viAccessTokenResponse!.AccessToken!,
             this.cancellationTokenSource.Token);
-            var singleVideoIndex = videoIndex!.videos!.Single();
-            await jsRuntime.InvokeVoidAsync(
-                identifier: "initSource",
-                cancellationToken: this.cancellationTokenSource.Token,
-            "video",
-            singleVideoIndex.publishedUrl,
-            singleVideoIndex.viewToken,
-            this.VideoId,
-            supportedLanguages!.Select(p => new
-            {
-                src = $"/api/video/{this.VideoId}/captions/{p.languageCode}",
-                srclang = p.languageCode,
-                kind = "subtitles",
-                label = p.name
-            }).OrderBy(p => p.label).ToArray());
+            StateHasChanged();
+            await jsRuntime.InvokeVoidAsync("initializeVideoJsPlayer", "my_video_1");
             this.IsBusy = false;
             StateHasChanged();
         }

diff --git a/src/FairPlayCombinedSln/FairPlayTube/wwwroot/scripts/videojs.js b/src/FairPlayCombinedSln/FairPlayTube/wwwroot/scripts/videojs.js
@@ -0,0 +1,3 @@
+function initializeVideoJsPlayer(playerElementId) {
+    videojs(playerElementId, {});
+}