基于VUE和webpck的前端工程
1、安裝@liveqing/liveplayer
npm -i @liveqing/liveplayer --save-dev
2、webpack.config.js 添加配置
....
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
<!DOCTYPE HTML>
<html>
<head>
.....
<!--這裡的路徑是上一步copy，相對于www目錄的相對路徑，最終目的讓浏覽器可以通路到這個js-->
<script src="js/liveplayer-lib.min.js"></script>
</head>
<bodyr>
.....
</body>
</html>
4、.vue中使用liveplayer
4.1、 import 引入
import LivePlayer from "@liveqing/liveplayer";
4.2、 components 中添加
components: {
LivePlayer
}
4.3 頁面中添加元件
<div>
....
<LivePlayer :videoUrl="url" live muted stretch></LivePlayer>
....
</div>
4.4 url設定
this.url = 播放的視訊位址
![移動位置上報GBS坐标資訊可以通過GB28181協定注冊到LiveGBS并檢視擷取坐标軌迹坐标[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)