Merge branch 'padms/1834'

equinor · Feb 19, 2024 · d12b76a · d12b76a
2 parents 71f740e + 38f0004
commit d12b76a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/sanityv3/schemas/objects/videoFile.tsx b/sanityv3/schemas/objects/videoFile.tsx
@@ -20,6 +20,7 @@ export default {
       name: 'thumbnail',
       type: 'imageWithAlt',
       title: 'Thumbnail',
+      description: 'Use the alt text below to describe the video content (for screenreaders).',
       initialValue: {
         isDecorative: true,
       },

diff --git a/web/components/src/HLSPlayer/index.tsx b/web/components/src/HLSPlayer/index.tsx
@@ -10,6 +10,7 @@ import useVideoAnalytics from '../../../lib/hooks/useVideoAnalytics'
 type HLSProps = Omit<HTMLProps<HTMLVideoElement>, 'src'> & {
   src: string
   playButton?: boolean
+  videoDescription?: string
 }
 
 const Wrapper = styled.div<{ $showSpinner: boolean }>`
@@ -69,6 +70,8 @@ export const HLSPlayer: React.FC<HLSProps> = ({
   controls = false,
   playButton = false,
   autoPlay = false,
+  muted = false,
+  videoDescription,
   ...props
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -157,12 +160,17 @@ export const HLSPlayer: React.FC<HLSProps> = ({
   }, [playButton])
 
   return (
-    <Wrapper $showSpinner={showSpinner}>
+    <Wrapper
+      $showSpinner={showSpinner}
+      role={muted ? 'img' : undefined}
+      aria-label={muted ? videoDescription : undefined}
+    >
       <video
         playsInline
         ref={videoRef}
         autoPlay={playButton ? false : autoPlay}
         controls={autoPlay ? false : showControls || controls}
+        muted={muted}
         {...props}
       />
       {showPlayButton && (

diff --git a/web/pageComponents/shared/Hero/LoopingVideo.tsx b/web/pageComponents/shared/Hero/LoopingVideo.tsx
@@ -49,7 +49,15 @@ export const LoopingVideo = ({ video }: { video: LoopingVideoData }) => {
   return (
     <Container $aspectRatio={ratio}>
       <StyledFigure>
-        <StyledHLSPlayer loop muted autoPlay title={title} poster={thumbnailURL.src} src={url} />
+        <StyledHLSPlayer
+          loop
+          muted
+          autoPlay
+          title={title}
+          poster={thumbnailURL.src}
+          src={url}
+          videoDescription={thumbnail.alt}
+        />
       </StyledFigure>
     </Container>
   )