Mishka
Chelekom

Video

v0.0.10

v0.0.10StableComponentStatelessApache-2.0
Installation mix mishka.ui.gen.component video
Source View Source

Overview of the Phoenix and LiveView Video Component

The Mishka Chelekom video is a highly customizable and responsive video component for Phoenix LiveView applications, designed to streamline the integration of HTML5 video elements. It supports various advanced features such as multiple media sources, subtitles, customizable caption styles, and thumbnails. Developers can easily embed videos with controls for playback, aspect ratio.

Built to enhance user experience, The Mishak Chelekom video component, a Phoenix LiveView component offers flexible design options, including support for multiple caption backgrounds, opacity levels, and customizable sizes for responsive playback across different devices. By using this component, developers can effortlessly integrate video functionality into their Phoenix applications while maintaining control over design and accessibility features.

How to use Phoenix and LiveView video component

By using the :source slot in the Mishka Chelekom Video Component, you can add videos in different formats. This allows the browser to automatically choose the best-supported format.

Supported Formats:
  • MP4 (video/mp4): The most widely supported format.
  • WebM (video/webm): High-quality compression, ideal for modern browsers.
  • OGG (video/ogg): Open-source alternative, supported by Firefox and Opera.

How to use Phoenix and LiveView video component

heex
<.video controls>
  <:source src="/path" type="video/webm" />
  <:source src="/path" type="video/mp4" />
</.video>

Add subtitle to Phoenix Liveview video component

By using the :track slot, you can easily add subtitles to your videos in the Mishka Chelekom Video Component. This slot allows you to define subtitles in different languages, making your video content accessible to a wider audience.

Supported Formats:
  • Label: Describes the language or type of the subtitle.
  • Kind: Specifies whether the track is subtitles, captions, or descriptions.
  • Language: Defines the language code (e.g., "en" for English).
  • Default: Marks the track as the default subtitle.

By utilizing the :track slot, you ensure that your videos are more inclusive and user-friendly with customizable subtitles.

Add subtitle to Phoenix Liveview video component

heex
<.video controls>
  <:source src="/path" type="video/webm" />
  <:source src="/path" type="video/mp4" />
  <:track kind="captions" srclang="en" src="/path" default />
</.video>

Thumbnail prop

The thumbnail prop in Video Component allows you to specify a preview image for your video. This is useful for displaying a static image before the video starts playing, providing users with a visual cue of the video's content. default value is nil By setting a thumbnail, you enhance user engagement by giving them a preview of the video, which can encourage them to click and watch. This feature is particularly useful for promoting video content visually.

Thumbnail prop

heex
<.video thumbnail="/path" controls>
  <:source src="/path" type="video/webm" />
  <:source src="/path" type="video/mp4" />
</.video>

Width prop

The width attribute in the Mishka Chelekom Video Component allows you to set the width using predefined options like extra_small, small, medium, large, and extra_large. You can also add any custom width by using Tailwind CSS classes or other custom values, providing flexibility to match your design.

Width prop

heex
<.video width="extra_small" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video width="small" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video width="medium" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video width="large" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video width="extra_large" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video width="full" controls>
  <:source src="/path" type="video/mp4" />
</.video>

Height prop in Phoenix Liveview video component

The height attribute in the Mishka Chelekom Video Component allows you to set the height using predefined options like extra_small, small, medium, large, and extra_large. You can also add any custom height by using Tailwind CSS classes or other custom values, providing flexibility to match your design.

Height prop in Phoenix Liveview video component

heex
<.video height="extra_small" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video height="small" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video height="medium" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video height="large" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video height="extra_large" controls>
  <:source src="/path" type="video/mp4" />
</.video>

Rounded prop in Phoenix Liveview video component

The rounded attribute in the Mishka Chelekom Video Component allows you to set the radius using predefined options like extra_small, small, medium, large, and extra_large. You can also add any custom radius by using Tailwind CSS classes or other custom values, providing flexibility to match your design.

Rounded prop in Phoenix Liveview video component

