├── .gitattributes ├── .babelrc ├── .gitignore ├── .editorconfig ├── src ├── index.js └── Playback.js ├── LICENSE ├── package.json ├── README.md └── webpack.config.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.js linguist-language=vue 2 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | npm-debug.log 4 | yarn-error.log 5 | 6 | # Editor directories and files 7 | .idea 8 | *.suo 9 | *.ntvs* 10 | *.njsproj 11 | *.sln 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import video from './Playback'; 2 | 3 | const Plugin = { 4 | install(Vue, options = {}){ 5 | if(Object.keys(options).length){ 6 | if(typeof(options.language) === 'string') video.props.language.default = options.language; 7 | if(typeof(options.loop) === 'boolean') video.props.loop.default = options.loop; 8 | if(typeof(options.autoPlay) === 'boolean') video.props.autoPlay.default = options.autoPlay; 9 | } 10 | Vue.component(video.name, video); 11 | } 12 | }; 13 | 14 | export default Plugin; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Terry Zeng 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "v-playback", 3 | "description": "A Vue2 plugin to make video play easier", 4 | "version": "1.0.2", 5 | "author": "TerryZ ", 6 | "license": "MIT", 7 | "main": "dist/v-playback.js", 8 | "scripts": { 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 11 | }, 12 | "dependencies": { 13 | "video.js": "^7.0.3", 14 | "vue": "^2.6.10" 15 | }, 16 | "keywords": [ 17 | "front-end", 18 | "javascript", 19 | "web", 20 | "vue", 21 | "vuejs", 22 | "video", 23 | "video.js", 24 | "player" 25 | ], 26 | "browserslist": [ 27 | "> 1%", 28 | "last 2 versions", 29 | "not ie <= 8" 30 | ], 31 | "devDependencies": { 32 | "babel-core": "^6.26.0", 33 | "babel-loader": "^7.1.2", 34 | "babel-preset-env": "^1.6.0", 35 | "babel-preset-stage-3": "^6.24.1", 36 | "cross-env": "^5.0.5", 37 | "css-loader": "^0.28.7", 38 | "file-loader": "^1.1.4", 39 | "imports-loader": "^0.8.0", 40 | "node-sass": "^4.5.3", 41 | "sass-loader": "^6.0.6", 42 | "vue-loader": "^13.0.5", 43 | "vue-template-compiler": "^2.6.10", 44 | "webpack": "^3.6.0", 45 | "webpack-dev-server": "^2.9.1" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

v-playback

4 | 5 |
6 | 7 |

8 | 9 | 10 | 11 |

12 | 13 |

v-playback

14 | 15 |

16 | A Vue2 plugin to make video play easier 17 |

18 | 19 |

20 | 21 |

22 | 23 |




