Re-enable HLS

Author: domlander

dotcom-rendering/src/components/SelfHostedVideo.stories.tsx

@@ -38,26 +38,26 @@ export const Loop5to4: Story = {
 			'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
 		fallbackImage: '',
 	},
-};
-
-// export const WithM3U8File: Story = {
-// 	name: 'With M3U8 file',
-// 	args: {
-// 		...Default.args,
-// 		sources: [
-// 			{
-// 				src: 'https://uploads.guimcode.co.uk/2025/09/01/Loop__Japan_fireball--ace3fcf6-1378-41db-9d21-f3fc07072ab2-1.10.m3u8',
-// 				mimeType: 'application/x-mpegURL',
-// 			},
-// 			{
-// 				src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
-// 				mimeType: 'video/mp4',
-// 			},
-// 		],
-// 	},
-// };
-
-export const Loop16to9: Story = {
+} satisfies Story;
+
+export const WithM3U8File = {
+	name: 'With M3U8 file',
+	args: {
+		...Loop5to4.args,
+		sources: [
+			{
+				src: 'https://uploads.guimcode.co.uk/2025/09/01/Loop__Japan_fireball--ace3fcf6-1378-41db-9d21-f3fc07072ab2-1.10.m3u8',
+				mimeType: 'application/x-mpegURL',
+			},
+			{
+				src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
+				mimeType: 'video/mp4',
+			},
+		],
+	},
+} satisfies Story;
+
+export const Loop16to9 = {
 	name: 'Looping video in 16:9 aspect ratio',
 	args: {
 		...Loop5to4.args,
@@ -70,14 +70,14 @@ export const Loop16to9: Story = {
 		height: 1080,
 		width: 1920,
 	},
-};
+} satisfies Story;
 
-export const WithCinemagraph: Story = {
+export const WithCinemagraph = {
 	args: {
 		...Loop5to4.args,
 		videoStyle: 'Cinemagraph',
 	},
-};
+} satisfies Story;
 
 export const PausePlay: Story = {
 	...Loop5to4,
@@ -98,7 +98,7 @@ export const PausePlay: Story = {
 		await userEvent.click(videoEl);
 		await expect(canvas.queryByTestId('play-icon')).not.toBeInTheDocument();
 	},
-};
+} satisfies Story;
 
 export const UnmuteMute: Story = {
 	...Loop5to4,
@@ -120,7 +120,7 @@ export const UnmuteMute: Story = {
 		await userEvent.click(canvas.getByTestId('mute-icon'));
 		await canvas.findByTestId('unmute-icon');
 	},
-};
+} satisfies Story;
 
 // Function to emulate pausing between interactions
 function sleep(ms: number) {
@@ -150,4 +150,4 @@ export const InteractionObserver: Story = {
 		await expect(Number(progressBar.ariaValueNow)).toEqual(progress);
 		await expect(canvas.queryByTestId('play-icon')).not.toBeInTheDocument();
 	},
-};
+} satisfies Story;

dotcom-rendering/src/frontend/schemas/feArticle.json

@@ -5472,8 +5472,7 @@
                                         "type": "string"
                                     },
                                     "mimeType": {
-                                        "type": "string",
-                                        "const": "video/mp4"
+                                        "$ref": "#/definitions/SupportedVideoFileType"
                                     }
                                 },
                                 "required": [
@@ -5518,6 +5517,14 @@
             ],
             "type": "string"
         },
+        "SupportedVideoFileType": {
+            "enum": [
+                "application/vnd.apple.mpegurl",
+                "application/x-mpegURL",
+                "video/mp4"
+            ],
+            "type": "string"
+        },
         "Audio": {
             "allOf": [
                 {

dotcom-rendering/src/frontend/schemas/feFront.json

@@ -3967,8 +3967,7 @@
                                         "type": "string"
                                     },
                                     "mimeType": {
-                                        "type": "string",
-                                        "const": "video/mp4"
+                                        "$ref": "#/definitions/SupportedVideoFileType"
                                     }
                                 },
                                 "required": [
@@ -4013,6 +4012,14 @@
             ],
             "type": "string"
         },
+        "SupportedVideoFileType": {
+            "enum": [
+                "application/vnd.apple.mpegurl",
+                "application/x-mpegURL",
+                "video/mp4"
+            ],
+            "type": "string"
+        },
         "Audio": {
             "allOf": [
                 {

dotcom-rendering/src/lib/video.ts

@@ -11,13 +11,10 @@ export type Source = {
 
 /**
  * Order is important here - the browser will use the first type it supports.
- * 'application/x-mpegURL' & 'application/vnd.apple.mpegurl' have been filtered out
- * whilst a hls chrome bug is investigated
- * https://issues.chromium.org/issues/454630434
  */
 export const supportedVideoFileTypes = [
-	// 'application/x-mpegURL', // HLS format
-	// 'application/vnd.apple.mpegurl', // Alternative HLS format
+	'application/x-mpegURL', // HLS format
+	'application/vnd.apple.mpegurl', // Alternative HLS format
 	'video/mp4', // MP4 format
 ] as const;
 

dotcom-rendering/src/model/enhanceCards.test.ts

@@ -1,12 +1,7 @@
 import type { FEMediaAsset, FEMediaAtom } from '../frontend/feFront';
 import { getActiveMediaAtom } from './enhanceCards';
 
-/**
- * Why has this test suite been skipped?
- *
- * M3U8s have been disabled whilst a chrome hls bug is investigated.
- */
-describe.skip('Enhance Cards', () => {
+describe('Enhance Cards', () => {
 	it('prioritises m3u8 assets over MP4 assets', () => {
 		const videoReplace = true;
 		const assets: FEMediaAsset[] = [