From ac8c61549a9717dbe3971801444215a217b0b7fb Mon Sep 17 00:00:00 2001 From: binon Date: Thu, 20 Jun 2024 16:41:29 +0100 Subject: [PATCH 1/2] Apple device fix recommended by MK --- LearningHub.Nhs.WebUI/Views/Home/_CmsVideo.cshtml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/LearningHub.Nhs.WebUI/Views/Home/_CmsVideo.cshtml b/LearningHub.Nhs.WebUI/Views/Home/_CmsVideo.cshtml index 3ecccd7ef..8bcb5ada1 100644 --- a/LearningHub.Nhs.WebUI/Views/Home/_CmsVideo.cshtml +++ b/LearningHub.Nhs.WebUI/Views/Home/_CmsVideo.cshtml @@ -63,7 +63,8 @@ theme: "dark", playback: { muted: false, - autoplay: false + autoplay: false, + preferredTech: [{ player: 'html5', streaming: 'hls' }] }, // Subscribe to player events From d1355ddf8eb4968f79c05d7e95697d942aa8db80 Mon Sep 17 00:00:00 2001 From: binon Date: Mon, 24 Jun 2024 15:00:34 +0100 Subject: [PATCH 2/2] Fix for apple player --- .../Scripts/vuesrc/MKPlayerConfigEnum.ts | 14 +++ .../Scripts/vuesrc/content/cmsPageRow.vue | 4 +- .../Scripts/vuesrc/MKPlayerConfigEnum.ts | 14 +++ .../components/MKIOVideoPlayer.vue | 110 +++++++++--------- .../vuesrc/resource/ResourceContent.vue | 4 +- 5 files changed, 91 insertions(+), 55 deletions(-) create mode 100644 AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/MKPlayerConfigEnum.ts create mode 100644 LearningHub.Nhs.WebUI/Scripts/vuesrc/MKPlayerConfigEnum.ts diff --git a/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/MKPlayerConfigEnum.ts b/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/MKPlayerConfigEnum.ts new file mode 100644 index 000000000..6794155b3 --- /dev/null +++ b/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/MKPlayerConfigEnum.ts @@ -0,0 +1,14 @@ +export enum MKPlayerType { + Html5 = "html5", + Native = "native", + WebRtc = "webrtc", + Unknown = "unknown" +} +export enum MKStreamType { + Hls = "hls", + Dash = "dash", + Progressive = "progressive", + Smooth = "smooth", + Whep = "whep", + Unknown = "unknown" +}; diff --git a/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/cmsPageRow.vue b/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/cmsPageRow.vue index 96d9f3827..ec21a1ba4 100644 --- a/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/cmsPageRow.vue +++ b/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/content/cmsPageRow.vue @@ -70,6 +70,7 @@ import { contentData } from '../data/content'; import { AzureMediaAssetModel } from '../models/content/videoAssetModel'; import { MKPlayer } from '@mediakind/mkplayer'; + import { MKPlayerType, MKStreamType } from '../MKPlayerConfigEnum'; export default Vue.extend({ props: { @@ -198,7 +199,8 @@ ui: false, playback: { muted: false, - autoplay: false + autoplay: false, + preferredTech: [{ player: MKPlayerType.Html5, streaming: MKStreamType.Hls }] // to force the player to use html5 player instead of native on safari }, theme: "dark", events: { diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/MKPlayerConfigEnum.ts b/LearningHub.Nhs.WebUI/Scripts/vuesrc/MKPlayerConfigEnum.ts new file mode 100644 index 000000000..6794155b3 --- /dev/null +++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/MKPlayerConfigEnum.ts @@ -0,0 +1,14 @@ +export enum MKPlayerType { + Html5 = "html5", + Native = "native", + WebRtc = "webrtc", + Unknown = "unknown" +} +export enum MKStreamType { + Hls = "hls", + Dash = "dash", + Progressive = "progressive", + Smooth = "smooth", + Whep = "whep", + Unknown = "unknown" +}; diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue index a6af9b29e..fe5b69ba3 100644 --- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue +++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/MKIOVideoPlayer.vue @@ -33,6 +33,9 @@ import { VideoFileModel } from '../../models/contribute-resource/blocks/videoFileModel'; import { MKPlayer } from '@mediakind/mkplayer'; import { resourceData } from '../../data/resource'; + import { MKPlayerType, MKStreamType } from '../../MKPlayerConfigEnum'; + //import { MKPlayerType } from '@mediakind/mkplayer/types/enums/MKPlayerType.d'; + //import { MKStreamType } from '@mediakind/mkplayer/types/enums/MKStreamType.d'; export default Vue.extend({ props: { fileId: Number, @@ -52,7 +55,7 @@ await this.getMKIOPlayerKey(); this.getMediaPlayUrl(); this.load(); - }, + }, methods: { onPlayerReady() { const videoElement = document.getElementById("bitmovinplayer-video-" + this.getPlayerUniqueId) as HTMLVideoElement; @@ -86,67 +89,68 @@ getMediaPlayUrl() { this.playBackUrl = this.videoFile.locatorUri; this.playBackUrl = this.playBackUrl.substring(0, this.playBackUrl.lastIndexOf("manifest")) + "manifest(format=m3u8-cmaf,encryption=cbc)"; - // this.playBackUrl = "https://ep-defaultlhdev-mediakind02-dev-by-am-sl.uksouth.streaming.mediakind.com/d01d30e4-461f-4045-bc10-3c88a296f3af/manifest.ism/manifest(format=m3u8-cmaf,encryption=cbc)" }, load() { - // Grab the video container - this.videoContainer = document.getElementById(this.getPlayerUniqueId); + // Grab the video container + this.videoContainer = document.getElementById(this.getPlayerUniqueId); - if(!this.mkioKey) { - this.getMKIOPlayerKey(); - } - // Prepare the player configuration - const playerConfig = { - key: this.mkioKey, - ui: false, - theme: "dark", - playback: { - muted: false, - autoplay: false, - }, - events: { - //error: this.onPlayerError, - //timechanged: this.onTimeChanged, - //onpause: this.onpause, - //onplay: this.onplay, - //muted: this.onMuted, - //unmuted: this.onUnmuted, - ready: this.onPlayerReady, - subtitleadded: this.onSubtitleAdded, + if (!this.mkioKey) { + this.getMKIOPlayerKey(); + } - //playbackspeed: this.onPlaybackSpeed - } - }; + // Prepare the player configuration + const playerConfig = { + key: this.mkioKey, + ui: false, + theme: "dark", + playback: { + muted: false, + autoplay: false, + preferredTech: [{ player: MKPlayerType.Html5, streaming: MKStreamType.Hls }] // to force the player to use html5 player instead of native on safari + }, + events: { + //error: this.onPlayerError, + //timechanged: this.onTimeChanged, + //onpause: this.onpause, + //onplay: this.onplay, + //muted: this.onMuted, + //unmuted: this.onUnmuted, + ready: this.onPlayerReady, + subtitleadded: this.onSubtitleAdded, - // Initialize the player with video container and player configuration - this.player = new MKPlayer(this.videoContainer, playerConfig); + //playbackspeed: this.onPlaybackSpeed + } + }; - // ClearKey DRM configuration - var clearKeyConfig = { - //LA_URL: "https://ottapp-appgw-amp.prodc.mkio.tv3cloud.com/drm/clear-key?ownerUid=azuki", - LA_URL:"HLS_AES", - headers: { - "Authorization": this.getBearerToken() - } - }; + // Initialize the player with video container and player configuration + this.player = new MKPlayer(this.videoContainer, playerConfig); - // Load source - const sourceConfig = { - hls: this.playBackUrl, - drm: { - clearkey: clearKeyConfig - } - }; + // ClearKey DRM configuration + var clearKeyConfig = { + //LA_URL: "https://ottapp-appgw-amp.prodc.mkio.tv3cloud.com/drm/clear-key?ownerUid=azuki", + LA_URL: "HLS_AES", + headers: { + "Authorization": this.getBearerToken() + } + }; - this.player.load(sourceConfig) - .then(() => { - console.log("Source loaded successfully!"); - }) - .catch(() => { - console.error("An error occurred while loading the source!"); - }); - } + // Load source + const sourceConfig = { + hls: this.playBackUrl, + drm: { + clearkey: clearKeyConfig + } + }; + + this.player.load(sourceConfig) + .then(() => { + console.log("Source loaded successfully!"); + }) + .catch(() => { + console.error("An error occurred while loading the source!"); + }); + } }, computed: { getPlayerUniqueId(): string { diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ResourceContent.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ResourceContent.vue index 5710b70ff..435dc8a1f 100644 --- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ResourceContent.vue +++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ResourceContent.vue @@ -100,6 +100,7 @@ import { getQueryParam } from './helpers/getQueryParam'; import { setResourceCetificateLink } from './helpers/resourceCertificateHelper'; import { MKPlayer } from '@mediakind/mkplayer'; + import { MKPlayerType, MKStreamType } from '../MKPlayerConfigEnum'; Vue.use(Vuelidate as any); @@ -280,6 +281,7 @@ playback: { muted: false, autoplay: false, + preferredTech: [{ player: MKPlayerType.Html5, streaming: MKStreamType.Hls }] // to force the player to use html5 player instead of native on safari }, events: { //error: this.onPlayerError, @@ -301,7 +303,7 @@ // ClearKey DRM configuration var clearKeyConfig = { //LA_URL: "https://ottapp-appgw-amp.prodc.mkio.tv3cloud.com/drm/clear-key?ownerUid=azuki", - LA_URL:"HLS_AES", + LA_URL: "HLS_AES", headers: { "Authorization": this.getBearerToken() }