{"id":27918,"date":"2022-03-23T22:59:46","date_gmt":"2022-03-23T22:59:46","guid":{"rendered":"http:\/\/How-To-Make-A-Custom-Video-Player-in-Redwood"},"modified":"2022-03-23T22:59:46","modified_gmt":"2022-03-23T22:59:46","slug":"how-to-make-a-custom-video-player-in-redwood","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/","title":{"rendered":"How To Make A Custom Video Player"},"content":{"rendered":"

Seeing videos on the web is expected at this point. It\u2019s one of the methods we use to teach ourselves new things or entertain ourselves. With videos being used so commonly, it\u2019s important for us to make good user interfaces for them.<\/p>\n

When your users are interacting with videos, you want to make sure they can easily control how the video plays and what features they have access to. Most video controls are right there on the video, but it doesn\u2019t have to be that way.<\/p>\n

In this tutorial, we\u2019re going to create a custom video player. It\u2019ll have multiple options for a user to enter and they\u2019ll be saved as user settings. When the page is reloaded, the selected video options will be reloaded as well.<\/p>\n

Setting up Redwood<\/h2>\n

Let\u2019s start by talking about what Redwood is. It\u2019s a full-stack JavaScript framework that uses React, GraphQL, and Prisma to handle everything from the front-end to the database. It has built-in testing and Storybook support, plus a bunch of other great features. You can learn more about it in the Redwood docs<\/a>.<\/p>\n

Now let\u2019s create a new Redwood app. You can do that by running:<\/p>\n

yarn create redwood-app custom-video-player<\/code><\/p>\n

Once that command finishes (it might take a few minutes), you\u2019ll have a fully functional full-stack app. The directory it creates has a number of files and subdirectories. The two most important directories are api<\/code> and web<\/code>.<\/p>\n

The api<\/code> folder holds all of the code for the GraphQL back-end and the Prisma model for the Postgres database. The web<\/code> folder holds all of the React front-end code. We\u2019ll be updating the code in these folders throughout this tutorial.<\/p>\n

You can run the app now to see what it looks like and how it loads with:<\/p>\n

yarn rw dev<\/code><\/p>\n

This command starts the GraphQL server and the front-end. The running app should look like this:<\/p>\n

\"base<\/p>\n

Since we know the app is working, let\u2019s update some back-end code.<\/p>\n

Handling the video data<\/h2>\n

We want to save a user\u2019s preferences for how a video is displayed and how it behaves, like will it run on a loop. To do that, we need to create a Prisma schema for Postgres database we\u2019ll connect to. I\u2019ll be connecting to a local Postgres instance and you can learn more about how to set that up on the Postgres downloads page<\/a>.<\/p>\n

In the .env<\/code> file, uncomment the DATABASE_URL<\/code> line and update it to match your Postgres instance. Here\u2019s an example of what mine looks like. Make sure you remember what your username and password are for your local Postgres server!<\/p>\n

DATABASE_URL=postgres:\/\/postgres:admin@localhost:5432\/video_player<\/code><\/p>\n

Next, we need to update our Prisma schema so open the schema.prisma<\/code> file. We\u2019re going to create the model for the Setting<\/code> table we need to hold the user values. Redwood already generated an example model, so we can just swap out the names of everything. Update your file to look like this.<\/p>\n

datasource db {\n  provider = \"postgresql\"<\/span>\n  url      = env(\"DATABASE_URL\"<\/span>)\n}\n\ngenerator client {\n  provider      = \"prisma-client-js\"<\/span>\n  binaryTargets = \"native\"<\/span>\n}\n\nmodel Setting {\n  id           Int     @id @default<\/span>(autoincrement())\n  videoName    String<\/span>  @unique\n  loop         Boolean<\/span>\n  volume       Float   @default<\/span>(0.5<\/span>)\n  controls     Boolean<\/span> @default<\/span>(false<\/span>)\n  playbackRate Float   @default<\/span>(1.5<\/span>)\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is how we tell our app to use Postgres as the database and how the tables should be structured. The Setting<\/code> model defines the settings we\u2019re saving for the user and the data types we expect for them. The last three options have default values so that a video will play whether or not the user picks any particular options.<\/p>\n
Now we\u2019ll add one piece of seed data. When we run our migration, it\u2019ll be nice to already have a user setting generated to start with. We aren\u2019t creating a new setting each time, we\u2019re just updating it. That means we need to have a setting already in place to update.<\/p>\n
In the seed.js<\/code> file, we\u2019re going to add one row of data to the Setting<\/code> table. Update your file to look like this.<\/p>\n
\/* eslint-disable no-console *\/<\/span>\nconst<\/span> { PrismaClient } = require<\/span>('@prisma\/client'<\/span>)\nconst<\/span> dotenv = require<\/span>('dotenv'<\/span>)\n\ndotenv.config()\nconst<\/span> db = new<\/span> PrismaClient()\n\nasync<\/span> function<\/span> main<\/span>(<\/span>) <\/span>{\n  console<\/span>.warn('Please define your seed data.'<\/span>)\n\n  const<\/span> record = await<\/span> db.setting.create({\n    data<\/span>: {\n      videoName<\/span>: 'elephant_herd'<\/span>,\n      loop<\/span>: false<\/span>,\n      controls<\/span>: true<\/span>,\n      volume<\/span>: 0.2<\/span>,\n      playbackRate<\/span>: 1.5<\/span>,\n    },\n  })\n  console<\/span>.log(record)\n}\n\nmain()\n  .catch((e<\/span>) =><\/span> console<\/span>.error(e))\n  .finally(async<\/span> () => {\n    await<\/span> db.$disconnect()\n  })\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now all that\u2019s left to do for our database is create and run a migration. To do this, run the following command:<\/p>\n
yarn rw prisma migrate dev<\/code><\/p>\n
This creates a new migration and seeds the data. Now when we get ready to connect the front-end, there will already be a setting to update. With the database ready to go, it\u2019s time to create our GraphQL server.<\/p>\n
Building the GraphQL server<\/h2>\n
Redwood does a lot of things for you pretty quickly.<\/p>\n
GraphQL schema and resolvers<\/h3>\n
We\u2019re about to run a command that will generate the GraphQL schema and resolvers.<\/p>\n
yarn rw g sdl setting<\/code><\/p>\n
If you take a look in the api > src > graphql<\/code> directory, you\u2019ll find all of the GraphQL types based on the Prisma schema you need to do some basic operations. Now look in the api > src > services<\/code> directory. There\u2019s a settings<\/code> folder that has the file for one resolver.<\/p>\n
Updating the base GraphQL files<\/h3>\n
Since we\u2019re in the settings.js<\/code> with the resolver, let\u2019s add a couple more resolvers to handle our front-end requests. The first resolver will get an individual setting based on the setting ID. The second resolver will be used to handle updates to the setting.<\/p>\n
Add the following code after the settings<\/code> resolver in the file.<\/p>\n
export<\/span> const<\/span> setting = (input<\/span>) =><\/span> {\n  return<\/span> db.setting.findFirst({\n    where<\/span>: { id<\/span>: input.id },\n  })\n}\n\nexport<\/span> const<\/span> updateSetting = ({ input }<\/span>) =><\/span> {\n  console<\/span>.log(`This is the input: + ${input.volume}<\/span>`<\/span>)\n  return<\/span> db.setting.update({\n    where<\/span>: { id<\/span>: input.id },\n    data<\/span>: {\n      loop<\/span>: input.loop,\n      videoName<\/span>: input.videoName,\n      controls<\/span>: input.controls,\n      volume<\/span>: input.volume,\n      playbackRate<\/span>: input.playbackRate,\n    },\n  })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Then you\u2019ll need to update the settings.sdl.js<\/code> file to have the matching schema for these new resolvers.<\/p>\n
type Mutation {\n  updateSetting(input: UpdateSettingInput): Setting\n}\n\ntype Query {\n  setting(id: Int): Setting!\n}\n<\/code><\/span><\/pre>\n
You\u2019ll also need to add the id<\/code> field to the UpdateSettingInput<\/code> type so that we\u2019re able to update based on the setting ID.<\/p>\n
input<\/span> UpdateSettingInput<\/span> {\n  id<\/span>: Int\n  videoName: String\n  loop: Boolean\n  volume: Float\n  controls: Boolean\n  playbackRate: Float\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
With the new resolvers and updated GraphQL schema in place, we can finally move on to the front-end.<\/p>\n
Making the UI for the video player<\/h2>\n
This is something else that Redwood handles very well for us. The command we\u2019re about to run will create a new page and add the routing for us. We\u2019re going to make a new home page that displays at the root URL of the app.<\/p>\n
yarn rw g page home \/<\/code><\/p>\n
If you take a look in the web > src > pages<\/code> directory, you\u2019ll see a new HomePage<\/code> directory. This is where the home page we created with the previous command is located. We\u2019re going to make our video player in this file, but if you want to see what the app looks like in the browser now, run:<\/p>\n
yarn rw dev<\/code><\/p>\n
Your page should look similar to this.<\/p>\n
\"Home<\/p>\n
Creating the video player<\/h3>\n
Now we\u2019ll work on the way our custom video player will look to users. It won\u2019t be the fanciest CSS work, but it\u2019ll be usable! You\u2019ll need to install a couple of packages inside the web<\/code> directory. Once you\u2019re in the web<\/code> directory in your terminal, run the following command:<\/p>\n
yarn add styled-components react-player<\/code><\/p>\n
We\u2019ll be using styled-components<\/code> to add some simple styling to the video player and we\u2019re using react-player<\/code> as the video player component. Let\u2019s start by completely updating the Home<\/code> component.<\/p>\n
We\u2019re going to import some Redwood form components to give users custom control over their video player. This is how we\u2019ll be able to save those settings. The form values will be connected to the video player a little later, so we just need the UI in place.<\/p>\n
There will be a couple of styled components to space things a little better on the screen. We\u2019re also importing the video from Cloudinary and we\u2019ll talk about how to set that up in a bit.<\/p>\n
Update your HomePage.js<\/code> file to have the following code.<\/p>\n
import<\/span> {\n  Form,\n  Label,\n  TextField,\n  CheckboxField,\n  RangeField,\n  RadioField,\n  Submit,\n} from<\/span> '@redwoodjs\/forms'<\/span>\nimport<\/span> { useMutation, useQuery } from<\/span> '@redwoodjs\/web'<\/span>\nimport<\/span> styled from<\/span> 'styled-components'<\/span>\nimport<\/span> ReactPlayer from<\/span> 'react-player'<\/span>\n\nconst<\/span> HomePage = ()<\/span> =><\/span> {\n  return<\/span> (\n    <Container<\/span>><\/span>\n      <VideoPlayer<\/span>><\/span>\n        <ReactPlayer<\/span>\n          controls<\/span>={true}<\/span>\n          loop<\/span>={false}<\/span>\n          volume<\/span>={0.5}<\/span>\n          playbackRate<\/span>={1}<\/span>\n          url<\/span>={<\/span>`https:<\/span>\/\/res.cloudinary.com<\/span>\/milecia<\/span>\/video<\/span>\/upload<\/span>\/c_pad<\/span>,h_360<\/span>,w_480<\/span>,q_70<\/span>,du_10<\/span>\/elephant_herd.mp4<\/span>`}\n        ><\/span><\/ReactPlayer<\/span>><\/span>\n      <\/VideoPlayer<\/span>><\/span>\n      <Form<\/span>><\/span>\n        <FormContainer<\/span>><\/span>\n          <Label<\/span> name<\/span>=\"videoName\"<\/span>><\/span>Video Name<\/Label<\/span>><\/span>\n          <TextField<\/span> name<\/span>=\"videoName\"<\/span> \/><\/span>\n          <Label<\/span> name<\/span>=\"loop\"<\/span>><\/span>Loop<\/Label<\/span>><\/span>\n          <CheckboxField<\/span> name<\/span>=\"loop\"<\/span> \/><\/span>\n          <Label<\/span> name<\/span>=\"controls\"<\/span>><\/span>Controls<\/Label<\/span>><\/span>\n          <CheckboxField<\/span> name<\/span>=\"controls\"<\/span> \/><\/span>\n          <Label<\/span> name<\/span>=\"volume\"<\/span>><\/span>Volume<\/Label<\/span>><\/span>\n          <RangeField<\/span> name<\/span>=\"volume\"<\/span> \/><\/span>\n          <Label<\/span> name<\/span>=\"playbackRate\"<\/span>><\/span>1x<\/Label<\/span>><\/span>\n          <RadioField<\/span> name<\/span>=\"playbackRate\"<\/span> value<\/span>={1}<\/span> \/><\/span>\n          <Label<\/span> name<\/span>=\"playbackRate\"<\/span>><\/span>1.5x<\/Label<\/span>><\/span>\n          <RadioField<\/span> name<\/span>=\"playbackRate\"<\/span> value<\/span>={1.5}<\/span> \/><\/span>\n          <Label<\/span> name<\/span>=\"playbackRate\"<\/span>><\/span>2x<\/Label<\/span>><\/span>\n          <RadioField<\/span> name<\/span>=\"playbackRate\"<\/span> value<\/span>={2}<\/span> \/><\/span>\n          <Submit<\/span>><\/span>Save<\/Submit<\/span>><\/span>\n        <\/FormContainer<\/span>><\/span>\n      <\/Form<\/span>><\/span>\n    <\/Container<\/span>><\/span><\/span>\n  )\n}\n\nconst<\/span> Container = styled.div`\n  width: 100%;\n`<\/span>\n\nconst<\/span> FormContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  padding-top: 25px;\n  width: 500px;\n`<\/span>\n\nconst<\/span> VideoPlayer = styled.div`\n  display: block;\n  margin: 0 auto;\n  width: 50%;\n`<\/span>\n\nexport<\/span> default<\/span> HomePage\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
With this code on your home page, you should see something like this in the browser when you run your app.<\/p>\n
\"video<\/p>\n
Adding the GraphQL calls<\/h3>\n
Since there\u2019s a form, we probably need to connect it to the back-end to store and retrieve data for the custom video player. It\u2019s time to add our GraphQL requests on the front-end.<\/p>\n
Inside the HomePage.js<\/code> file, we\u2019re going to add a new import to the others in order to create a query and mutation.<\/p>\n
import { useMutation, useQuery } from '@redwoodjs\/web'<\/code><\/p>\n
Now add the following code inside of the HomePage<\/code> component. This will create the methods for updating and retriving the user settings and create the onSubmit<\/code> method for the form. Since we seeded the database and we\u2019re only working with one user, I\u2019ve hard-coded the setting ID as 1<\/code>. We even do some state handling for when the data is being fetched in the GraphQL query.<\/p>\n
const<\/span> { loading, error, data } = useQuery(SETTING, { variables<\/span>: { id<\/span>: 1<\/span> } })\n\nconst<\/span> [updateSetting] = useMutation(UPDATE_SETTING)\n\nconst<\/span> onSubmit = (data<\/span>) =><\/span> {\n  updateSetting({\n    variables<\/span>: {\n      id<\/span>: 1<\/span>,\n      videoName<\/span>: data.videoName,\n      loop<\/span>: data.loop,\n      controls<\/span>: data.controls,\n      volume<\/span>: Number<\/span>(data.volume),\n      playbackRate<\/span>: Number<\/span>(data.playbackRate),\n    },\n  })\n}\n\nif<\/span> (loading) {\n  return<\/span> <div<\/span>><\/span>Loading..<\/div<\/span>><\/span><\/span>\n}\n\nif<\/span> (error) {\n  return<\/span> <div<\/span>><\/span>{error.message}<\/div<\/span>><\/span><\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we need to add the variables that define the shape of the GraphQL requests we want to execute. We\u2019ll use the GraphQL query language syntax to create these requests and define the data we want to send and return. Right after the HomePage<\/code> component ends, add the following code.<\/p>\n
const<\/span> SETTING = gql`\n  query Setting($id: Int) {\n    setting(id: $id) {\n      id\n      videoName\n      loop\n      controls\n      volume\n      playbackRate\n    }\n  }\n`\n\nconst<\/span> UPDATE_SETTING = gql`\n  mutation UpdateSetting(\n    $id: Int\n    $videoName: String\n    $loop: Boolean\n    $controls: Boolean\n    $volume: Float\n    $playbackRate: Float\n  ) {\n    updateSetting(\n      input: {\n        id: $id\n        videoName: $videoName\n        loop: $loop\n        controls: $controls\n        volume: $volume\n        playbackRate: $playbackRate\n      }\n    ) {\n      id\n      videoName\n      loop\n      controls\n      volume\n      playbackRate\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
The last thing we have to do is update our form to submit the update when we click save and load the values returned from the query. We\u2019re going to update the video URL to use the videoName<\/code> we saved and add defaultValue<\/code> attributes to all of the form fields to show the stored values.<\/p>\n
<VideoPlayer<\/span>><\/span>\n  <ReactPlayer<\/span>><\/span>\n  ...\n  url={`https:\/\/res.cloudinary.com\/milecia\/video\/upload\/c_pad,h_360,w_480,q_70,du_10\/${\n      data.setting.videoName || 'elephant_herd'\n    }.mp4`}\n  ><\/ReactPlayer<\/span>><\/span>\n<\/VideoPlayer<\/span>><\/span>\n<Form<\/span> onSubmit<\/span>={onSubmit}<\/span>><\/span>\n  <FormContainer<\/span>><\/span>\n    <Label<\/span> name<\/span>=\"videoName\"<\/span>><\/span>Video Name<\/Label<\/span>><\/span>\n    <TextField<\/span> name<\/span>=\"videoName\"<\/span> defaultValue<\/span>={data.setting.videoName}<\/span> \/><\/span>\n    <Label<\/span> name<\/span>=\"loop\"<\/span>><\/span>Loop<\/Label<\/span>><\/span>\n    <CheckboxField<\/span> name<\/span>=\"loop\"<\/span> defaultValue<\/span>={data.setting.loop}<\/span> \/><\/span>\n    <Label<\/span> name<\/span>=\"controls\"<\/span>><\/span>Controls<\/Label<\/span>><\/span>\n    <CheckboxField<\/span> name<\/span>=\"controls\"<\/span> defaultValue<\/span>={data.setting.controls}<\/span> \/><\/span>\n    <Label<\/span> name<\/span>=\"volume\"<\/span>><\/span>Volume<\/Label<\/span>><\/span>\n    <RangeField<\/span> name<\/span>=\"volume\"<\/span> defaultValue<\/span>={data.setting.volume}<\/span> \/><\/span>\n    <Label<\/span> name<\/span>=\"playbackRate\"<\/span>><\/span>1x<\/Label<\/span>><\/span>\n    <RadioField<\/span>\n      name<\/span>=\"playbackRate\"<\/span>\n      defaultValue<\/span>={data.setting.playbackRate}<\/span>\n      value<\/span>={1}<\/span>\n    \/><\/span>\n    <Label<\/span> name<\/span>=\"playbackRate\"<\/span>><\/span>1.5x<\/Label<\/span>><\/span>\n    <RadioField<\/span>\n      name<\/span>=\"playbackRate\"<\/span>\n      defaultValue<\/span>={data.setting.playbackRate}<\/span>\n      value<\/span>={1.5}<\/span>\n    \/><\/span>\n    <Label<\/span> name<\/span>=\"playbackRate\"<\/span>><\/span>2x<\/Label<\/span>><\/span>\n    <RadioField<\/span>\n      name<\/span>=\"playbackRate\"<\/span>\n      defaultValue<\/span>={data.setting.playbackRate}<\/span>\n      value<\/span>={2}<\/span>\n    \/><\/span>\n    <Submit<\/span>><\/span>Save<\/Submit<\/span>><\/span>\n  <\/FormContainer<\/span>><\/span>\n<\/Form<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Now you\u2019re able to give your users a custom video experience every time they come to your app! There\u2019s just one more thing we need to do before we can call this finished.<\/p>\n
You need to know how to fetch these videos from Cloudinary.<\/p>\n
Working with Cloudinary<\/h3>\n
The video that\u2019s currently displaying is being loaded from Cloudinary. The string that we\u2019ve been using for the url<\/code> value of the video player is how where this comes in. That string currently looks like this:<\/p>\n
url={`https:\/\/res.cloudinary.com\/milecia\/video\/upload\/c_pad,h_360,w_480,q_70,du_10\/${\n  data.setting.videoName || 'elephant_herd'<\/span>\n}<\/span>.mp4`<\/span>}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This is the URL to a video hosted on Cloudinary, but you\u2019ll want it to point to your account. If you don\u2019t have an account, you can create a free one here<\/a>. After you\u2019ve registered, log in and you\u2019ll be taken to your Dashboard. You can find your cloud name here.<\/p>\n
\"cloud<\/p>\n
The next thing you\u2019ll need to do is go to your Media Library and upload a few videos. The video names are what a user will be able to enter in the form we created.<\/p>\n
\"videos<\/p>\n
In the url<\/code> string, replace milecia<\/code> with your cloud name and replace elephant_herd<\/code> with the name of one of your videos. Now when you run your Redwood app, you\u2019ll see your own video!<\/p>\n
Finished code<\/h2>\n
If you want to take a look at the front-end with this CodesandBox<\/a>.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
If you want the entire project, including the front-end and back-end, check out the custom-video-player<\/code> folder in this repo<\/a>!<\/p>\n
Conclusion<\/h2>\n
Giving your users a good video experience will make them spend more time on your site and lead to fewer support issues. Plus it only takes a little extra time. Once the functionality is there, you just have to decide on how you want it to look.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27919,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[379,134,246,371,303],"class_list":["post-27918","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-graphql","tag-guest-post","tag-react","tag-under-review","tag-video"],"acf":[],"yoast_head":"\nHow To Make A Custom Video Player<\/title>\n<meta name=\"description\" content=\"Making sure your users have a good video experience is important for any media-based product. In this tutorial, we'll create a quick full-stack custom video player using Redwood. We'll set up a Postgres database using Prisma, create a back-end with GraphQL, and finish the front-end with React.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Make A Custom Video Player\" \/>\n<meta property=\"og:description\" content=\"Making sure your users have a good video experience is important for any media-based product. In this tutorial, we'll create a quick full-stack custom video player using Redwood. We'll set up a Postgres database using Prisma, create a back-end with GraphQL, and finish the front-end with React.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-23T22:59:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"4000\" \/>\n\t<meta property=\"og:image:height\" content=\"2800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"How To Make A Custom Video Player\",\"datePublished\":\"2022-03-23T22:59:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA\",\"keywords\":[\"GraphQL\",\"Guest Post\",\"React\",\"Under Review\",\"Video\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/\",\"name\":\"How To Make A Custom Video Player\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA\",\"datePublished\":\"2022-03-23T22:59:46+00:00\",\"description\":\"Making sure your users have a good video experience is important for any media-based product. In this tutorial, we'll create a quick full-stack custom video player using Redwood. We'll set up a Postgres database using Prisma, create a back-end with GraphQL, and finish the front-end with React.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA\",\"width\":4000,\"height\":2800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Make A Custom Video Player\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Make A Custom Video Player","description":"Making sure your users have a good video experience is important for any media-based product. In this tutorial, we'll create a quick full-stack custom video player using Redwood. We'll set up a Postgres database using Prisma, create a back-end with GraphQL, and finish the front-end with React.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/","og_locale":"en_US","og_type":"article","og_title":"How To Make A Custom Video Player","og_description":"Making sure your users have a good video experience is important for any media-based product. In this tutorial, we'll create a quick full-stack custom video player using Redwood. We'll set up a Postgres database using Prisma, create a back-end with GraphQL, and finish the front-end with React.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-23T22:59:46+00:00","og_image":[{"width":4000,"height":2800,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/"},"author":{"name":"","@id":""},"headline":"How To Make A Custom Video Player","datePublished":"2022-03-23T22:59:46+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA","keywords":["GraphQL","Guest Post","React","Under Review","Video"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/","name":"How To Make A Custom Video Player","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA","datePublished":"2022-03-23T22:59:46+00:00","description":"Making sure your users have a good video experience is important for any media-based product. In this tutorial, we'll create a quick full-stack custom video player using Redwood. We'll set up a Postgres database using Prisma, create a back-end with GraphQL, and finish the front-end with React.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA","width":4000,"height":2800},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/how-to-make-a-custom-video-player-in-redwood\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Make A Custom Video Player"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681925891\/Web_Assets\/blog\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b\/8bca3cdba8c5aae7e72e02461a1b5da93c78ca4d-4000x2800-1_2791934a9b.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27918","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27918"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27918\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27919"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27918"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27918"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27918"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}