vue-video-player - npm Package Compare versions

Comparing version 2.3.4 to 2.4.0

index.js

@@ -13,2 +13,3 @@ /**
 var videoPlayerBuild = function(Vue) {
+  // videoPlayer.config()
   Vue.component('video-player', player)
@@ -27,2 +28,3 @@ }
   install: function(Vue) {
+    videoPlayer.config({})
     videoPlayerBuild(Vue)
@@ -29,0 +31,0 @@ }

package.json

 {
   "name": "vue-video-player",
-  "version": "2.3.4",
+  "version": "2.4.0",
   "description": "Video Player component for Vue.js(1.x ~ 2.x)",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -13,2 +13,7 @@ [![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)
 
+
+> ### V2.4.0
+> 重构Example页面，修改获取对象的方式，优化销毁方法，增加自定义事件名称
+
+> ### 之前版本
 - [完善]：配置选项
@@ -41,18 +46,17 @@ - [增加]：配置选项
 import Vue from 'vue'
-...
 import VideoPlayer from 'vue-video-player'
 
-
 // require with Node.js/Webpack
 var Vue = require('vue')
-...
 var VideoPlayer = require('vue-video-player')
 
-// The default is to turn off some of the features, you can choose according to their use of certain features enabled, do not enable the introduction will not require the corresponding file. 默认有些功能是不开启的，比如youtube国内不能用，则默认是关闭的，如果不启用对应的功能，则不会引入对应的包，减少项目代码体积，当然也有可能意味着对应的功能可能会出错，true 是开启，false是关闭，正常情况使用者不需要care就可以。
+// The default is to turn off some of the features, you can choose according to their use of certain features enabled, do not enable the introduction will not require the corresponding file.
+// 默认有些功能是不开启的，比如youtube国内不能用，则默认是关闭的，如果不启用对应的功能，则不会引入对应的包，减少项目代码体积，当然也有可能意味着对应的功能可能会出错，true 是开启，false是关闭，正常情况使用者不需要care就可以。
 
-// Example(Only applies to the current global mode). 用配置项的话仅支持全局模式来配置，否则不会生效
+// You can configure the global function switch (of course, will be covered by local switches), where non-mandatory
+// 可以在这里配置全局的功能开关（当然也会被局部开关给覆盖），这里非必选
 VideoPlayer.config({
-  youtube: true, // default false
-  switcher: false, // default true
-  hls: false // default true
+  youtube: true,  // default false（youtube的支持）
+  switcher: true, // default true（播放源切换功能）
+  hls: true       // default true（直播功能的支持）
 })
@@ -67,3 +71,2 @@
 import Vue from 'vue'
-// ...
 import { videoPlayer } from 'vue-video-player'
@@ -80,16 +83,17 @@
 ``` html
-<!-- Use in component(Vue.js1.X) -->
+<!-- Use in component(Vue.js1.X && Vue.js2.X) -->
 <video-player :options="videoOptions"></video-player>
 
-<!-- Use in component(Vue.js2.X) -->
+<!-- Use in component(Vue.js1.X && Vue.js2.X && function switch config) -->
+<video-player :options="videoOptions" :config="{ youtube: true }"></video-player>
+
+<!-- Use in component(Vue.js2.X) && event callback -->
 <video-player :options="videoOptions" @playerStateChanged="playerStateChanged"></video-player>
 
-<!-- parent component to control the player do something -->
-<button @click="playerAction('play')">Play</button>
-<button @click="playerAction('pause')">Pause</button>
-<button @click="playerAction('refresh')">Refresh</button>
+<!-- Use in component(Vue.js2.X) && custom event name && ref property-->
+<video-player :options="videoOptions" @my-player-state-changed="playerStateChanged" ref="myPlayer"></video-player>
 ```
 
 ``` javascript
-// component config example 1(video)
+// base - player config example
 export default {
@@ -101,3 +105,5 @@ data () {
           type: "video/webm",
-          src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
+          src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
+          // if you need custom player state changed event name, you can config it like this
+          customEventName: 'my-player-state-changed'
         }
@@ -109,4 +115,3 @@ }
 
-
-// component config example 2(video)
+// playbackRates switch and sources switch - player config example
 export default {
@@ -130,4 +135,3 @@ data () {
 
-
-// component config example 3(live)
+// live - player config example
 export default {
@@ -142,5 +146,3 @@ data () {
         },
-        live: true,
-        // IOS微信内置浏览器默认播放不全屏
-        playsinline: true
+        live: true
       }
@@ -151,3 +153,3 @@ }
 
-// component config example 4(youtube)
+// youtube - player config example
 export default {
@@ -171,7 +173,8 @@ data () {
 //-------------------------------------------------------------
+// player state changed callback event
 
-// playerStateChanged callback example(Vue.js1.X)
+// events with Vue.js1.x
 export default {
   events: {
-    'playerStateChanged': function (playerCurrentState) {
+    playerStateChanged(playerCurrentState) {
       console.log(playerCurrentState)
@@ -182,4 +185,3 @@ }
 
-
-// playerStateChanged callback example(Vue.js2.X)
+// methods with Vue.js2.x
 export default {
@@ -194,21 +196,16 @@ methods: {
 //-------------------------------------------------------------
+// get current player object in parent component
 
-// playerAction event example(Vue.js1.X)
 export default {
-  methods: {
-    playerAction: function(action) {
-      this.$broadcast('playerAction', action)
+  computed: {
+    player() {
+      return this.$refs.myPlayer.player
     }
+  },
+  mounted: {
+    console.log('this is current player object', this.player)
+    this.player.pause()
+    // do something...
   }
 }
-
-
-// playerAction event example(Vue.js2.X)
-export default {
-  methods: {
-    playerAction(action) {
-      this.$emit('playerAction', action)
-    }
-  }
-}
 ```
@@ -239,5 +236,5 @@
 | techOrder      | Array        |  player support video type (default: example) | ['html5', 'flash', 'youtube'] |
+| customEventName| String       |  player state changed event name (default: example) | 'playerStateChanged' |
 
 
-
 # Credits
@@ -244,0 +241,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

1119

increased by0.18%

Worsened metrics

Total package byte prevSize

90103

decreased by-0.15%

Number of lines in readme file

242

decreased by-1.22%

No dependency changes