(开源)GB28181国标流媒体服务前端-直播点播播放器组件搭建及使用
- 2019 年 10 月 4 日
- 筆記
开源资源
LiveGBS国标GB28181流媒体服务前端源码
https://github.com/livegbs/GB28181-Server
免费播放器LivePlayer
https://www.npmjs.com/package/@liveqing/liveplayer
安装播放器
npm install @liveqing/liveplayer
webpck.config.js 中配置
...... // copy js lib and swf files to dist dir 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/'} ]), ......
编辑Vue组件
...... import LivePlayer from '@liveqing/liveplayer' ...... components: { LivePlayer } ...... <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>
完整组件示例（CloudRecordVideoDlg.vue）
<template> <div :class="['modal', { fade: fade }]" data-keyboard="true" data-backdrop="static" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title text-primary text-center"><span>{{videoTitle}}</span></h4> </div> <div class="modal-body" v-loading="bLoading" element-loading-text="加载中"> <LivePlayer v-if="bShow" :videoUrl="videoUrl" :snapUrl="snapUrl" :live="live" @message="$message" :loading.sync="bLoading"></LivePlayer> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> </div> </div> </template> <script> import 'jquery-ui/ui/widgets/draggable' import LivePlayer from '@liveqing/liveplayer' import { mapState } from "vuex" export default { data() { return { videoUrl: "", videoTitle: "", snapUrl: "", bShow: false, bLoading: false } }, props: { live : { type: Boolean, default: false }, fade: { type: Boolean, default: false } }, mounted() { $(this.$el).find('.modal-content').draggable({ handle: '.modal-header', cancel: ".modal-title span", addClasses: false, containment: 'document', delay: 100, opacity: 0.5 }); $(this.$el).on("hide.bs.modal", () => { this.bShow = false; }).on("show.bs.modal", () => { this.bShow = true; }) }, components: { LivePlayer }, computed: { ...mapState(['userInfo', 'serverInfo']), }, methods: { play(src,title,snap) { this.videoUrl = src||""; this.videoTitle = title||""; this.snapUrl = snap||""; $(this.$el).modal("show"); } } } </script> <style lang="less" scoped> .modal-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style>
通过简单的几部操作，就可以在您的VUE前端中引入播放器，可以播放HLS、RTMP、HTTP-FLV等视频流。
