前端web页面通过VUE集成H5直播、点播播放器LivePlayer

2021-05-06 20:30

阅读:390

YPE HTML>

标签:pre   ssd   server   this   port   swf   播放器   conf   import   

基于VUE和webpck的前端工程

这里可以参考 https://github.com/livegbs/GB28181-Server

1、安装@liveqing/liveplayer

npm -i @liveqing/liveplayer --save-dev

2、webpack.config.js 添加配置

这里是配置webpack自动copy,当然也可以手动复制到待发布的web目录,如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/'}
    ]),
   ...
   ]

3、配置template.html


     .....
        
        
        .....
    

4、.vue中使用liveplayer

4.1、 import 引入

import LivePlayer from "@liveqing/liveplayer";

4.2、 components 中添加

 components: {
    LivePlayer
 }

4.3 页面中添加组件

    
.... ....

4.4 url设置

this.url = 播放的视频地址

前端web页面通过VUE集成H5直播、点播播放器LivePlayer

标签:pre   ssd   server   this   port   swf   播放器   conf   import   

原文地址:https://www.cnblogs.com/kumukim/p/12094167.html


评论


亲,登录后才可以留言!