开源资源
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等视频流。