{"_id":"@cybergab/gab-react-video-js-player","_rev":"3-2470c1bed8351a82088b22b50f781aef","name":"@cybergab/gab-react-video-js-player","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@cybergab/gab-react-video-js-player","version":"1.0.0","description":"React wrapper for VideoJS","homepage":"https://github.com/CyberGab/gab-react-video-js-player#readme","repository":{"type":"git","url":"git+https://github.com/CyberGab/gab-react-video-js-player.git"},"main":"build/index.js","scripts":{"start":"webpack --watch --mode development","build":"webpack --mode production"},"keywords":["react-video-js-player","react","videojs"],"author":{"name":"CyberGab"},"license":"ISC","peerDependencies":{"react":"^16.6.3"},"dependencies":{"prop-types":"^15.6.2","react":"^16.6.3","webpack":"^4.26.1","video.js":"^7.4.1"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.0","babel-loader":"^8.0.4","babel-plugin-transform-object-rest-spread":"^7.0.0-beta.3","babel-plugin-transform-react-jsx":"^6.24.1","css-loader":"^1.0.0","file-loader":"^2.0.0","image-webpack-loader":"^4.5.0","node-sass":"^4.9.4","sass-loader":"^7.1.0","style-loader":"^0.23.1","url-loader":"^1.1.2","webpack-cli":"^3.1.2"},"bugs":{"url":"https://github.com/CyberGab/gab-react-video-js-player/issues"},"directories":{"doc":"docs"},"gitHead":"c0421fdb42ed4af7505891c979f1f67cc120d8e5","_id":"@cybergab/gab-react-video-js-player@1.0.0","_nodeVersion":"12.16.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-mP/3ZYI5xgGd1dE0aMEcDYxNChiUzlsfJ2Ra4Ed4l6zZ3DG60DFcjsaPqJ2qXCO7DJjHufhUBEO9oy+9tywXtA==","shasum":"3606db2b510c28fb169f61e9a6297062750a0f20","tarball":"https://registry.npmjs.org/@cybergab/gab-react-video-js-player/-/gab-react-video-js-player-1.0.0.tgz","fileCount":9,"unpackedSize":1263992,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe45WRCRA9TVsSAnZWagAAZLwP+wWoCxGjxuVO7qjhB/wD\nZhHB2hf4xtOv/xf44tSikPXyU2xXtTpnRQsRKfzpwOuTsmmtwLSFw4AsswrB\n6I0uwRy92lgin9F35VrlkOV9TwtQLlcwKgqJt6nZHbv0Ub8H2/Dlf4hW+L3c\nsdB9HdQ2PA3U6xLAkDvcPI+nk4DgkbNuaVZRsAHMCYRHILatmFIpPxCKDG2I\nO/Q13hDW+YxcvbX10EWZG6K4TYdYQj28DtbcU39nQ66PNBPr+KY5ccU0stYk\nMq8rNK8xxR1e6fzDuq4nzxLGmZHKr2rPJj1/BWr2zUEmJdJhVneUMTef0Jne\nDrMNkPthpjtfa/O8Db3SiE0Ge2EElgZSfQKuQoEKOdgoIhHp7UoSplaMYtaX\nNSgPF2OXikMNUCIg6qQGGmjh6AkcahRprBCUB2kdflnxND9vPfLAnCU9+RpJ\nNoRB9URsr/89ydG7t+pmrJ5PUCI5s7t0RfHUWaxEus61ccpNo7CW+fcreNdY\nW/ZD5KrlD10XVGiZ/vaW8nSwHE73R481YnsTjx7GGEqG55xOIFDkiAjGmcVF\neXySmFNuBHzm9OO5VJTD0runRb7uVfosxN9MHf/9/OQ6OVzto3J1bfzYwJnh\n+KE4hSYFHcMM7K/BuNrmW2Q40BrR0AoaFY3Qz5qljx7OPegadxT1q7+Epji1\nt9c4\r\n=uY4Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtvkwhiY2Os5c7iufVyGay3OXNlGuub9v2KnYUxP+XKQIhAP6pK9fnkCHRQG8T0x1eoY4rnTAAs1johW4lGgmFxRRV"}]},"maintainers":[{"name":"cybergab","email":"cybergab@hotmail.com"}],"_npmUser":{"name":"cybergab","email":"cybergab@hotmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gab-react-video-js-player_1.0.0_1591973264847_0.21695463386474678"},"_hasShrinkwrap":false},"1.0.1":{"name":"@cybergab/gab-react-video-js-player","version":"1.0.1","description":"React wrapper for VideoJS","homepage":"https://github.com/CyberGab/gab-react-video-js-player#readme","repository":{"type":"git","url":"git+https://github.com/CyberGab/gab-react-video-js-player.git"},"main":"build/index.js","scripts":{"start":"webpack --watch --mode development","build":"webpack --mode production"},"keywords":["react-video-js-player","react","videojs"],"author":{"name":"CyberGab"},"license":"ISC","peerDependencies":{"react":"^16.6.3"},"dependencies":{"prop-types":"^15.6.2","react":"^16.6.3","webpack":"^4.26.1","video.js":"^7.4.1"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.0","babel-loader":"^8.0.4","babel-plugin-transform-object-rest-spread":"^7.0.0-beta.3","babel-plugin-transform-react-jsx":"^6.24.1","css-loader":"^1.0.0","file-loader":"^2.0.0","image-webpack-loader":"^4.5.0","node-sass":"^4.9.4","sass-loader":"^7.1.0","style-loader":"^0.23.1","url-loader":"^1.1.2","webpack-cli":"^3.1.2"},"bugs":{"url":"https://github.com/CyberGab/gab-react-video-js-player/issues"},"directories":{"doc":"docs"},"gitHead":"d39b2a87f2bc13efbc45b72ad7abbff0dc796499","_id":"@cybergab/gab-react-video-js-player@1.0.1","_nodeVersion":"12.16.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-vxtHsWYTzyLRjya+PMkWRP1t9eELImzJ2DeRwU68w7xLdNZfkNWkg5e7j4V1ROQdBy2CwQHyFCfQpGOSh965hw==","shasum":"8df8a4a79b89525c2af4c1dcd9a9fdbaa36b710c","tarball":"https://registry.npmjs.org/@cybergab/gab-react-video-js-player/-/gab-react-video-js-player-1.0.1.tgz","fileCount":9,"unpackedSize":1263996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe45aXCRA9TVsSAnZWagAAD0wQAIWcp2uOojff4RQs510k\nPzccoxoHE8wRNK9jUBJeQWY0IHB43kpgnbczaw05d1ECt/P7TK0EdlCRZnsC\nLwPj7j3FGGANFOfYcOc5B9Bfg7VJ2/LDbVp4jDZs4rlnh2TAgkc4XN8Pz40R\nqvfQdQbZi6PcNi6dwZnAXCREMMPf6ozQHorGepipsa5j4kStz3tDd2DYxbIK\n2tu1vwW2KOi1J5tiBuUSaN7guG4C9mbU28ehmuCCQ/C+w5yCJ6OfB2s5EHiz\nDN3Q752DRloHc/3U6DthwX+i1ZBt8ZOn43XfYsvFZspwlAAc1vn5/kNpx8dy\nriIh1abXmRpYzC9A2m049cv022LZSTxyNpxvN5mkvEiWGxZLKCJt/X2Fscjl\n7s9R+eH8nS5nHFAoES0znYWXZhLWUGrb+hhEy4/IaGtc63dsz38lY1NCCzLY\nFYHm12nEqyJkSp/tsVjQBHklIxfUOvfFvzXWfRRdIR3ofN9U1Y4uumEm2Xwa\npTfzUMgvn95FJ5tna0A7ruPAyC27fcEXpDX3MoIZB1xm/1gom3bjsU9Hmizd\ni8tWv36XLmBPE8FqKqSr9WbXjR+L7WyjzMNKRLWhfwxqGayul993Bo2ixdM5\nQRcKDrXVs6muPw8LL3vCQWAOcE7r5jTkGnKVEn1NaPN8zhkyzhfNYhVwasAx\nrVG4\r\n=n1Fk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBAt8jNtIs8rM9WR9038C9JgyvwYVRvc6aRQOt/ZZ8YFAiEAmn2nUBRVefTs2UBM9QNzj3mY3+tiPstLKq/dxzXRCLw="}]},"maintainers":[{"name":"cybergab","email":"cybergab@hotmail.com"}],"_npmUser":{"name":"cybergab","email":"cybergab@hotmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gab-react-video-js-player_1.0.1_1591973526756_0.6511754611830329"},"_hasShrinkwrap":false},"1.0.2":{"name":"@cybergab/gab-react-video-js-player","version":"1.0.2","description":"React wrapper for VideoJS","homepage":"https://github.com/CyberGab/gab-react-video-js-player#readme","repository":{"type":"git","url":"git+https://github.com/CyberGab/gab-react-video-js-player.git"},"main":"build/index.js","scripts":{"start":"webpack --watch --mode development","build":"webpack --mode production"},"keywords":["react-video-js-player","react","videojs"],"author":{"name":"CyberGab"},"license":"ISC","peerDependencies":{"react":"^16.6.3"},"dependencies":{"prop-types":"^15.6.2","react":"^16.6.3","webpack":"^4.26.1","video.js":"^7.4.1"},"devDependencies":{"@babel/core":"^7.1.2","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.0","babel-loader":"^8.0.4","babel-plugin-transform-object-rest-spread":"^7.0.0-beta.3","babel-plugin-transform-react-jsx":"^6.24.1","css-loader":"^1.0.0","file-loader":"^2.0.0","image-webpack-loader":"^4.5.0","node-sass":"^4.9.4","sass-loader":"^7.1.0","style-loader":"^0.23.1","url-loader":"^1.1.2","webpack-cli":"^3.1.2"},"bugs":{"url":"https://github.com/CyberGab/gab-react-video-js-player/issues"},"directories":{"doc":"docs"},"gitHead":"e532b6a9737404987661b804b2086e6e1ccb5dd5","_id":"@cybergab/gab-react-video-js-player@1.0.2","_nodeVersion":"12.16.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-m2h7Pfv/Pqz0tnu7zS+4wpO26doDPmaBEkk2nXhbvtlahAnaRw/xxRA2sWza8Jfr7fgoffHmQ79pps6TW51cAQ==","shasum":"0fb70e74174cd86e1347baaf72f088a6dc4d067b","tarball":"https://registry.npmjs.org/@cybergab/gab-react-video-js-player/-/gab-react-video-js-player-1.0.2.tgz","fileCount":9,"unpackedSize":1264030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe46HJCRA9TVsSAnZWagAACCEP/0ap6SxDkJgzTap/7+CY\nky4GakueKaFcdOHZkp01LOPMdij1sh2HLCz8d4vcPbJyCmnx5uxjVVbnmhEv\n/9YHtX9Ns2/MsV4pmaTKgJ3XAdIQBPRCWDlaN96tc2fJBFiOa/gkK2PFUWEh\nF288AYNFL3pbbNYi4CDvP4jhaGSzRD47aR3Bjwd0EaNLEwU7qotDCRkBEkD0\nAfUY8fAp7Wecz+T0rxr/OJlilom6qfzny5qCYbr7TwKkzFUx+MrwNmL7QqGK\nSzt7yz+o95/D60CIaMkJZkWFu/o4QAKA9OpihuarAO+Y+AbIpIkZAQvn++gq\nXQTQ+MAFaibtdGxorzPtiCuYZnvWWARyQjhz0cXqOsIxWWG7parXQtOrmI+D\nQuGZuuHVfMnu72c7IJDdhWCLy/3RZD221/VI79eTTbTWeCCV5E1zkBNm97ss\nbW529U3sVM0203kuNF0l6J5+d/JSJ6Gp2QBmMv53PuVYN+sQK+H3Ca+Tmtor\nBsAsAsaXSBIrNmV47h8judGiWJVSs63a/3YI2waYX0kikH2do9CNg9jWUO9C\nop/IzWCPT62wF7cZuPQgZS6tNogOSNBlu5ggb5unTyQOM3ys0A3QbFrTxlHR\n3zSI5YkIGA2kJG4+Zi+D6L/OQKOFRCI9GU5+04g4C4ZDnFUOWR3iolsslhKU\npt+G\r\n=LvJM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBgRg2N8U4jrwKdRnyYU3a4o4puFzK8O+qE2lZtnXtMgAiAbFIrY3P9HEtOzZRaqnzdH4ZuIEu6kPegrGJ1o6j0yiA=="}]},"maintainers":[{"name":"cybergab","email":"cybergab@hotmail.com"}],"_npmUser":{"name":"cybergab","email":"cybergab@hotmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/gab-react-video-js-player_1.0.2_1591976392602_0.41083943949391366"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-12T14:47:44.806Z","1.0.0":"2020-06-12T14:47:44.971Z","modified":"2022-04-05T02:25:21.371Z","1.0.1":"2020-06-12T14:52:06.951Z","1.0.2":"2020-06-12T15:39:52.793Z"},"maintainers":[{"name":"cybergab","email":"cybergab@hotmail.com"}],"description":"React wrapper for VideoJS","homepage":"https://github.com/CyberGab/gab-react-video-js-player#readme","keywords":["react-video-js-player","react","videojs"],"repository":{"type":"git","url":"git+https://github.com/CyberGab/gab-react-video-js-player.git"},"author":{"name":"CyberGab"},"bugs":{"url":"https://github.com/CyberGab/gab-react-video-js-player/issues"},"license":"ISC","readme":"# @cybergab/gab-react-video-js-player\nReact wrapper for VideoJS. [Live Demo](https://karan101292.github.io/react-video-js-player/)\n\n## Install\n```\nnpm install --save @cybergab/gab-react-video-js-player\n```\n\n## Usage\n```javascript\nimport React, { Component } from 'react';\nimport VideoPlayer from '@cybergab/gab-react-video-js-player';\n\nclass VideoApp extends Component {\n player = {}\n state = {\n video: {\n src: \"http://www.example.com/path/to/video.mp4\",\n poster: \"http://www.example.com/path/to/video_poster.jpg\"\n }\n }\n\n onPlayerReady(player){\n console.log(\"Player is ready: \", player);\n this.player = player;\n }\n\n onVideoPlay(duration){\n console.log(\"Video played at: \", duration);\n }\n\n onVideoPause(duration){\n console.log(\"Video paused at: \", duration);\n }\n\n onVideoTimeUpdate(duration){\n console.log(\"Time updated: \", duration);\n }\n\n onVideoSeeking(duration){\n console.log(\"Video seeking: \", duration);\n }\n\n onVideoSeeked(from, to){\n console.log(`Video seeked from ${from} to ${to}`);\n }\n\n onVideoEnd(){\n console.log(\"Video ended\");\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\nexport default VideoApp;\n```\n\n### VideoJS APIs support:\n> onReady will return videojs instance. Which means you can use all the APIs provided by VideoJS.
[List of VideoJS APIs](https://docs.videojs.com/docs/api/player.html)\n\n### VideoJS plugins support:\n> Since most of the VideoJS plugins needs videojs instance to get initialized, it is very easy to integrate any of the available plugins by making use of videojs instance returnd by onReady event.
[List of VideoJS plugins](https://videojs.com/plugins/) \n\n### Available Props:\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Prop NameProp TypeDefault ValueDescription
srcstring\"\"Video file path
posterstring\"\"Video poster file path
widthstring | numberautoVideo player width
heightstring | numberautoVideo player height
controlsbooleantrueVideo player control bar toggle
autoplaybooleanfalseVideo will start playing automatically if true
loopbooleanfalseVideo play loop
preloadstringautovideo tag preload attribute
playbackRatesarray[0.5, 1, 1.5, 2]Video speed control
hideControlsarray[]List of controls to hide. ['play','volume','seekbar','timer','playbackrates','fullscreen']
bigPlayButtonbooleantrueBig play button visibility toggle
bigPlayButtonCenteredbooleantrueBig play button center position toggle
classNamestring\"\"Video player wrapper class. It can be used for custom player skin.
\n\n### Video tracking props:\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
Method NameDescription
onReadyIt will fire when video player is ready to be used. It returns videojs instance.
onPlayIt will fire when video starts playing anytime. It returns current time of the video
onPauseIt will fire when video is paused. It returns current time of the video
onTimeUpdateIt keeps firing while video is in playing state. It returns current time of the video
onSeekingIt will fire when video is being seeked using seekbar. It returns current time of the video
onSeekedIt will fire after seeking is done. It returns seek start time and seek end time for the video.
onEndIt will fire when video is finished playing.
\n","readmeFilename":"README.md"}