heex
<.video rounded="extra_small" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video rounded="small" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video rounded="medium" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video rounded="large" controls>
  <:source src="/path" type="video/mp4" />
</.video>

<.video rounded="extra_large" controls>
  <:source src="/path" type="video/mp4" />
</.video>

Caption Size prop in Phoenix Liveview video component

The caption_size prop in the Mishka Chelekom Video Component allows you to change text size of subtitle using predefined options like extra_small, small, medium, large, extra_large, double_large, triple_large, and quadruple_large. You can also add any custom radius by using Tailwind CSS classes or other custom values, providing flexibility to match your design.

Caption Size prop in Phoenix Liveview video component

heex
<.video thumbnail="/path" caption_size="extra_small">
  <:source src="/path" type="video/mp4" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_size="small">
  <:source src="/path" type="video/mp4" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_size="medium">
  <:source src="/path" type="video/mp4" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_size="large">
  <:source src="/path" type="video/mp4" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_size="extra_large">
  <:source src="/path" type="video/mp4" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_size="double_large">
  <:source src="/path" type="video/mp4" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_size="triple_large">
  <:source src="/path" type="video/mp4" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_size="quadruple_large">
  <:source src="/path" type="video/mp4" />
  <:track kind="captions" src="/path" default />
</.video>

Caption background prop

The caption_background attribute in the Mishka Chelekom Video Component allows you to customize the background color of video captions, enhancing readability and matching the design of your application. You can select from a variety of predefined color options such as white, primary, secondary, dark (default), success, warning, danger, info, misc, dawn, and silver. This flexibility allows you to adjust the caption background to match your app's aesthetic and ensure the captions are clear and easy to read for users.

Caption background prop

heex
<.video thumbnail="/path" caption_background="white">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="primary">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="secondary">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="dark">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="success">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="warning">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="danger">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="info">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="silver">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="misc">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="dawn">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_background="silver">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

Caption opacity prop

The caption_opacity prop in the Mishka Chelekom Video Component allows you to change opacity of subtitle using predefined options like transparent, translucent, semi_transparent, lightly_tinted, tinted, semi_opaque, opaque, heavily_tinted, almost_solid, and solid. You can also add any custom opacity by using Tailwind CSS classes or other custom values, providing flexibility to match your design.

Caption opacity prop

heex
<.video thumbnail="/path" caption_opacity="transparent">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_opacity="translucent">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_opacity="semi_transparent">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_opacity="lightly_tinted">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_opacity="tinted">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_opacity="semi_opaque">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_opacity="opaque">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_opacity="heavily_tinted">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_opacity="almost_solid">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" caption_opacity="solid">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

Ratio prop in Phoenix Liveview video component

The ratio attribute in the Mishka Chelekom Video Component allows you to set the aspect ratio of the video. This attribute ensures that the video maintains its intended proportions during playback, enhancing the visual presentation. You can choose from predefined aspect ratios such as auto, square, video, 4:3, 3:2, and 21:9. By setting the aspect ratio, you can ensure your video displays correctly across various devices and screen sizes.

Ratio prop in Phoenix Liveview video component

heex
<.video thumbnail="/path" ratio="auto">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" ratio="square">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" ratio="video">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" ratio="4:3">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" ratio="3:2">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

<.video thumbnail="/path" ratio="21:9">
  <:source src="/path" type="video/webm" />
  <:track kind="captions" src="/path" default />
</.video>

Extra Information

  • Ensure your video and .vtt files are served from the same web server. Browsers may block captions if accessed from the local file system or different servers. Use a local web server for testing to avoid these issues.
  • When you access an HTML file directly from your file system (file:/// protocol), browsers often have restrictions that prevent the proper functioning of certain features, including the <track> tag. The captions might not display properly in such cases.
  • The video source and .vtt file should generally be hosted on the same server to avoid cross-origin issues (CORS). If they are on different servers, you may need to ensure proper CORS headers are set up to allow the browser to access the caption file.
  • Adding a Base64-encoded subtitle directly to a video won't cause a CORS issue, so you can use it in your components even if the subtitle is not from the same origin.