24 | 25 | ## Examples、Documentation and Changelog 26 | 27 | Explorer on 28 | 29 | - [English site](https://terryz.github.io/vue/#/playback) 30 | - [国内站点](https://terryz.gitee.io/vue/#/playback) 31 | 32 | ## Installation 33 | 34 | ``` 35 | npm i -S v-playback 36 | ``` 37 | 38 | Include plugin in your `main.js` file. 39 | 40 | ```js 41 | import Vue from 'vue' 42 | import PlayBack from 'v-playback' 43 | Vue.use(PlayBack) 44 | ``` 45 | 46 | ## Deploy on component 47 | 48 | ```vue 49 | 52 | 53 | 62 | ``` 63 | 64 | ## Dependencies 65 | 66 | [video.js](https://github.com/videojs/video.js) 67 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/index.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: 'dist/', 9 | filename: 'v-playback.js', 10 | library: 'vPlayBack', 11 | libraryTarget: 'umd', 12 | umdNamedDefine: true 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.css$/, 18 | use: [ 19 | 'vue-style-loader', 20 | 'css-loader' 21 | ], 22 | }, 23 | { 24 | test: /\.scss$/, 25 | use: [ 26 | 'vue-style-loader', 27 | 'css-loader', 28 | 'sass-loader' 29 | ], 30 | }, 31 | { 32 | test: /\.sass$/, 33 | use: [ 34 | 'vue-style-loader', 35 | 'css-loader', 36 | 'sass-loader?indentedSyntax' 37 | ], 38 | }, 39 | { 40 | test: /\.vue$/, 41 | loader: 'vue-loader', 42 | options: { 43 | loaders: { 44 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 45 | // the "scss" and "sass" values for the lang attribute to the right configs here. 46 | // other preprocessors should work out of the box, no loader config like this necessary. 47 | 'scss': [ 48 | 'vue-style-loader', 49 | 'css-loader', 50 | 'sass-loader' 51 | ], 52 | 'sass': [ 53 | 'vue-style-loader', 54 | 'css-loader', 55 | 'sass-loader?indentedSyntax' 56 | ] 57 | } 58 | // other vue-loader options go here 59 | } 60 | }, 61 | { 62 | test: /\.js$/, 63 | loader: 'babel-loader', 64 | exclude: /node_modules/ 65 | }, 66 | { 67 | test: /\.(png|jpg|gif|svg)$/, 68 | loader: 'file-loader', 69 | options: { 70 | name: '[name].[ext]?[hash]' 71 | } 72 | } 73 | ] 74 | }, 75 | resolve: { 76 | alias: { 77 | 'vue$': 'vue/dist/vue.esm.js' 78 | }, 79 | extensions: ['*', '.js', '.vue', '.json'] 80 | }, 81 | devServer: { 82 | historyApiFallback: true, 83 | noInfo: true, 84 | overlay: true 85 | }, 86 | performance: { 87 | hints: false 88 | }, 89 | devtool: '#eval-source-map' 90 | } 91 | 92 | if (process.env.NODE_ENV === 'production') { 93 | module.exports.devtool = '#source-map' 94 | // http://vue-loader.vuejs.org/en/workflow/production.html 95 | module.exports.plugins = (module.exports.plugins || []).concat([ 96 | new webpack.DefinePlugin({ 97 | 'process.env': { 98 | NODE_ENV: '"production"' 99 | } 100 | }), 101 | new webpack.optimize.UglifyJsPlugin({ 102 | sourceMap: true, 103 | compress: { 104 | warnings: false 105 | } 106 | }), 107 | new webpack.LoaderOptionsPlugin({ 108 | minimize: true 109 | }) 110 | ]) 111 | } 112 | -------------------------------------------------------------------------------- /src/Playback.js: -------------------------------------------------------------------------------- 1 | import videojs from 'video.js'; 2 | // user imports-loader 3 | //import 'imports-loader?videojs=video.js!video.js/dist/lang/zh-CN'; 4 | import 'video.js/dist/video-js.css'; 5 | export default { 6 | name: "v-playback", 7 | render(h){ 8 | if(this.url){ 9 | return h('video',{ 10 | attrs:{ 11 | 'id':'videoPlayerContainer', 12 | 'data-setup':'{}' 13 | }, 14 | class:'video-js vjs-default-skin vjs-big-play-centered vjs-16-9' 15 | },[ 16 | h('source',{ 17 | attrs:{ 18 | src: this.url, 19 | type: 'video/mp4' 20 | } 21 | }) 22 | ]); 23 | } 24 | }, 25 | props: { 26 | url: { 27 | type: String, 28 | required: true 29 | }, 30 | language: { 31 | type: String, 32 | default: 'zh-CN' 33 | }, 34 | loop: { 35 | type: Boolean, 36 | default: false 37 | }, 38 | /** 39 | * autoplay 40 | * play - autoplay start 41 | * muted - autoplay with muted 42 | */ 43 | autoPlay: { 44 | type: [Boolean, String], 45 | default: false 46 | }, 47 | poster: String 48 | }, 49 | data(){ 50 | return { 51 | options: { 52 | fluid: true, 53 | techOrder: ["html5"], 54 | controls: true, 55 | loop: this.loop, 56 | autoplay: 'play', 57 | preload: 'auto', 58 | language: this.language 59 | } 60 | }; 61 | }, 62 | watch: { 63 | url(val){ 64 | this.play(); 65 | } 66 | }, 67 | methods: { 68 | getPlayer(){ 69 | let that = this; 70 | videojs('videoPlayerContainer', this.options, function(){ 71 | this.on('play',function(){ 72 | that.$emit('play', this); 73 | }); 74 | this.on('pause',function(){ 75 | that.$emit('pause', this); 76 | }); 77 | this.on('ended',function(){ 78 | that.$emit('end', this); 79 | }); 80 | }); 81 | }, 82 | play(){ 83 | this.$nextTick(()=>{ 84 | if(this.url) this.getPlayer(); 85 | }); 86 | } 87 | }, 88 | beforeMount(){ 89 | if(this.poster) this.options.poster = this.poster; 90 | }, 91 | mounted(){ 92 | try{ 93 | //load custom language data 94 | //require(`imports-loader?videojs=video.js!video.js/dist/lang/${this.language}`) 95 | /* eslint-disable */ 96 | }catch (e) {} 97 | 98 | this.play(); 99 | }, 100 | beforeDestroy(){ 101 | videojs('videoPlayerContainer').dispose(); 102 | } 103 | } --------------------------------------------------------------------------------