Merge pull request #50 from cloudflare/add-start-time

Add start time

README.md

@@ -81,6 +81,19 @@ export type StreamProps = {
    * The <video> element does not force the browser to follow the value of this attribute; it is a mere hint. Even though the preload="none" option is a valid HTML5 attribute, Stream player will always load some metadata to initialize the player. The amount of data loaded in this case is negligable.
    */
   preload?: "auto" | "metadata" | "none" | boolean;
+  /**
+   * Any valid CSS color value provided will be applied to certain elements of the player's UI.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
+   */
+  primaryColor?: string;
+  /**
+   * A timestamp that specifies the time when playback begins.
+   * If a plain number is used such as ?startTime=123, it will
+   * be interpreted as 123 seconds. More human readable timestamps
+   * can also be used, such as ?startTime=1h12m27s for 1 hour,
+   * 12 minutes, and 27 seconds.
+   */
+  startTime?: string | number;
   /**
    * Automatically manages the aspect ratio of the iframe for you. Defaults to true. If you want to manually handle the styles yourself, set this to false.
    */

src/Stream.tsx

@@ -104,6 +104,7 @@ export const StreamEmbed: FC<StreamProps> = ({
   poster,
   currentTime = 0,
   volume = 1,
+  startTime,
   streamRef,
   responsive = true,
   className,
@@ -154,6 +155,7 @@ export const StreamEmbed: FC<StreamProps> = ({
     primaryColor,
     adUrl,
     defaultTextTrack,
+    startTime,
   });
 
   // While it's easier for most consumers to simply provide the video id

src/types.ts

@@ -158,6 +158,14 @@ export interface StreamProps {
    * Either the video id or the signed url for the video you’ve uploaded to Cloudflare Stream should be included here.
    */
   src: string;
+  /**
+   * A timestamp that specifies the time when playback begins.
+   * If a plain number is used such as ?startTime=123, it will
+   * be interpreted as 123 seconds. More human readable timestamps
+   * can also be used, such as ?startTime=1h12m27s for 1 hour,
+   * 12 minutes, and 27 seconds.
+   */
+  startTime?: string | number;
   /**
    * Ref for accessing the underlying stream element. Useful for providing imperative access to the player API:
    * https://developers.cloudflare.com/stream/viewing-videos/using-the-player-api

src/useIframeSrc.tsx

@@ -8,6 +8,7 @@ interface IframeSrcOptions {
   controls?: boolean;
   poster?: string;
   primaryColor?: string;
+  startTime?: string | number;
   adUrl?: string;
   defaultTextTrack?: string;
   preload?: Preload;
@@ -24,6 +25,7 @@ export function useIframeSrc(
     poster,
     primaryColor,
     adUrl,
+    startTime,
     defaultTextTrack,
   }: IframeSrcOptions
 ) {
@@ -33,6 +35,7 @@ export function useIframeSrc(
     defaultTextTrack &&
       `defaultTextTrack=${encodeURIComponent(defaultTextTrack)}`,
     primaryColor && `primaryColor=${encodeURIComponent(primaryColor)}`,
+    startTime && `startTime=${startTime}`,
     muted && "muted=true",
     preload && `preload=${preload}`,
     loop && "loop=true",