在VUE项目中添加使用SkeyeWebPlayer.js直播点播H5免费播放器####1、下载SkeyeWebPlaye

####1、下载SkeyeWebPlayer.js文件下载地址

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

1646898972(1).jpg ####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、最终效果