LivePlayer播放器安装与使用

1、安装模块
2、配置
3、使用

公司项目需要抛弃萤石云插件，因此视频播放要另寻出路，找来找去，找到了LiveGBS GB28181流媒体服务，研究了一下demo，因为要使用LivePlayer，所以想要在自己项目里使用，还得把LivePlayer装好，项目用的vue。

1、安装模块

npm install @liveqing/liveplayer

2、配置

在该文件中配置如下。

  externals: {'video.js': 'videojs','flv.js': 'flvjs'},

plugins: [new CopyWebpackPlugin([{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}])]

index.html增加

<script src="js/liveplayer-lib.min.js"></script>

3、使用

<template><div id="app"><LivePlayer ref="player" :videoUrl="videoUrl" :snapUrl="snapUrl" :live="live" muted :hasaudio="hasAudio"></LivePlayer><div @mouseup="ptzStop()"><label><input name="Fruit" type="radio" value="" @click="ptzControl('up')"/>FLV</label><label><input name="Fruit" type="radio" value="" @click="change('up')"/>RTMP</label></div><div @mouseup="ptzStop()"><button @mousedown="ptzControl('up')">上</button><button @mousedown="ptzControl('down')">下</button><button @mousedown="ptzControl('left')">左</button><button @mousedown="ptzControl('right')">右</button><button @mousedown="ptzControl('up')">上</button><button @mousedown="ptzControl('right')">讲话</button><button @mousedown="ptzControl('up')">放大</button><button @mousedown="ptzControl('right')">缩小</button></div></div>
</template><script>import LivePlayer from '@liveqing/liveplayer'
export default {name: 'HelloWorld',data () {return {hasAudio: '',videoUrl: '',protocol: '',videoTitle: '',snapUrl: '',serial: '',code: '',streamid: '',bRecording: '',streamInfo: {},msg: 'Welcome to Your Vue.js App',serial: '34020000001320000003',code: '34020000001320000001'}},props: {live: {type: Boolean,default: false}},components: {LivePlayer},mounted() {this.getSteram();},methods: {getSteram () {let params = {serial: this.serial,code: this.code}this.$http.get("/video/v1/stream/start", {params: params}).then(res => {let streamInfo = res.data || {};var videoUrl = this.isMobile() ? streamInfo.HLS : streamInfo.RTMP;var protocol = this.isMobile() ? "HLS" : "RTMP";if(this.flvSupported() && streamInfo.FLV) {videoUrl = streamInfo.FLV;protocol = "FLV";}this.hasAudio = streamInfo.AudioEnable && streamInfo.SourceAudioCodecName != "";this.videoUrl = videoUrl || "";this.protocol = protocol;this.videoTitle = 'title' || "";this.snapUrl = streamInfo.sn || "";this.serial = params.serial || "";this.code = params.code || "";this.streamid = streamInfo.StreamID || "";this.bRecording = streamInfo.RecordStartAt != ""this.streamInfo = streamInfo;}).catch(() => {})},/*** @name: 摄像头控制*/ptzControl(type) {let params = {serial: this.serial,code: this.code,command: type}this.$http.get("/video/v1/control/ptz", {params: params}).then(res => {});},/*** @name: 停止*/ptzStop() {let params = {serial: this.serial,code: this.code,command: 'stop'}this.$http.get("/video/v1/control/ptz", {params: params}).then(res => {});},/*** @name: 切换类型*/ptzControl(type) {let params = {serial: this.serial,code: this.code,command: type}this.$http.get("/video/v1/control/ptz", {params: params}).then(res => {var protocol = this.isMobile() ? "HLS" : "RTMP";if(this.flvSupported() && streamInfo.FLV) {videoUrl = streamInfo.FLV;protocol = "FLV";}this.videoUrl = videoUrl || "";});},}
}
</script>

LivePlayer播放器安装与使用相关推荐

Vue项目集成LivePlayer播放器
文章目录前言 1.安装 2.vue.config.js添加配置 3.index.html页面添加配置 4.页面中使用前言 LivePlayer播放器是一款在视频监控行业应用较为广泛的开源视频播放器 ...
win10系统专用DVD播放器安装的方法--win7w.com
win10系统性能稳定受到广大用户的喜爱,但也不尽完美,在使用过程中,难免会遇到win10系统专用DVD播放器安装的问题.碰到win10系统专用DVD播放器安装的问题.很多用户不知道win10系统专用 ...
20191025搜狐播放器安装之后的配置
20191025搜狐播放器安装之后的配置 2019/10/25 14:56 我还在使用WIN7+SP1,但是最新版本的搜狐播放器上传不好用(貌似在WIN7下面有BUG) 我在搜狐的客户要到了旧版本的播 ...
LivePlayer H5直播/点播播放器安装与使用
LivePlayer H5播放器简介 H5直播/点播播放器,使用简单,功能强大, 免费使用支持m3u8播放; 支持HTTP-FLV播放; 支持RTMP播放; 支持直播和点播播放; 支持播放器快照截 ...
LivePlayer播放器的基本用法
LivePlayer安装引入 1.安装 npm install @liveqing/liveplayer 2.在vue.config.js添加配置 const CopyWebpackPlugin = ...
linux yum 安装播放器,centos6.5 常用影音播放器安装
常用的播放器有mplayer,vlc,smplayer等等. 首先安装mplayer. 方法一:yum安装,直接yum install mplayer,mplayer-gui,就可以了. 方法二:上官 ...
EasyPlayer.js网页全终端播放器安装使用文档
EasyPlayer.js EasyPlayer.js H5播放器,是一款能够同时支持HTTP.RTMP.HTTP-FLV.HLS(m3u8)视频直播与视频点播等多种协议,支持H.264.H.265. ...
ubuntu中视频播放器、音乐播放器安装
Ubuntu 用户可以通过PPA 进行安装DPlayer深度影音播放器: sudo add-apt-repository ppa:noobslab/deepin-sc sudo apt-get upd ...
linux播放器安装程序,Linux下音乐播放器Audacious 3.10下载与安装
一款Linux下的音乐播放器Audacious 3.10正式发布下载了,它带来了新的功能和一些重要改进,尽管Audacious 4.0(具有功能齐全的 Qt UI)还没有开发出来,但他们也没有闲着,代 ...

LivePlayer播放器安装与使用

LivePlayer播放器安装与使用

1、安装模块

2、配置

3、使用

LivePlayer播放器安装与使用相关推荐

最新文章

热门文章