Make video compatible for all devices

<!-- This pulls Uppy from our CDN -->
<!-- For smaller self-hosted bundles, install Uppy and plugins manually: -->
<!-- npm i --save @uppy/core @uppy/dashboard @uppy/remote-sources @uppy/transloadit ... -->
<link
  href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
  rel="stylesheet"
/>
<button id="browse">Select Files</button>
<script type="module">
  import {
    Uppy,
    Dashboard,
    ImageEditor,
    RemoteSources,
    Transloadit,
  } from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
  const uppy = new Uppy()
    .use(Transloadit, {
      waitForEncoding: true,
      alwaysRunAssembly: true,
      assemblyOptions: {
        params: {
          // It's often better store encoding instructions in your account
          // and use a `template_id` instead of adding these steps inline
          steps: {
            ':original': {
              robot: '/upload/handle',
            },
            plain_720_vp9_encoded: {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              height: 720,
              preset: 'webm',
              turbo: false,
              width: 1280,
            },
            plain_720_h264_encoded: {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              height: 720,
              preset: 'ipad-high',
              turbo: false,
              width: 1280,
            },
            thumbnailed: {
              use: 'plain_720_h264_encoded',
              robot: '/video/thumbs',
              result: true,
              count: 1,
              ffmpeg_stack: 'v7',
              format: 'jpg',
              height: 720,
              resize_strategy: 'fit',
              width: 1280,
            },
            dash_720p_video: {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'dash_720p_video',
              turbo: false,
            },
            dash_360p_video: {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'dash_360p_video',
              turbo: false,
            },
            dash_270p_video: {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'dash_270p_video',
              turbo: false,
            },
            'dash-32k-audio': {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'dash-32k-audio',
              turbo: false,
            },
            'dash-64k-audio': {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'dash-64k-audio',
              turbo: false,
            },
            'hls-720p-video': {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'hls-720p',
              turbo: false,
            },
            'hls-360p-video': {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'hls-360p',
              turbo: false,
            },
            'hls-270p-video': {
              use: ':original',
              robot: '/video/encode',
              result: true,
              ffmpeg_stack: 'v7',
              preset: 'hls-270p',
              turbo: false,
            },
            dash_adapted: {
              use: {
                steps: ['dash_720p_video', 'dash_360p_video', 'dash_270p_video', 'dash-64k-audio', 'dash-32k-audio'],
                bundle_steps: true,
              },
              robot: '/video/adaptive',
              result: true,
              playlist_name: 'dash-playlist.mpd',
              technique: 'dash',
            },
            hls_adapted: {
              use: {
                steps: ['hls-720p-video', 'hls-360p-video', 'hls-270p-video'],
                bundle_steps: true,
              },
              robot: '/video/adaptive',
              result: true,
              playlist_name: 'hls-playlist.m3u8',
              technique: 'hls',
            },
            adaptive_exported: {
              use: ['dash_adapted', 'hls_adapted'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              path: '${unique_original_prefix}-${file.original_basename}/adapt/${file.meta.relative_path}/${file.name}',
              url_prefix: 'https://demos.transloadit.com/',
            },
            plain_exported: {
              use: [':original', 'plain_720_vp9_encoded', 'plain_720_h264_encoded', 'thumbnailed'],
              robot: '/s3/store',
              credentials: 'demo_s3_credentials',
              path: '${unique_original_prefix}-${file.original_basename}/plain/${previous_step.name}.${file.ext}',
              url_prefix: 'https://demos.transloadit.com/',
            },
          },
        },
      },
    })
    .use(Dashboard, { trigger: '#browse' })
    .use(ImageEditor, { target: Dashboard })
    .use(RemoteSources, {
      companionUrl: 'https://api2.transloadit.com/companion',
    })
    .on('complete', ({ transloadit }) => {
      // Due to `waitForEncoding:true` this is fired after encoding is done.
      // Alternatively, set `waitForEncoding` to `false` and provide a `notify_url`
      console.log(transloadit) // Array of Assembly Statuses
      for (const assembly of transloadit) {
        console.log(assembly.results) // Array of all encoding results
      }
    })
    .on('error', (error) => {
      console.error(error)
    })
</script>