Tutorial Goals<\/h3>\n\n- Basic project set up and installation<\/li>\n
- Simple demo application with react video player<\/li>\n
- Source code<\/li>\n<\/ul>\n
The video player application is capable of playing videos on this platform:<\/p>\n
\n- Youtube<\/li>\n
- Facebook<\/li>\n
- Vimeo<\/li>\n
- Dailymotion<\/li>\n
- Soundcloud<\/li>\n
- Wistia<\/li>\n
- Twitcoh<\/li>\n
- Mixcloud<\/li>\n<\/ul>\n
Prerequisites<\/h3>\n\n- Basic knowledge of ReactJS<\/u><\/li>\n
- Familiarity with installation dependencies<\/u><\/li>\n
- Familiarity with styling the component and its responsiveness<\/u><\/li>\n<\/ul>\n
Save up to 40% on Development, Maintenance, and Support Cost<\/span>
\nContact Us and hire Reactjs developers<\/a> to Upscale Your Product Development Capabilities<\/strong><\/i><\/p>\nCreating a New ReactJS Project<\/h2>\n
Use the below command to create a new reactJS project.<\/p>\n
yarn create react-app react-video-player<\/pre>\n![\"Creating](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/Creating-a-new-ReactJS-project-min.jpg\")
Creating a new ReactJS project<\/p><\/div>\n\nUse the below command to run the application, just to check whether we have create the project successfully or not.<\/p>\n
cd react-video-player\r\nyarn start<\/pre>\nOnce we execute the above command our application will run successfully. Here\u2019s the default screen you will see.<\/p>\n
![\"application](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/application-will-run-successfully-min.jpg\")
<\/p>\n
Code Cleaning<\/h2>\n
To implement our main functionality using react video player<\/i> we will open App.js file and remove unnecessary code.<\/p>\n\/\/ App.js<\/h3>\n
![\"Code](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/Code-Cleaning-min.jpg\")
<\/p>\n
Install react-player<\/h2>\n
Now for creating a react video player we will at first install react-player package. Use the below command for the same.<\/p>\n
yarn add react-player<\/pre>\n![\"Install](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/Install-react-player-min.jpg\")
<\/p>\n
Let\u2019s Code<\/h2>\n
Import react-player package in App.js.<\/p>\n
import ReactPlayer from 'react-player'<\/pre>\nAfter importing react-player we will make changes in JSX code and for that purpose we will write these lines of code. Your App.js file will look something like this once you are done with adding your code.<\/p>\n
\/\/ App.js<\/h3>\n
![\"App.js\"](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/App.js-min.jpg\")
<\/p>\n
Now our demo application will look as shown below.<\/p>\n
![\"Demo](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/Demo-video-application-min.jpg\")
Demo video application<\/p><\/div>\n
React Video Player Demo App: Set Responsiveness<\/h2>\n
Once done with the basic implementation of react video player, we will now code for the application\u2019s responsiveness. For making application responsive we will remove JSX code and then add new lines of code.<\/p>\n
![\"React](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/React-Video-Player-Demo-App-Set-Responsiveness-min.jpg\")
<\/p>\n
And also import the App.css file. So now our App.js will look like this.<\/p>\n
![\"import](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/import-the-App.css-file-min.jpg\")
<\/p>\n
Open App.css file and clean up previous code. Add these css styles to make application responsive.<\/p>\n
.player-wrapper {\r\n position: relative;\r\n padding-top: 56.25% \/* Player ratio: 100 \/ (1280 \/ 720) *\/\r\n}\r\n\r\n.react-player {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}<\/pre>\nVoila! done with the responsiveness of our react video player demo app! You can see outcome as shown below.<\/p>\n
![\"Set](\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2022\/07\/The-responsiveness-min.jpg\")
<\/p>\n
Github Repository: react-video-player-demo<\/h2>\n
This way we have successfully implemented video player application in React.js. Feel free to clone the github repository: react-video-player-demo<\/a> and start exploring more.<\/p>\nConclusion<\/h2>\n
Since, this was a beginners\u2019 guide we are done with the tutorial here. We will be back with Create React Video Player (Part 2): Intermediate Guide with mode features of previous, next, pause, resume, and many more functionalities. Till then you guys try the beginners\u2019 guide and visit ReactJS tutorials page<\/a> for more such interesting and technical tutorials. We are sure you won\u2019t regret it at all! Use your time and start coding! Don\u2019t forget to write us your feedback and questions. We are building a community to serve tech enthusiasts and to share knowledge with the help of different tutorials, your suggestions will help us be better and do better. <\/p>\n","protected":false},"excerpt":{"rendered":"Introduction Are you wondering how to implement react video player in your application? Do you have a client requirement or want to learn just for yourself? In either case, we are here to help you. Our team is back with a tutorial for beginners: How to create react video player (part 1). You know the […]<\/p>\n","protected":false},"author":151,"featured_media":29077,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[988],"tags":[],"coauthors":[2429],"class_list":["post-29060","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"modified_by":"Chandresh Patel","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/29060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/151"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=29060"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/29060\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/29077"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=29060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=29060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=29060"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=29060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
The video player application is capable of playing videos on this platform:<\/p>\n
- \n
- Youtube<\/li>\n
- Facebook<\/li>\n
- Vimeo<\/li>\n
- Dailymotion<\/li>\n
- Soundcloud<\/li>\n
- Wistia<\/li>\n
- Twitcoh<\/li>\n
- Mixcloud<\/li>\n<\/ul>\n
Prerequisites<\/h3>\n
- \n
- Basic knowledge of ReactJS<\/u><\/li>\n
- Familiarity with installation dependencies<\/u><\/li>\n
- Familiarity with styling the component and its responsiveness<\/u><\/li>\n<\/ul>\n
Save up to 40% on Development, Maintenance, and Support Cost<\/span>
\nContact Us and hire Reactjs developers<\/a> to Upscale Your Product Development Capabilities<\/strong><\/i><\/p>\nCreating a New ReactJS Project<\/h2>\n
Use the below command to create a new reactJS project.<\/p>\n
yarn create react-app react-video-player<\/pre>\n
Creating a new ReactJS project<\/p><\/div>\n
\n Use the below command to run the application, just to check whether we have create the project successfully or not.<\/p>\n
cd react-video-player\r\nyarn start<\/pre>\n
Once we execute the above command our application will run successfully. Here\u2019s the default screen you will see.<\/p>\n
<\/p>\nCode Cleaning<\/h2>\n
To implement our main functionality using react video player<\/i> we will open App.js file and remove unnecessary code.<\/p>\n
\/\/ App.js<\/h3>\n
<\/p>\nInstall react-player<\/h2>\n
Now for creating a react video player we will at first install react-player package. Use the below command for the same.<\/p>\n
yarn add react-player<\/pre>\n
<\/p>\nLet\u2019s Code<\/h2>\n
Import react-player package in App.js.<\/p>\n
import ReactPlayer from 'react-player'<\/pre>\n
After importing react-player we will make changes in JSX code and for that purpose we will write these lines of code. Your App.js file will look something like this once you are done with adding your code.<\/p>\n
\/\/ App.js<\/h3>\n
<\/p>\nNow our demo application will look as shown below.<\/p>\n
Demo video application<\/p><\/div>\n
React Video Player Demo App: Set Responsiveness<\/h2>\n
Once done with the basic implementation of react video player, we will now code for the application\u2019s responsiveness. For making application responsive we will remove JSX code and then add new lines of code.<\/p>\n
<\/p>\nAnd also import the App.css file. So now our App.js will look like this.<\/p>\n
<\/p>\nOpen App.css file and clean up previous code. Add these css styles to make application responsive.<\/p>\n
.player-wrapper {\r\n position: relative;\r\n padding-top: 56.25% \/* Player ratio: 100 \/ (1280 \/ 720) *\/\r\n}\r\n\r\n.react-player {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}<\/pre>\nVoila! done with the responsiveness of our react video player demo app! You can see outcome as shown below.<\/p>\n
<\/p>\nGithub Repository: react-video-player-demo<\/h2>\n
This way we have successfully implemented video player application in React.js. Feel free to clone the github repository: react-video-player-demo<\/a> and start exploring more.<\/p>\n
Conclusion<\/h2>\n
Since, this was a beginners\u2019 guide we are done with the tutorial here. We will be back with Create React Video Player (Part 2): Intermediate Guide with mode features of previous, next, pause, resume, and many more functionalities. Till then you guys try the beginners\u2019 guide and visit ReactJS tutorials page<\/a> for more such interesting and technical tutorials. We are sure you won\u2019t regret it at all! Use your time and start coding! Don\u2019t forget to write us your feedback and questions. We are building a community to serve tech enthusiasts and to share knowledge with the help of different tutorials, your suggestions will help us be better and do better. <\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction Are you wondering how to implement react video player in your application? Do you have a client requirement or want to learn just for yourself? In either case, we are here to help you. Our team is back with a tutorial for beginners: How to create react video player (part 1). You know the […]<\/p>\n","protected":false},"author":151,"featured_media":29077,"comment_status":"open","ping_status":"open","sticky":false,"template":"blog-new-template.php","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[988],"tags":[],"coauthors":[2429],"class_list":["post-29060","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"modified_by":"Chandresh Patel","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/29060","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/151"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=29060"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/29060\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/29077"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=29060"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=29060"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=29060"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=29060"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Familiarity with installation dependencies<\/u><\/li>\n
- Basic knowledge of ReactJS<\/u><\/li>\n