Merged in fix/BOOK-257-video-player (pull request #3373)

Fix/BOOK-257 video player

* fix(BOOK-257): Fixes to VideoPlayerButton and added stories

* fix(BOOK-257): Hiding mute button when the user has interacted with it

* fix(BOOK-257): Added support for poster image

* fix(BOOK-257): add crossOrigin attr to videoplayer

* fix(BOOK-257): comment


Approved-by: Anton Gunnarsson

packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx

@@ -30,6 +30,16 @@ const meta: Meta<typeof VideoPlayer> = {
       description:
         'The different sources of the video, including their formats.',
     },
+    poster: {
+      table: {
+        type: {
+          summary:
+            '{src: string, dimensions?: { width: number; height: number }}',
+        },
+      },
+      description:
+        'The poster image to be displayed before playback. Default behavior in iOS is that the first frame of the video is not visible until playback starts, so providing a poster image is recommended for better user experience.',
+    },
     captions: {
       table: {
         type: {
@@ -77,17 +87,29 @@ export default meta
 
 type Story = StoryObj<typeof VideoPlayer>
 
+const inlineSources = [
+  {
+    src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltf1f715c41793a9fb/6943e943ca0c69c3d00bd620/Scandic_EB_Video.mp4',
+    type: 'video/mp4',
+  },
+]
+
+const heroSources = [
+  {
+    src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltc3aa53ac9bf6798c/693ad4b65b0889d6348893f3/Test_video.mp4',
+    type: 'video/mp4',
+  },
+  {
+    src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/blt029be07ddd444eea/693c251c09e17b33c93c1dd6/hero-banner-1920-vp9.webm',
+    type: 'video/webm',
+  },
+]
+
 const defaultArgs = {
-  sources: [
-    {
-      src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/bltc3aa53ac9bf6798c/693ad4b65b0889d6348893f3/Test_video.mp4',
-      type: 'video/mp4',
-    },
-    {
-      src: 'https://eu-assets.contentstack.com/v3/assets/bltfd73aa2de3a5c4e3/blt029be07ddd444eea/693c251c09e17b33c93c1dd6/hero-banner-1920-vp9.webm',
-      type: 'video/webm',
-    },
-  ],
+  sources: inlineSources,
+  poster: {
+    src: 'https://imagevault.scandichotels.com/publishedmedia/dtpv2wgm6jhix2pqpp88/Scandic_Downtown_Camper_restaurang_bar_The_Nest_lounge_eld.jpg',
+  },
   captions: [
     {
       src: './video/captions_en.vtt',
@@ -114,6 +136,7 @@ export const BareHero: Story = {
   args: {
     ...Default.args,
     variant: 'hero',
+    sources: heroSources,
   },
   name: 'Hero (barebones)',
   parameters: {