video function

Component video(
  1. List<Component> children, {
  2. bool? autoplay,
  3. bool? controls,
  4. CrossOrigin? crossOrigin,
  5. bool? loop,
  6. bool? muted,
  7. String? poster,
  8. Preload? preload,
  9. String? src,
  10. int? width,
  11. int? height,
  12. Key? key,
  13. String? id,
  14. String? classes,
  15. Styles? styles,
  16. Map<String, String>? attributes,
  17. Map<String, EventCallback>? events,
})

The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

  • autoplay: Indicates if the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
  • controls: If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
  • crossOrigin: Indicates whether to use CORS to fetch the related video.
  • loop: If specified, the browser will automatically seek back to the start upon reaching the end of the video.
  • muted: Indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.
  • poster: A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.
  • preload: Provides a hint to the browser about what the author thinks will lead to the best user experience with regards to what content is loaded before the video is played.
  • src: The URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed.
  • width: The width of the video's display area, in CSS pixels.
  • height: The height of the video's display area, in CSS pixels.

Implementation

Component video(List<Component> children,
    {bool? autoplay,
    bool? controls,
    CrossOrigin? crossOrigin,
    bool? loop,
    bool? muted,
    String? poster,
    Preload? preload,
    String? src,
    int? width,
    int? height,
    Key? key,
    String? id,
    String? classes,
    Styles? styles,
    Map<String, String>? attributes,
    Map<String, EventCallback>? events}) {
  return DomComponent(
    tag: 'video',
    key: key,
    id: id,
    classes: classes,
    styles: styles,
    attributes: {
      ...attributes ?? {},
      if (autoplay == true) 'autoplay': '',
      if (controls == true) 'controls': '',
      if (crossOrigin != null) 'crossorigin': crossOrigin.value,
      if (loop == true) 'loop': '',
      if (muted == true) 'muted': '',
      if (poster != null) 'poster': poster,
      if (preload != null) 'preload': preload.value,
      if (src != null) 'src': src,
      if (width != null) 'width': '$width',
      if (height != null) 'height': '$height',
    },
    events: events,
    children: children,
  );
}