vue-video-player - npm Package Compare versions

Comparing version 4.0.0-rc1 to 4.0.0

index.js

@@ -9,2 +9,3 @@ /**
 window.videojs = require('video.js')
+videojs = videojs.default || videojs
 var playerComponent = require('./src/player.vue')
@@ -11,0 +12,0 @@ playerComponent = playerComponent.default || playerComponent

package.json

 {
   "name": "vue-video-player",
-  "version": "4.0.0-rc1",
+  "version": "4.0.0",
   "description": "Video Player component for Vue",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "cross-env NODE_ENV=production browserify -t vueify -e index.js -x vue -s VueVideoPlayer -o dist/vue-video-player.js -d && uglifyjs dist/vue-video-player.js --source-map -o dist/vue-video-player.min.js"
   },
@@ -32,3 +33,12 @@ "repository": {
     "video.js": "^6.2.4"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.1",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "browserify": "^14.4.0",
+    "cross-env": "^5.0.0",
+    "uglify-js": "^3.0.15",
+    "vueify": "^8.7.0"
   }
 }

README.md

@@ -17,4 +17,2 @@ [![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)
 
-todo: example page && ssr && cdn script.
-
 # Example
@@ -67,2 +65,7 @@ [Demo Page](https://surmon-china.github.io/vue-video-player)
 
+// or require videojs (plugins || langs || ...)
+require('video.js/dist/lang/ba')
+require('videos-some-plugins')
+require('videos...')
+
 // mount with component(can't work in Nuxt.js/SSR)
@@ -119,13 +122,11 @@ import { videoPlayer } from 'vue-video-player'
                  :options="playerOptions"
-                 :start="0"
                  :playsinline="true"
-                 customEventName="customstateevent"
+                 customEventName="customstatechangedeventname"
 
-                 title="you can listen some event if you need"
                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)"
                  @ended="onPlayerEnded($event)"
-                 @loadeddata="onPlayerLoadeddata($event)"
                  @waiting="onPlayerWaiting($event)"
                  @playing="onPlayerPlaying($event)"
+                 @loadeddata="onPlayerLoadeddata($event)"
                  @timeupdate="onPlayerTimeupdate($event)"
@@ -135,6 +136,3 @@ @canplay="onPlayerCanplay($event)"
 
-                 title="or listen state change"
                  @statechanged="playerStateChanged($event)"
-
-                 title="The prepared event will be triggered after the videojs program instance completes, and its callback player object is the videojs callback function in this context"
                  @ready="playerReadied">
@@ -203,3 +201,2 @@ </video-player>
 - component api:
-  * start(number, default: 0): The time at which the player starts playing
   * playsinline(boolean, default: false): set player not full-screen in mobile device
@@ -206,0 +203,0 @@ * customEventName(string, default: 'statechanged'): custom the state change event name

ssr.js

 
-const videojs = window.videojs = require('video.js')
+window.videojs = require('video.js')
+videojs = videojs.default || videojs
 
 var videoPlayer = {
+  videojs: videojs,
   install: function(Vue) {
@@ -17,7 +19,16 @@ Vue.directive('video-player', {
         var _this = vnode.context
-        var customInstanceName = vnode.data.attrs ? vnode.data.attrs.playerInstanceName : binding.arg
+        var attrs = vnode.data.attrs || {}
+        var customInstanceName = attrs.playerInstanceName || binding.arg
         var instanceName = customInstanceName || 'player'
         var options = binding.value || {}
         var player = _this[instanceName]
+        var playsinline = attrs.playsinline || false
+        var customEventName = attrs.customEventName || 'statechanged'
 
+        // playsinline
+        if (playsinline) {
+          el.children[0].setAttribute('playsinline', playsinline)
+          el.children[0].setAttribute('webkit-playsinline', playsinline)
+        }
+
         // initialize
@@ -28,8 +39,2 @@ if (!player) {
           var defaultOptions = {
-
-            // component options
-            start: 0,
-            playsinline: false,
-            customEventName: 'statechanged',
-
             // videojs options
@@ -41,3 +46,3 @@ autoplay: false,
             muted: false,
-            width: '1100',
+            width: '100%',
             height: '360',
@@ -55,3 +60,3 @@ language: 'en',
             },
-            techOrder: ['html5', 'flash'],
+            techOrder: ['html5'],
             playbackRates: []
@@ -87,3 +92,3 @@ }
               values[event] = value
-              eventEmit(vnode, options.customEventName, values)
+              eventEmit(vnode, customEventName, values)
             }
@@ -96,40 +101,17 @@ }
             // player ready
-            emitPlayerState('ready')
+            emitPlayerState('ready');
 
-            this.on('loadeddata', function() {
-              this.muted(options.muted)
-              if (!!options.start) {
-                this.currentTime(options.start)
-              }
-              emitPlayerState('loadeddata', true)
-            })
+            ['loadeddata', 
+             'canplay', 
+             'canplaythrough', 
+             'play', 
+             'pause', 
+             'waiting', 
+             'playing', 
+             'ended'].forEach(event => {
+              this.on(event, function() {
+                emitPlayerState(event, true)
+              })
+            });
 
-            this.on('canplay', function() {
-              emitPlayerState('canplay', true)
-            })
-
-            this.on('canplaythrough', function() {
-              emitPlayerState('canplaythrough', true)
-            })
-
-            this.on('play', function() {
-              emitPlayerState('play', true)
-            })
-
-            this.on('pause', function() {
-              emitPlayerState('pause', true)
-            })
-
-            this.on('waiting', function() {
-              emitPlayerState('waiting', true)
-            })
-
-            this.on('playing', function() {
-              emitPlayerState('playing', true)
-            })
-
-            this.on('ended', function() {
-              emitPlayerState('ended', true)
-            })
-
             this.on('timeupdate', function() {
@@ -136,0 +118,0 @@ emitPlayerState('timeupdate', this.currentTime())

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2447569

increased by2000%

Lines of code

25981

increased by1931.35%

Worsened metrics

Dev dependency count

7

increased byInfinity%

Number of package files

13

decreased by-69.77%

Number of lines in readme file

231

decreased by-1.28%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes