Amplify-cli: Play video file from S3 bucket

[myfairshare]

Which Category is your question related to?
Storage / S3

Amplify CLI Version
4.27.3

What AWS Services are you utilizing?
Auth, DataStore, Storage

Provide additional details e.g. code snippets
Hello, I'm just looking for some general guidance on playing short video clips in my app.

So basicly, user can upload a video file to S3.
Another user will land on the users profile page.
Video appears like an embedded youtube video.
User can play the short clip in my react app.

Is this an easy enough thing to do internally in my own app without using something like youtube, ie find a video player on npm and play the videos through that and S3, hope this is not too vague, any tips much appreciated. Thank you.

[Hideman85]

Hi @myfairshare,

Yes this is an easy things to do. You can use @aws-amplify/storage for the upload (in your case looks to be security level protected) and use videojs has a player.

There is a piece of code you can use:

import React, { useEffect, useRef } from 'react'
import { ConsoleLogger as Logger } from '@aws-amplify/core'
import Storage from '@aws-amplify/storage'
import VideoJs from 'video.js'

const logger = new Logger('VideoComponent')

const videoJsOptions = {
  // techOrder: ['html5', 'flash'],
  controls: true,
  autoplay: false,
  fluid: false,
  loop: false,
  width: '100%',
  aspectRatio: '16:9'
}

const VideoPlayer = ({ fileKey, fileType }) => {
  const videoContainer = useRef()

  //  Setup the player
  useEffect(() => {
    //  Setting content like this because player.dispose() remove also the html content
    videoContainer.current.innerHTML = `
      <div data-vjs-player>
        <video class="video-js" />
      </div>
    `

    //  Setting logger level to all for dev
    if (process.env.NODE_ENV === 'development') {
      VideoJs.log('all')
    }

    const player = VideoJs(videoContainer.current.querySelector('video'), videoJsOptions, async () => {
      logger.debug(`Version of video.js is ${VideoJs.VERSION}`)
      const url = await Storage.get(fileKey, { level: 'protected' }) // Storage.get generates a signed url
      player.src({ src: url, type: fileType })
    })

    //  When destruct dispose the player
    return () => player.dispose()
  }, [fileKey, fileType])

  return <div ref={videoContainer} />
}

export default VideoPlayer

By the way videojs has a plugin system and one plugin that could be interesting for you is videojs-record.

Hope this helps.

[myfairshare]

Hideman85 thank you so much! Really appreciate your detailed reply, should help me out a tonne!

Will leave open for the moment if anyone else wants to chime in, thanks again mate!

Alan

[akshbhu]

Thanks for the answer @Hideman85 .

Hi @myfairshare

This seems to answer your question. you can also post this question on discord community to get more suggestions.https://discord.com/channels/705853757799399426/707328986077855836.

I am closing this issue as it seems to be answered. If you face any more issues regarding this, fell free to comment and I will reopen this again.

[myfairshare]

No problem, thank you akshbhu!