Video

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.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.

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.

<.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 :tarack 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


  :tarack

slot, you ensure that your videos are more inclusive and user-friendly with customizable subtitles.

<.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.

<.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.

<.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.

<.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.

<.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.

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

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

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

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

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

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

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

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

Caption background prop

The caption_bakcground 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, light, 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.

<.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="light">
  <: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.

<.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.

<.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.

Name	Type	Required	Description
id	string	No	A unique identifier used to manage state and interaction.
thumbnail	string	No	Determines the thumbnail for the video.
width	string	No	Determines the element width. Default is full.
rounded	string	No	Determines the border radius. Default is none.
height	string	No	Determines the element height. Default is auto.
caption_size	string	No	Determines the video caption size. Default is extra_small.
caption_background	string	No	Determines the video caption background color. Default is dark.
caption_opacity	string	No	Determines the video caption opacity. Default is solid.
ratio	string	No	Determines the video ratio. Default is auto.
class	string	No	Custom CSS class for additional styling.

Name	Type	Options	Recommended?
`--rounded`	string	extra_small - small - medium - large - extra_large - none	Yes
`--only`	string	video	Yes
`--module`	string	Something	NO

Mishka