chore(captions): add instructions for demo

packages/example/src/RemoteVideo/README.md

@@ -0,0 +1,4 @@
+# Remote captions demo
+
+- Navigate to the `src` folder
+- Serve the files `npx http-server --cors .`

packages/example/src/RemoteVideo/index.tsx

@@ -1,16 +1,22 @@
 import {useRef} from 'react';
-import {interpolate, useCurrentFrame, Video} from 'remotion';
+import {Caption, interpolate, useCurrentFrame, Video} from 'remotion';
 
 const RemoteVideo: React.FC = () => {
 	const frame = useCurrentFrame();
 	const ref = useRef<HTMLVideoElement>(null);
 
 	return (
-		<Video
-			ref={ref}
-			volume={interpolate(frame, [0, 500], [1, 0], {extrapolateRight: 'clamp'})}
-			src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
-		/>
+		<>
+			<Caption src="http://127.0.0.1:8080/subs.srt" />
+			<Caption src="http://127.0.0.1:8080/subs_alt.srt" />
+			<Video
+				ref={ref}
+				volume={interpolate(frame, [0, 500], [1, 0], {
+					extrapolateRight: 'clamp',
+				})}
+				src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+			/>
+		</>
 	);
 };
 

packages/example/src/RemoteVideo/src/subs.srt

@@ -1,11 +1,11 @@
 1
 00:00:00,000 --> 00:00:02,000
-Pellentesque habitant morbi tristique senectus et netus.
+Main subtitle #1
 
 2
 00:00:02,000 --> 00:00:04,000
-Inmensae subtilitatis, obscuris et malesuada fames.
+Main subtitle #1
 
 1
 00:00:04,000 --> 00:00:08,000
-Quo usque tandem abutere, Catilina, patientia nostra?
+Main subtitle #1

packages/example/src/RemoteVideo/src/subs_alt.srt

@@ -0,0 +1,11 @@
+1
+00:00:00,000 --> 00:00:02,000
+Alt subtitle #1
+
+2
+00:00:02,000 --> 00:00:04,000
+Alt subtitle #2
+
+1
+00:00:04,000 --> 00:00:08,000
+Alt subtitle #3