在VUE项目中添加使用SkeyeWebPlayer.js直播点播H5免费播放器
原创
在VUE项目中添加使用SkeyeWebPlayer.js直播点播H5免费播放器
原创
Openskeye
修改于 2023-04-04 06:04:09
修改于 2023-04-04 06: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 删除。
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
在VUE3项目中添加使用永久免费H5直播点播播放器SkeyeWebPlayer.js及问题
更多 >腾讯云开发者
