{"_id":"@cementjob/vue-video-player","_rev":"1-bde8b6ebf9f8c38197d47d32dc192a4c","name":"@cementjob/vue-video-player","dist-tags":{"latest":"6.0.0"},"versions":{"6.0.0":{"name":"@cementjob/vue-video-player","description":"video.js component for Vue forked from vue-video-player","version":"6.0.0","license":"MIT","private":false,"author":{"name":"Chad Shryock","email":"chad@cementjob.com","url":"https://cementjob.org"},"bugs":{"url":"https://github.com/cementjob/vue-video-player/issues"},"homepage":"https://github.com/cementjob/vue-video-player#readme","main":"dist/vue-video-player.js","unpkg":"dist/vue-video-player.js","jsnext:main":"dist/vue-video-player.js","jspm":{"main":"dist/vue-video-player.js","registry":"npm","format":"esm"},"repository":{"type":"git","url":"git+https://github.com/cementjob/vue-video-player.git"},"keywords":["vue-video-player","vue video player","video player","vue player","vue video"],"scripts":{"build:spa":"cross-env NODE_ENV=production webpack --config config/build.conf.js","build:ssr":"babel src/ssr.js --out-file dist/ssr.js","build":"npm run build:spa && npm run build:ssr","unit":"cross-env BABEL_ENV=test NODE_ENV=testing karma start test/unit/karma.conf.js --watch","test":"cross-env BABEL_ENV=test NODE_ENV=testing karma start test/unit/karma.conf.js --single-run","lint":"eslint --ext .js,.vue src test/unit/specs","finish":"npm run lint && npm test && npm run build","publish":"git push && git push --tags && npm publish"},"dependencies":{"object-assign":"^4.1.1","video.js":"^7.6.6","videojs-hotkeys":"^0.2.25"},"expDependencies":{"node-sass":"^4.7.2","sass-loader":"^6.0.6","vue-video-player":"^5.0.0"},"devDependencies":{"autoprefixer":"^6.7.2","babel-cli":"^6.23.0","babel-core":"^6.24.1","babel-eslint":"^7.1.1","babel-helper-vue-jsx-merge-props":"^2.0.2","babel-loader":"^6.2.10","babel-plugin-istanbul":"^3.1.2","babel-plugin-syntax-jsx":"^6.13.0","babel-plugin-transform-es2015-destructuring":"^6.23.0","babel-plugin-transform-export-extensions":"^6.8.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-plugin-transform-runtime":"^6.23.0","babel-preset-es2015":"^6.24.1","babel-preset-stage-2":"^6.22.0","babel-register":"^6.0.0","chai":"^3.5.0","chalk":"^1.1.3","connect-history-api-fallback":"^1.1.0","copy-webpack-plugin":"^4.0.0","cross-env":"^5.0.0","cross-spawn":"^5.1.0","css-loader":"^0.25.0","eslint":"^3.14.1","eslint-config-standard":"^6.1.0","eslint-friendly-formatter":"^2.0.5","eslint-loader":"^1.6.1","eslint-plugin-html":"^2.0.0","eslint-plugin-promise":"^3.4.0","eslint-plugin-standard":"^2.0.1","eventsource-polyfill":"^0.9.6","express":"^4.13.3","extract-text-webpack-plugin":"^2.0.0-rc.3","file-loader":"^0.10.0","friendly-errors-webpack-plugin":"^1.1.3","function-bind":"^1.1.0","html-loader":"^0.4.4","html-webpack-plugin":"^2.28.0","http-proxy-middleware":"^0.17.3","inject-loader":"^2.0.1","json-loader":"^0.5.4","jstransformer-markdown-it":"^2.0.0","karma":"^1.4.1","karma-coverage":"^1.1.1","karma-mocha":"^1.3.0","karma-phantomjs-launcher":"^1.0.2","karma-sinon-chai":"^1.2.4","karma-sourcemap-loader":"^0.3.7","karma-spec-reporter":"0.0.26","karma-webpack":"^2.0.2","lolex":"^1.5.2","mocha":"^3.2.0","opn":"^4.0.2","optimize-css-assets-webpack-plugin":"^1.3.0","ora":"^0.3.0","phantomjs-prebuilt":"^2.1.3","raw-loader":"^0.5.1","semver":"^5.3.0","shelljs":"^0.7.4","sinon":"^2.1.0","sinon-chai":"^2.8.0","uglify-js":"^3.0.15","url-loader":"^0.5.7","vue":"^2.5.0","vue-hot-reload-api":"^1.2.0","vue-html-loader":"^1.0.0","vue-loader":"^13.3.0","vue-template-compiler":"^2.5.2","vue-template-es2015-compiler":"^1.6.0","webpack":"^2.2.1","webpack-bundle-analyzer":"^2.2.1","webpack-dev-middleware":"^1.10.0","webpack-hot-middleware":"^2.16.1","webpack-merge":"^2.6.1"},"engines":{"node":">= 4.0.0","npm":">= 3.0.0"},"gitHead":"ad617f5c56bb1aa524f301da7a151e8ea8073334","_id":"@cementjob/vue-video-player@6.0.0","_nodeVersion":"10.15.3","_npmVersion":"6.13.2","dist":{"integrity":"sha512-uMFyjGOY7oNumZa3TYYvA63sDzC5uF2rxmoUTeUnHPa12nm/wsvX2IBGYuN3s4EOxk0xHYRggF1AvQlVwX/POA==","shasum":"0b3aec422a94464aa4ce4638eec9d772a0469001","tarball":"https://registry.npmjs.org/@cementjob/vue-video-player/-/vue-video-player-6.0.0.tgz","fileCount":10,"unpackedSize":42027,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+td1CRA9TVsSAnZWagAAT2MP/0AbHg7pST90nv+OK2EP\nF+nQJX8xzSgxW6E14IKbIS6sWM3hvGYwTLET1D62Rwas9PecxDSGKC8opbme\no0RaBMipLgtHvNqAVub9gGrS0TWf8MQE0iOI76JnMn396Geg0Wsej8qeYUez\naNGYx2HKN4o591A1WCwSxqpiqtiDooaG374SRGdePPN3o31QXAQpZuF0S9sr\nCtDVdEdmHqEW98YRUb8Snog2uhCILeM1iD0+GsdkEy5uwwMrIWzGsQgKzUef\nZ27eNsN1040JY/Bl5sorbrlcX1AyLKcUqs3odMXiIg93Mms6oaujqeXFJxmh\nZEXxmrEO/57VoKr7NvkwFhj1KVNDXWGXaVRX12VH1Fa5pCBEikMOCXs/y9p/\ni+sWJPZBdiAhifD8GgkrtctwrX7n9hh0v8VUhO0bwq8hJf2/y2GDkwqYOKdt\nZLVzRBSzJDj5y7gCMUCcD4XFDMm0dv2NNN0rjA6KT7LpxsJIAujM+OYlN65L\n+GWnQPgy8XHGxMbR95T12GZsdbdFts0cjMdZOEdIhs6ynxa9+lszED1RGkOH\negtDnAsVecE3CdoaFYNArQV8nQvT6DQk8BX9jBznildSEAeXlTwVMeZvR5k/\nTYaVimWulj5cFrM630VxnXitRHwVKjel2bEiZu7F1meNSUihLga/SNCcrV76\nfH8k\r\n=K+WR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm6rC0MxSZHNucTgn9Pa1mCBQLQp+ieBo+OLWyh7y/jwIhAJLubfa5N/jwSmi0zmv+x+L87gzGgIu5/EZ8F/CMKR+k"}]},"maintainers":[{"name":"g3rd","email":"chad@keystone.works"}],"_npmUser":{"name":"g3rd","email":"chad@keystone.works"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-video-player_6.0.0_1576720244643_0.6067035353269037"},"_hasShrinkwrap":false}},"time":{"created":"2019-12-19T01:50:44.313Z","6.0.0":"2019-12-19T01:50:44.873Z","modified":"2022-04-04T22:18:57.153Z"},"maintainers":[{"name":"g3rd","email":"chad@keystone.works"}],"description":"video.js component for Vue forked from vue-video-player","homepage":"https://github.com/cementjob/vue-video-player#readme","keywords":["vue-video-player","vue video player","video player","vue player","vue video"],"repository":{"type":"git","url":"git+https://github.com/cementjob/vue-video-player.git"},"author":{"name":"Chad Shryock","email":"chad@cementjob.com","url":"https://cementjob.org"},"bugs":{"url":"https://github.com/cementjob/vue-video-player/issues"},"license":"MIT","readme":"[![GitHub stars](https://img.shields.io/github/stars/surmon-china/vue-video-player.svg?style=flat-square)](https://github.com/surmon-china/vue-video-player/stargazers)\n[![Build Status](https://travis-ci.org/surmon-china/vue-video-player.svg?branch=master)](https://travis-ci.org/surmon-china/vue-video-player)\n[![GitHub issues](https://img.shields.io/github/issues/surmon-china/vue-video-player.svg?style=flat-square)](https://github.com/surmon-china/vue-video-player/issues)\n[![GitHub forks](https://img.shields.io/github/forks/surmon-china/vue-video-player.svg?style=flat-square)](https://github.com/surmon-china/vue-video-player/network)\n[![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/surmon-china/vue-video-player)\n[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/surmon-china/vue-video-player)\n[![Twitter](https://img.shields.io/twitter/url/https/github.com/surmon-china/vue-video-player.svg?style=flat-square)](https://twitter.com/intent/tweet?url=https://github.com/surmon-china/vue-video-player)\n\n[![NPM](https://nodei.co/npm/vue-video-player.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-video-player/)\n[![NPM](https://nodei.co/npm-dl/vue-video-player.png?months=9&height=3)](https://nodei.co/npm/vue-video-player/)\n\n\n# Vue-Video-Player\n\n[video.js](https://github.com/videojs/video.js) player component for Vue.\n\n适用于 Vue 的 [video.js](https://github.com/videojs/video.js) 播放器组件。\n\n\n# Example\n\n[Demo Page](https://surmon-china.github.io/vue-video-player)\n\n[CDN Example](https://jsfiddle.net/u69gnx90/)\n\n[nuxt.js/ssr example code](https://github.com/surmon-china/vue-video-player/blob/master/examples/nuxt-ssr-example)\n\n[More Example Code](https://github.com/surmon-china/vue-video-player/tree/master/examples)\n\n\n# Install\n\n#### CDN\n\n``` html\n<link rel=\"stylesheet\" href=\"path/to/video.js/dist/video-js.css\"/>\n<script type=\"text/javascript\" src=\"path/to/video.min.js\"></script>\n<script type=\"text/javascript\" src=\"path/to/vue.min.js\"></script>\n<script type=\"text/javascript\" src=\"path/to/dist/vue-video-player.js\"></script>\n<script type=\"text/javascript\">\n  Vue.use(window.VueVideoPlayer)\n</script>\n```\n\n#### NPM\n\n``` bash\nnpm install vue-video-player --save\n```\n\n### Mount\n\n#### mount with global\n\n``` javascript\nimport Vue from 'vue'\nimport VueVideoPlayer from 'vue-video-player'\n\n// require videojs style\nimport 'video.js/dist/video-js.css'\n// import 'vue-video-player/src/custom-theme.css'\n\nVue.use(VueVideoPlayer, /* {\n  options: global default options,\n  events: global videojs events\n} */)\n```\n\n#### mount with component\n\n```javascript\n// require styles\nimport 'video.js/dist/video-js.css'\n\nimport { videoPlayer } from 'vue-video-player'\n\nexport default {\n  components: {\n    videoPlayer\n  }\n}\n```\n\n#### mount with ssr\n\n```javascript\n// If used in nuxt.js/ssr, you should keep it only in browser build environment\nif (process.browser) {\n  const VueVideoPlayer = require('vue-video-player/dist/ssr')\n  Vue.use(VueVideoPlayer)\n}\n```\n\n#### videojs extend\n\n```javascript\nimport videojs from 'video.js'\n\n// videojs plugin\nconst Plugin = videojs.getPlugin('plugin')\nclass ExamplePlugin extends Plugin {\n  // something...\n}\nvideojs.registerPlugin('examplePlugin', ExamplePlugin)\n\n// videojs language\nvideojs.addLanguage('es', {\n  Pause: 'Pausa',\n  // something...\n})\n\n// more videojs api...\n\n// vue component...\n```\n\n\n### Difference（使用方法的异同）\n\n**SSR and the only difference in the use of the SPA:**\n- SPA worked by the `component`, find videojs instance by `ref attribute`.\n- SSR worked by the `directive`, find videojs instance by `directive arg`.\n- Other configurations, events are the same.\n\n\n### SPA\n\n``` vue\n<template>\n  <video-player  class=\"video-player-box\"\n                 ref=\"videoPlayer\"\n                 :options=\"playerOptions\"\n                 :playsinline=\"true\"\n                 customEventName=\"customstatechangedeventname\"\n\n                 @play=\"onPlayerPlay($event)\"\n                 @pause=\"onPlayerPause($event)\"\n                 @ended=\"onPlayerEnded($event)\"\n                 @waiting=\"onPlayerWaiting($event)\"\n                 @playing=\"onPlayerPlaying($event)\"\n                 @loadeddata=\"onPlayerLoadeddata($event)\"\n                 @timeupdate=\"onPlayerTimeupdate($event)\"\n                 @canplay=\"onPlayerCanplay($event)\"\n                 @canplaythrough=\"onPlayerCanplaythrough($event)\"\n\n                 @statechanged=\"playerStateChanged($event)\"\n                 @ready=\"playerReadied\">\n  </video-player>\n</template>\n\n<script>\n  // Similarly, you can also introduce the plugin resource pack you want to use within the component\n  // import 'some-videojs-plugin'\n  export default {\n    data() {\n      return {\n        playerOptions: {\n          // videojs options\n          muted: true,\n          language: 'en',\n          playbackRates: [0.7, 1.0, 1.5, 2.0],\n          sources: [{\n            type: \"video/mp4\",\n            src: \"https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm\"\n          }],\n          poster: \"/static/images/author.jpg\",\n        }\n      }\n    },\n    mounted() {\n      console.log('this is current player instance object', this.player)\n    },\n    computed: {\n      player() {\n        return this.$refs.videoPlayer.player\n      }\n    },\n    methods: {\n      // listen event\n      onPlayerPlay(player) {\n        // console.log('player play!', player)\n      },\n      onPlayerPause(player) {\n        // console.log('player pause!', player)\n      },\n      // ...player event\n\n      // or listen state event\n      playerStateChanged(playerCurrentState) {\n        // console.log('player current update state', playerCurrentState)\n      },\n\n      // player is ready\n      playerReadied(player) {\n        console.log('the player is readied', player)\n        // you can use it to do something...\n        // player.[methods]\n      }\n    }\n  }\n</script>\n```\n\n\n### SSR\n\n``` vue\n<!-- You can custom the \"myVideoPlayer\" name used to find the videojs instance in current component -->\n<template>\n  <div class=\"video-player-box\" \n       @play=\"onPlayerPlay($event)\"\n       @pause=\"onPlayerPause($event)\"\n       @ready=\"playerReadied\"\n       @statechanged=\"playerStateChanged($event)\"\n       v-video-player:myVideoPlayer=\"playerOptions\">\n  </div>\n</template>\n\n<script>\n  export default {\n    mounted() {\n      console.log('this is current videojs instance object', this.myVideoPlayer)\n    }\n    // Omit the same parts as in the following component sample code\n    // ...\n  }\n</script>\n```\n\n\n# Issues\n\n[videojs-contrib-hls - e is not defined](https://github.com/surmon-china/vue-video-player/issues/90)\n\n\n# API\n- component api:\n  * `events` : `[ Array, default: [] ]` : custom videojs event to component\n  * `playsinline` : `[ Boolean, default: false ]` : set player not full-screen in mobile device\n  * `crossOrigin` : `[ String, default: '' ]` : set crossOrigin to video\n  * `customEventName` : `[ String, default: 'statechanged' ]` : custom the state change event name\n\n- video.js api\n  * [video.js options](http://docs.videojs.com/tutorial-options.html)\n  * [video.js docs](http://docs.videojs.com/)\n\n\n# videojs plugins\n\n- [videojs-resolution-switcher](https://github.com/kmoskwiak/videojs-resolution-switcher)\n- [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls)\n- [videojs-youtube](https://github.com/videojs/videojs-youtube)\n- [videojs-vimeo](https://github.com/videojs/videojs-vimeo)\n- [videojs-hotkeys](https://github.com/ctd1500/videojs-hotkeys)\n- [videojs-flash](https://github.com/videojs/videojs-flash)\n- [videojs-contrib-ads](https://github.com/videojs/videojs-contrib-ads)\n- [more plugins...](https://github.com/search?o=desc&q=videojs+plugin&s=stars&type=Repositories&utf8=%E2%9C%93)\n\n\n# Author\n[Surmon](https://surmon.me)\n","readmeFilename":"README.md"}