├── public
    ├── favicon.ico
    ├── video.flv
    ├── video.mp4
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── App.vue
    └── components
    │   └── LivePlayerDemo.vue
├── babel.config.js
├── .gitignore
├── README.md
├── vue.config.js
└── package.json


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livegbs/liveplayer-vc/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/video.flv:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livegbs/liveplayer-vc/HEAD/public/video.flv


--------------------------------------------------------------------------------
/public/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livegbs/liveplayer-vc/HEAD/public/video.mp4


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/livegbs/liveplayer-vc/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | pnpm-debug.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw?
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # liveplayer-vc
 2 | 
 3 | LivePlayer H5 播放器， 使用 vue-cli 集成示例
 4 | 
 5 | ## Project setup
 6 | ```
 7 | yarn install
 8 | ```
 9 | 
10 | ### Compiles and hot-reloads for development
11 | ```
12 | yarn serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | ```
17 | yarn build
18 | ```
19 | 
20 | ### Lints and fixes files
21 | ```
22 | yarn lint
23 | ```
24 | 
25 | ### Customize configuration
26 | See [Configuration Reference](https://cli.vuejs.org/config/).
27 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 2 | 
 3 | module.exports = {
 4 |     configureWebpack: {
 5 |       plugins: [
 6 |         new CopyWebpackPlugin([
 7 |             { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
 8 |             { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
 9 |             { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}
10 |         ])
11 |       ]
12 |     }
13 |   }


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div id="app">
 3 |     <LivePlayerDemo msg="LivePlayer.js H5直播点播播放器演示" />
 4 | </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import LivePlayerDemo from './components/LivePlayerDemo.vue'
 9 | 
10 | export default {
11 |     name: 'App',
12 |     components: {
13 |         LivePlayerDemo
14 |     }
15 | }
16 | </script>
17 | 
18 | <style>
19 | #app {
20 |     font-family: Avenir, Helvetica, Arial, sans-serif;
21 |     -webkit-font-smoothing: antialiased;
22 |     -moz-osx-font-smoothing: grayscale;
23 |     text-align: center;
24 |     color: #2c3e50;
25 |     margin-top: 60px;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "liveplayer-vc",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "@liveqing/liveplayer": "2.3.2",
12 |     "copy-webpack-plugin": "4.6.0",
13 |     "core-js": "^3.6.5",
14 |     "vue": "^2.6.11"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.4.0",
18 |     "@vue/cli-plugin-eslint": "~4.4.0",
19 |     "@vue/cli-service": "~4.4.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "babel-eslint"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not dead"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/LivePlayerDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="hello">
 3 | 
 4 |     <div style="width:512px;height:300px;margin:auto">
 5 |         <LivePlayer videoUrl="video.mp4" />
 6 |     </div>
 7 |     <div style="width:512px;height:300px;margin:auto" class="palyer2">
 8 |         <!-- 用 http://localhost:8080 访问demo可以播放下面的flv -->
 9 |         <LivePlayer  @snapOutside="snapOutside" ref="player2" videoUrl="http://localhost:8080/video.flv" live />
10 |     </div>
11 | 
12 |     <h1>{{ msg }}</h1>
13 |     <h3>相关说明</h3>
14 |     <ul>
15 |         <li><a href="https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%B1%9E%E6%80%A7-property" target="_blank" rel="noopener">属性(Property)</a></li>
16 |         <li><a href="https://www.liveqing.com/docs/manuals/LivePlayer.html#%E6%96%B9%E6%B3%95-medthod" target="_blank" rel="noopener">方法(Medthod)</a></li>
17 |         <li><a href="https://www.liveqing.com/docs/manuals/LivePlayer.html#%E4%BA%8B%E4%BB%B6-event" target="_blank" rel="noopener">事件(Event)</a></li>
18 |     </ul>
19 | 
20 |     <h3>方法调用示例</h3>
21 |     <ul>
22 |         <li><a @click="pause" rel="noopener">暂停</a></li>
23 |         <li><a @click="play" rel="noopener">播放</a></li>
24 |         <li><a @click="snap" rel="noopener">截图数据</a></li>
25 |     </ul>
26 |     <br/>
27 |     <br/>
28 | </div>
29 | </template>
30 | 
31 | <script>
32 | import LivePlayer from '@liveqing/liveplayer'
33 | export default {
34 |     name: 'LivePlayerDemo',
35 |     components: {
36 |         LivePlayer
37 |     },
38 |     props: {
39 |         msg: String
40 |     },
41 |     methods: {
42 |         pause: function () {
43 |             this.$refs.player2.pause();
44 |         },
45 |         play: function () {
46 |             this.$refs.player2.play();
47 |         },
48 |         snap: function () {
49 |             this.$refs.player2.snap();
50 |         },
51 |         snapOutside: function (snapData) {
52 |             alert(snapData)
53 |         }
54 |     }
55 | }
56 | </script>
57 | 
58 | <!-- Add "scoped" attribute to limit CSS to this component only -->
59 | 
60 | <style scoped>
61 | h3 {
62 |     margin: 40px 0 0;
63 | }
64 | 
65 | ul {
66 |     list-style-type: none;
67 |     padding: 0;
68 | }
69 | 
70 | li {
71 |     display: inline-block;
72 |     margin: 0 10px;
73 |     cursor: pointer;
74 | }
75 | 
76 | a {
77 |     color: #42b983;
78 | }
79 | </style>
80 | 


--------------------------------------------------------------------------------