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

原创

Openskeye

修改于 2023-04-04 14:04:09

1.5K0

修改于 2023-04-04 14:04:09

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

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度