Front-end engineering based on VUE and WebPCK
Here you can see github.com/livegbs/GB2…
1. Install @liveqing/ livePlayer
npm -i @liveqing/liveplayer --save-dev
Copy the code2. Add configuration to webpack.config.js
Here you configure webPack automatic copy, or you can manually copy to a web directory to publish, such as WWW
. const CopyWebpackPlugin = require('copy-webpack-plugin'); . plugins: [ ... new CopyWebpackPlugin([ { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'}, { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}, { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'} ]), ... ]Copy the code3. Configure template.html
<! DOCTYPE HTML> <html> <head> ..... <! -- The path is the previous copy, relative to the WWW directory path, Js --> <script SRC ="js/liveplayer-lib.min.js"></script> </head> <bodyr>..... </body> </html>Copy the code4. Use LivePlayer in. Vue
4.1 import is introduced
import LivePlayer from "@liveqing/liveplayer";
Copy the code4.2. Added in components
components: {
LivePlayer
}
Copy the code4.3 Adding Components on the Page
<div>
....
<LivePlayer :videoUrl="url" live muted stretch></LivePlayer>
....
</div>
Copy the code4.4 the url Settings
This. url = The address of the video to playCopy the code