在VUE项目中添加使用SkeyeWebPlayer.js直播点播H5免费播放器

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、最终效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！