@zplane-web/craft-licensing

Video 

<div class="video">
    <video class="video__video" controls width="1280" height="720" playsinline poster="https://files.vidstack.io/sprite-fight/poster.webp" preload="none" data-video-translations="{&quot;Current time&quot;:&quot;Current time&quot;,&quot;Disable captions&quot;:&quot;Disable captions&quot;,&quot;Enable captions&quot;:&quot;Enable captions&quot;,&quot;Enter Fullscreen&quot;:&quot;Enter Fullscreen&quot;,&quot;Enter PiP&quot;:&quot;Enter PiP&quot;,&quot;Exit Fullscreen&quot;:&quot;Exit Fullscreen&quot;,&quot;Exit PiP&quot;:&quot;Exit PiP&quot;,&quot;Go back to previous menu&quot;:&quot;Go back to previous menu&quot;,&quot;Ad&quot;:&quot;Ad&quot;,&quot;AirPlay&quot;:&quot;AirPlay&quot;,&quot;All&quot;:&quot;All&quot;,&quot;Audio&quot;:&quot;Audio&quot;,&quot;Auto&quot;:&quot;Auto&quot;,&quot;Buffered&quot;:&quot;Buffered&quot;,&quot;Captions&quot;:&quot;Captions&quot;,&quot;Default&quot;:&quot;Default&quot;,&quot;Disabled&quot;:&quot;Disabled&quot;,&quot;Download&quot;:&quot;Download&quot;,&quot;Duration&quot;:&quot;Duration&quot;,&quot;Enabled&quot;:&quot;Enabled&quot;,&quot;End&quot;:&quot;End&quot;,&quot;Forward&quot;:&quot;Forward&quot;,&quot;LIVE&quot;:&quot;LIVE&quot;,&quot;Loop&quot;:&quot;Loop&quot;,&quot;Mute&quot;:&quot;Mute&quot;,&quot;Normal&quot;:&quot;Normal&quot;,&quot;Pause&quot;:&quot;Pause&quot;,&quot;Play&quot;:&quot;Play&quot;,&quot;Played&quot;:&quot;Played&quot;,&quot;Quality&quot;:&quot;Quality&quot;,&quot;Reset&quot;:&quot;Reset&quot;,&quot;Restart&quot;:&quot;Restart&quot;,&quot;Rewind&quot;:&quot;Rewind&quot;,&quot;Seek&quot;:&quot;Seek&quot;,&quot;Settings&quot;:&quot;Settings&quot;,&quot;Speed&quot;:&quot;Speed&quot;,&quot;Start&quot;:&quot;Start&quot;,&quot;Unmute&quot;:&quot;Unmute&quot;,&quot;Volume&quot;:&quot;Volume&quot;}">
        <source src="https://files.vidstack.io/sprite-fight/720p.mp4" type="video/mp4">
    </video>
</div>
 
<div {{ html_attributes({
  id: id ?? false,
  class: 'video',
}, attrs ?? {}) }}>
  <video {{ html_attributes({
    class: 'video__video',
    controls: controls ?? true,
    width: width ?? null,
    height: height ?? null,
    src: src ?? null,
    autoplay: autoplay ?? false,
    muted: muted ?? false,
    playsinline: playsinline ?? true,
    poster: poster ?? false,
    preload: preload ?? 'none',
    'data-video-translations': {
      'Current time': 'Current time' | t('site'),
      'Disable captions': 'Disable captions' | t('site'),
      'Enable captions': 'Enable captions' | t('site'),
      'Enter Fullscreen': 'Enter Fullscreen' | t('site'),
      'Enter PiP': 'Enter PiP' | t('site'),
      'Exit Fullscreen': 'Exit Fullscreen' | t('site'),
      'Exit PiP': 'Exit PiP' | t('site'),
      'Go back to previous menu': 'Go back to previous menu' | t('site'),
      'Ad': 'Ad' | t('site'),
      'AirPlay': 'AirPlay' | t('site'),
      'All': 'All' | t('site'),
      'Audio': 'Audio' | t('site'),
      'Auto': 'Auto' | t('site'),
      'Buffered': 'Buffered' | t('site'),
      'Captions': 'Captions' | t('site'),
      'Default': 'Default' | t('site'),
      'Disabled': 'Disabled' | t('site'),
      'Download': 'Download' | t('site'),
      'Duration': 'Duration' | t('site'),
      'Enabled': 'Enabled' | t('site'),
      'End': 'End' | t('site'),
      'Forward': 'Forward' | t('site'),
      'LIVE': 'LIVE' | t('site'),
      'Loop': 'Loop' | t('site'),
      'Mute': 'Mute' | t('site'),
      'Normal': 'Normal' | t('site'),
      'Pause': 'Pause' | t('site'),
      'Play': 'Play' | t('site'),
      'Played': 'Played' | t('site'),
      'Quality': 'Quality' | t('site'),
      'Reset': 'Reset' | t('site'),
      'Restart': 'Restart' | t('site'),
      'Rewind': 'Rewind' | t('site'),
      'Seek': 'Seek' | t('site'),
      'Settings': 'Settings' | t('site'),
      'Speed': 'Speed' | t('site'),
      'Start': 'Start' | t('site'),
      'Unmute': 'Unmute' | t('site'),
      'Volume': 'Volume' | t('site'),
    },
  }, videoAttrs ?? {}) }}>
    {% for source in sources|default %}
      <source {{ html_attributes(source) }}>
    {% endfor %}
  </video>
</div>
 
{
  "width": 1280,
  "height": 720,
  "poster": "https://files.vidstack.io/sprite-fight/poster.webp",
  "sources": [
    {
      "src": "https://files.vidstack.io/sprite-fight/720p.mp4",
      "type": "video/mp4"
    }
  ]
}
  • Content: 
    @import 'vidstack/player/styles/base.css';
@import 'vidstack/player/styles/plyr/theme.css';

.video {
  --plyr-color-main: var(--color-orange);
  --plyr-border-radius: var(--video-border-radius, var(--border-radius-medium));

  aspect-ratio: 16/9;
  block-size: auto;
  border-radius: var(--plyr-border-radius);
  box-shadow: var(--box-shadow-xxl);
  display: flex;
  inline-size: 100%;

  > * {
    block-size: 100%;
    display: block;
    inline-size: 100%;
  }
}
  • URL: /components/raw/video/video.scss
  • Filesystem Path: src/components/2-atoms/video/video.scss
  • Size: 467 Bytes
  • Content: 
    import onLoad from '../../../javascripts/utils/onLoad';

onLoad<HTMLVideoElement>('.video__video', async ($video) => {
  const { PlyrLayout, VidstackPlayer } = await import(/* webpackChunkName: "vidstack" */ 'vidstack/global/player');
  const { videoTranslations } = $video.dataset;

  await VidstackPlayer.create({
    target: $video,
    layout: new PlyrLayout({
      translations: videoTranslations ? JSON.parse(videoTranslations) : undefined,
    }),
  });
});
  • URL: /components/raw/video/video.ts
  • Filesystem Path: src/components/2-atoms/video/video.ts
  • Size: 466 Bytes

No notes defined.