In the last 2 articles, I walked you through how I set up file upload and image displaying functionality. In this article, I’ll talk about how I set functionality that allows uploaded videos to be played.
Video playing functionality📽
To set up video-playing functionality, a video player that plays the selected video file in the browser is required. There are 3 ways to create or access a video player. The first is by using the built-in video tag to access a video player which displays videos in the same way the image tag is used to display images. The second is by using 3rd party packages such as ReactPlayer and react-video-js-player. The third way is by creating a video player from scratch. For the Whinst web app, I decided to use the 3rd party video player package ReactPlayer.
Setting up and using ReactPlayer was simple thanks to their straightforward documentation. After installing the package I set it up in the code by adding the react player component and specifying the video link and the properties that are required for the Whinst app. The code below shows how you can add ReactPlayer to a web app.
import React from 'react'
import ReactPlayer from 'react-player'
const export default function VideoPlayer(){
return(
//Loading a video from youtube
<ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' />
//Loading a video from your server
<ReactPlayer url={`http://localhost:5000/video-file-path.mp4`} />
)}With videos now displaying in the Whinst web app, I’ve moved on to adding functionality that allows video thumbnails to be added when a video is uploaded. Thank you for reading🙏.