1、下载SkeyeWebPlayer.js文件

下载地址

2、将下载好的文件放到src/static目录下

在这里插入图片描述

3、引入方式
(1)、在入口页面index.html中引入SkeyeWebPlayer.js
<html>
    <head>
        <title>template</title>
        <script src="static/libs/SkeyeWebPlayer.js"></script>
    </head>
</html>
(2)、在vue组件中引入SkeyeWebPlayer.js
import WebMediaPlayer from '../static/libs/SkeyeWebPlayer/SkeyeWebPlayer'
4、vue组件中代码如下
<template>
   <div class="player-group" id="skeyePlayer"></div>
</template>



<script>
	export default {
	  data() {
		return {
		  player: null
		}
	  },
	  mounted() {
		this.$nextTick(() => {
			this.initPlayer()
		});
	  },
	  beforeDestroy() {
		if (this.player) {
		  	this.player.destroy();
		}
	  },
	  methods: {
		initPlayer() {
		  // new WebMediaPlayer（url,domId,callback,options）
		  this.player = new WebMediaPlayer(
			'url',
			'skeyePlayer'`,
			this.callbackFunc,
			{
			  cbUserPtr: this,
			  decodeType: 'auto',
			  openAudio: 0,
			  BigPlay: false
			});
		  this.player.play('', 1, 0);
		},
		// 播放器回调方法
		callbackFunc(cbType, cbParams) {
		  if (cbType == 'playbackTime') {
			//console.log("当前回放时间: " + cbParams);
		  } else if (cbType == 'ended') {
			console.log("播放结束");
		  }
		  //console.log("Callback " + cbType + ":  " + cbParams);
		}
	  }
	}
</script>
5、可以将播放器单独写成组件供其他页面调用
6、最终效果

在这里插入图片描述

获取更多信息

邮件：support@openskeye.cn

QQ交流群：102644504

SkeyeVSS综合安防互联网无插件播放解决方案

SkeyeARS全景AR增强监视系统解决方案

SkeyeIVMS集群式视频云管控平台解决方案

Copyright © OpenSkeye Team 2018-2022

# javascript # vue.js # websocket
Logo
即构开发者社区

致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。

更多推荐

WebSocket实现实时通信

WebSocket 是一种数据通信协议，也是用于客户端和服务端数据通信，类似于我们常见的 http既然有 http，为啥还要 WebSockethttp 通信是单向的请求 + 响应没有请求也就没有响应初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说

avatar 即构开发者社区

webrtc的实时视频通话建立的流程--C++接口

一：webrtc通讯流程简介附件下载：webrtc即Web Real-Time Communication，web实时通信技术。简单地说就是在web浏览器里面引入实时通信，包括音视频通话等。本文章只简单的描述下webrtc实时音视频通话建立了的过程，（文章中提到代码的部分都是C++的接口部分，但是建立通讯流程的过程都是一样的）在webrtc的通讯过程中，主动呼叫方被称为offer方。被动等待呼叫的

avatar 即构开发者社区
cover

一文带你了解webrtc基本原理（动手实现1v1视频通话）

avatar 即构开发者社区