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

2023-04-04 14:04:09 浏览数 (14)

1、下载SkeyeWebPlayer.js文件

下载地址

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

3、引入方式

(1)、在入口页面index.html中引入SkeyeWebPlayer.js

代码语言：txt复制
<html>
代码语言：txt复制
    <head>
代码语言：txt复制
        <title>template</title>
代码语言：txt复制
        <script src="static/libs/SkeyeWebPlayer.js"></script>
代码语言：txt复制
    </head>
代码语言：txt复制
</html>

(2)、在vue组件中引入SkeyeWebPlayer.js

代码语言：txt复制
import WebMediaPlayer from '../static/libs/SkeyeWebPlayer/SkeyeWebPlayer'

4、vue组件中代码如下

代码语言：txt复制
<template>
代码语言：txt复制
   <div class="player-group" id="skeyePlayer"></div>
代码语言：txt复制
</template>
代码语言：txt复制
<script>
代码语言：txt复制
	export default {
代码语言：txt复制
	  data() {
代码语言：txt复制
		return {
代码语言：txt复制
		  player: null
代码语言：txt复制
		}
代码语言：txt复制
	  },
代码语言：txt复制
	  mounted() {
代码语言：txt复制
		this.$nextTick(() => {
代码语言：txt复制
			this.initPlayer()
代码语言：txt复制
		});
代码语言：txt复制
	  },
代码语言：txt复制
	  beforeDestroy() {
代码语言：txt复制
		if (this.player) {
代码语言：txt复制
		  	this.player.destroy();
代码语言：txt复制
		}
代码语言：txt复制
	  },
代码语言：txt复制
	  methods: {
代码语言：txt复制
		initPlayer() {
代码语言：txt复制
		  // new WebMediaPlayer（url,domId,callback,options）
代码语言：txt复制
		  this.player = new WebMediaPlayer(
代码语言：txt复制
			'url',
代码语言：txt复制
			'skeyePlayer'`,
代码语言：txt复制
			this.callbackFunc,
代码语言：txt复制
			{
代码语言：txt复制
			  cbUserPtr: this,
代码语言：txt复制
			  decodeType: 'auto',
代码语言：txt复制
			  openAudio: 0,
代码语言：txt复制
			  BigPlay: false
代码语言：txt复制
			});
代码语言：txt复制
		  this.player.play('', 1, 0);
代码语言：txt复制
		},
代码语言：txt复制
		// 播放器回调方法
代码语言：txt复制
		callbackFunc(cbType, cbParams) {
代码语言：txt复制
		  if (cbType == 'playbackTime') {
代码语言：txt复制
			//console.log("当前回放时间: "   cbParams);
代码语言：txt复制
		  } else if (cbType == 'ended') {
代码语言：txt复制
			console.log("播放结束");
代码语言：txt复制
		  }
代码语言：txt复制
		  //console.log("Callback "   cbType   ":  "   cbParams);
代码语言：txt复制
		}
代码语言：txt复制
	  }
代码语言：txt复制
	}
代码语言：txt复制
</script>

5、可以将播放器单独写成组件供其他页面调用

6、最终效果

h5页面 vue.js 视频播放器

0 人点赞