GB28181 协议WEB直播服务LiveGBS前端源码中WEB播放组件的使用

概述开源资源 LiveGBS国标GB28181流媒体服务前端源码 https://github.com/livegbs/GB28181-Server 免费播放器LivePlayer https://www.npmjs.com/package/@liveqing/liveplayer 安装播放器 npm install @liveqing/liveplayer webpck.config.js 中配置 开源资源

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 : data-keyboard="true" data-backdrop="static" tabindex="-1">        <div >            <div >                <div >                    <button type="button"  data-dismiss="modal" aria-label="Close">                        <span aria-hIDden="true">&times;</span>                    </button>                    <h4 ><span>{{vIDeoTitle}}</span></h4>                </div>                <div  v-loading="bLoading" element-loading-text="加载中">                    <livePlayer v-if="bShow" :vIDeoUrl="vIDeoUrl" :snapUrl="snapUrl" :live="live" @message="$message" :loading.sync="bLoading"></livePlayer>                </div>                <div >                    <button type="button"  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等视频流。

总结

以上是内存溢出为你收集整理的GB28181 协议WEB直播服务LiveGBS前端源码中WEB播放组件的使用全部内容，希望文章能够帮你解决GB28181 协议WEB直播服务LiveGBS前端源码中WEB播放组件的使用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。