Socket
Socket
Sign inDemoInstall

vue-video-player

Package Overview
Dependencies
47
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 5.0.2 to 6.0.0

index.d.ts
index.js

20

CHANGELOG.md

@@ -0,4 +1,11 @@

# Changelog
## CHANGELOG
All notable changes to this project will be documented in this file.
### v6.0.0 (2022-07-23)
- feat: upgrade Video.js to v7
- feat: refactoring to `pnpm` monorepo
- feat: re-exports [`@videojs-player/vue`](https://github.com/surmon-china/videojs-player/tree/main/packages/vue)
### v5.0.2

@@ -14,10 +21,7 @@

#### use
1. add global default options
2. update the options assign logic
3. Update to [video.js6](https://github.com/videojs/video.js)
#### project
- add brower support
- add bower support
- add test scripts
- add global default options
- update babel and webpack configs
- update the options assign logic
- Update to [video.js6](https://github.com/videojs/video.js)

150

package.json
{
"name": "vue-video-player",
"description": "video.js component for Vue",
"version": "5.0.2",
"description": "Video.js component for Vue",
"version": "6.0.0",
"license": "MIT",
"private": false,
"author": {
"name": "Surmon",
"email": "surmon@foxmail.com",
"url": "https://surmon.me"
},
"bugs": {
"url": "https://github.com/surmon-china/vue-video-player/issues"
},
"homepage": "https://github.com/surmon-china/vue-video-player#readme",
"main": "dist/vue-video-player.js",
"unpkg": "dist/vue-video-player.js",
"jsnext:main": "dist/vue-video-player.js",
"files": [
"dist",
"src"
],
"jspm": {
"main": "dist/vue-video-player.js",
"registry": "npm",
"format": "esm"
},
"repository": {
"type": "git",
"url": "https://github.com/surmon-china/vue-video-player.git"
},
"author": "Surmon",
"keywords": [

@@ -39,103 +14,26 @@ "vue-video-player",

],
"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"
"homepage": "https://github.com/surmon-china/videojs-player",
"repository": {
"type": "git",
"url": "https://github.com/surmon-china/videojs-player.git",
"directory": "legacy"
},
"files": [
"CHANGELOG.md",
"index.d.ts",
"index.js"
],
"type": "module",
"types": "index.d.ts",
"module": "index.js",
"browser": "index.js",
"main": "index.js",
"peerDependencies": {
"@types/video.js": "7.x",
"video.js": "7.x",
"vue": "3.x"
},
"dependencies": {
"object-assign": "^4.1.1",
"video.js": "^6.6.0",
"videojs-contrib-hls": "^5.12.2",
"videojs-flash": "^2.1.0",
"videojs-hotkeys": "^0.2.20"
},
"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"
"@videojs-player/vue": "1.x"
}
}

262

README.md

@@ -1,261 +0,11 @@

[![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)
[![Build Status](https://travis-ci.org/surmon-china/vue-video-player.svg?branch=master)](https://travis-ci.org/surmon-china/vue-video-player)
[![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)
[![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)
[![GitHub last commit](https://img.shields.io/github/last-commit/google/skia.svg?style=flat-square)](https://github.com/surmon-china/vue-video-player)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/surmon-china/vue-video-player)
[![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)
### BREAKING CHANGE ⚠️
[![NPM](https://nodei.co/npm/vue-video-player.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-video-player/)
[![NPM](https://nodei.co/npm-dl/vue-video-player.png?months=9&height=3)](https://nodei.co/npm/vue-video-player/)
The `vue-video-player` package has now been **renamed** to [`@videojs-player/vue`](https://www.npmjs.com/package/@videojs-player/vue) due to the addition of support for React. Also, support for Vue has undergone a Breaking change, with the latest version of the component **only supporting Vue3**.
The last version of the `vue-video-player` package will be released in v6.0, which will just re-export everything from `@videojs-player/vue`, so if you're ready to use the new version of `vue-video-player`, please import `@videojs-player/vue` directly.
# Vue-Video-Player
The latest version of videojs-player supports **responsiveness** for the vast majority of Video.js configuration options and allows you to fully customize the player's control panel and interaction details, thanks to the fact that the component does enough processing internally for different frameworks.
[video.js](https://github.com/videojs/video.js) player component for Vue.
### Legacy Version
适用于 Vue 的 [video.js](https://github.com/videojs/video.js) 播放器组件。
# Example
[Demo Page](https://surmon-china.github.io/vue-video-player)
[CDN Example](https://jsfiddle.net/u69gnx90/)
[nuxt.js/ssr example code](https://github.com/surmon-china/vue-video-player/blob/master/examples/nuxt-ssr-example)
[More Example Code](https://github.com/surmon-china/vue-video-player/tree/master/examples)
# Install
#### CDN
``` html
<link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>
<script type="text/javascript" src="path/to/video.min.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-video-player.js"></script>
<script type="text/javascript">
Vue.use(window.VueVideoPlayer)
</script>
```
#### NPM
``` bash
npm install vue-video-player --save
```
### Mount
#### mount with global
``` javascript
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
// require videojs style
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer, /* {
options: global default options,
events: global videojs events
} */)
```
#### mount with component
```javascript
// require styles
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
components: {
videoPlayer
}
}
```
#### mount with ssr
```javascript
// If used in nuxt.js/ssr, you should keep it only in browser build environment
if (process.browser) {
const VueVideoPlayer = require('vue-video-player/dist/ssr')
Vue.use(VueVideoPlayer)
}
```
#### videojs extend
```javascript
import videojs from 'video.js'
// videojs plugin
const Plugin = videojs.getPlugin('plugin')
class ExamplePlugin extends Plugin {
// something...
}
videojs.registerPlugin('examplePlugin', ExamplePlugin)
// videojs language
videojs.addLanguage('es', {
Pause: 'Pausa',
// something...
})
// more videojs api...
// vue component...
```
### Difference（使用方法的异同）
**SSR and the only difference in the use of the SPA:**
- SPA worked by the `component`, find videojs instance by `ref attribute`.
- SSR worked by the `directive`, find videojs instance by `directive arg`.
- Other configurations, events are the same.
### SPA
``` vue
<template>
<video-player class="video-player-box"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
customEventName="customstatechangedeventname"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
@waiting="onPlayerWaiting($event)"
@playing="onPlayerPlaying($event)"
@loadeddata="onPlayerLoadeddata($event)"
@timeupdate="onPlayerTimeupdate($event)"
@canplay="onPlayerCanplay($event)"
@canplaythrough="onPlayerCanplaythrough($event)"
@statechanged="playerStateChanged($event)"
@ready="playerReadied">
</video-player>
</template>
<script>
// Similarly, you can also introduce the plugin resource pack you want to use within the component
// import 'some-videojs-plugin'
export default {
data() {
return {
playerOptions: {
// videojs options
muted: true,
language: 'en',
playbackRates: [0.7, 1.0, 1.5, 2.0],
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
}],
poster: "/static/images/author.jpg",
}
}
},
mounted() {
console.log('this is current player instance object', this.player)
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
methods: {
// listen event
onPlayerPlay(player) {
// console.log('player play!', player)
},
onPlayerPause(player) {
// console.log('player pause!', player)
},
// ...player event
// or listen state event
playerStateChanged(playerCurrentState) {
// console.log('player current update state', playerCurrentState)
},
// player is ready
playerReadied(player) {
console.log('the player is readied', player)
// you can use it to do something...
// player.[methods]
}
}
}
</script>
```
### SSR
``` vue
<!-- You can custom the "myVideoPlayer" name used to find the videojs instance in current component -->
<template>
<div class="video-player-box"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ready="playerReadied"
@statechanged="playerStateChanged($event)"
v-video-player:myVideoPlayer="playerOptions">
</div>
</template>
<script>
export default {
mounted() {
console.log('this is current videojs instance object', this.myVideoPlayer)
}
// Omit the same parts as in the following component sample code
// ...
}
</script>
```
# Issues
[videojs-contrib-hls - e is not defined](https://github.com/surmon-china/vue-video-player/issues/90)
# API
- component api:
* `events` : `[ Array, default: [] ]` : custom videojs event to component
* `playsinline` : `[ Boolean, default: false ]` : set player not full-screen in mobile device
* `crossOrigin` : `[ String, default: '' ]` : set crossOrigin to video
* `customEventName` : `[ String, default: 'statechanged' ]` : custom the state change event name
- video.js api
* [video.js options](http://docs.videojs.com/tutorial-options.html)
* [video.js docs](http://docs.videojs.com/)
# videojs plugins
- [videojs-resolution-switcher](https://github.com/kmoskwiak/videojs-resolution-switcher)
- [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls)
- [videojs-youtube](https://github.com/videojs/videojs-youtube)
- [videojs-vimeo](https://github.com/videojs/videojs-vimeo)
- [videojs-hotkeys](https://github.com/ctd1500/videojs-hotkeys)
- [videojs-flash](https://github.com/videojs/videojs-flash)
- [videojs-contrib-ads](https://github.com/videojs/videojs-contrib-ads)
- [more plugins...](https://github.com/search?o=desc&q=videojs+plugin&s=stars&type=Repositories&utf8=%E2%9C%93)
# Author
[Surmon](https://surmon.me)
If you are looking for a legacy version of the component for **Vue2**, use the [vue-video-player@4.x](https://github.com/surmon-china/videojs-player/tree/vue-video-player).
dist/ssr.js
dist/vue-video-player.js
LICENSE
src/custom-theme.css
src/index.js
src/player.vue
src/ssr.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc