前言
wrs-videoplayer是一款支持Android、iOS视频播放的组件，支持视频格式有rtmp、m3u8、flv、mp4等常用视频格式，支持华丽弹幕
功能
- 支持自动选择全屏
- 暂停、播放、全屏、可拖动进度条,开始播放、播放进度、播放失败、播放结束、从第几秒开始播放
- 支持弹幕，弹幕支持图文混排
- 封面图片
原生插件通用使用流程
HBuildX集成原生插件请参考:https://www.jianshu.com/p/1418c9e73eb3 或官网https://nativesupport.dcloud.net.cn/NativePlugin/use/use
wrs-videoplayer组件
注意:不要勾选manifest.json的App模块配置里的VideoPlayer(视频播放)
<wrs-videoplayer :config="config" :coverImage="coverImage" ref='videoPlayer' :url="url"
:style="'width:'+width+'px;height:'+height+'px;'" @onBarrageTypeChange="onBarrageTypeChange"
@playerPrepareToPlay="playerPrepareToPlay" @playerReadyToPlay="playerReadyToPlay"
@playerPlayTimeChanged="playerPlayTimeChanged"
@playerPlayFailed="playerPlayFailed" @playerDidToEnd="playerDidToEnd"></wrs-videoplayer>
属性
- coverImage 设置播放器封面图片
- url 设置视频播放URL
- config
autoPlay 是否自动播放
menus 工具栏菜单按钮，目前支持的变量有:barrage(弹幕按钮) - @onBarrageTypeChange 用户选择弹幕改变的时候调用
- @playerPrepareToPlay 预备播放
- @playerReadyToPlay 准备播放
- @playerPlayTimeChanged 播放进度
- @playerPlayFailed 播放失败
- @playerDidToEnd 播放结束
方法
- this.$refs.videoPlayer.start() 开始播放
- this.$refs.videoPlayer.pause() 暂停播放
- this.$refs.videoPlayer.play({url:"xxx"}) 切换播放视频
- this.$refs.videoPlayer.seekToTime({time: 10000}) 快进到第几毫秒秒开始播放，time单位是毫秒
- this.$refs.videoPlayer.setBarrageType({barrageType: "none"}) 获取弹幕类型
barrageType: none(关闭弹幕)、half(精简弹幕模式)、all(华丽弹幕模式) - this.$refs.videoPlayer.setBarrageType({barrageType: "none"}) 设置弹幕类型
- this.$refs.videoPlayer.sendDanmu(options) 发送弹幕
弹幕参数options：
direction: 弹幕方向，RL(右到左)、LR(左到右)、TB(上到下,仅支持iOS)、BT(下到上,仅支持iOS)
texts: 弹幕文本图片，把texts数组的所有对象平成一条弹幕数据，每个对象的参数有：
type: txt(文本)、image(图片)
text: 文字
textColor: 文字颜色
textSize: 文字大小
bold: 是否是粗体
backgroundColor: 背景色
underline: 下划线 color 下划线颜色仅对iOS有效
strikethrough： 删除线 color 删除线颜色仅对iOS有效
obliqueness：字形倾斜度, 正值右倾，负值左倾，iOS可以调节倾斜度，Android只能倾斜，无法调节倾斜度
stroke： 笔画, 负值填充效果，正值中空效果，仅对iOS有效
shadow：阴影，仅对iOS有效
注意：uni-app 基座和SDK版本需要一致，不然iOS上自动横竖屏切换会出现错乱，请使用新版HBuild使用
完整demo
<template>
<div>
<wrs-videoplayer :config="config" :coverImage="coverImage" ref='videoPlayer' :url="url"
:style="'width:'+width+'px;height:'+height+'px;'" @onBarrageTypeChange="onBarrageTypeChange"
@playerPrepareToPlay="playerPrepareToPlay" @playerReadyToPlay="playerReadyToPlay"
@playerPlayTimeChanged="playerPlayTimeChanged" @playerPlayFailed="playerPlayFailed"
@playerDidToEnd="playerDidToEnd"></wrs-videoplayer>
<div @click="videoStart()" class="btn"><text>开始播放</text></div> <br />
<div @click="videoPause()" class="btn"><text>暂停播放</text></div><br />
<div @click="videoSwitch()" class="btn"><text>切换视频</text></div>
<div @click="seekToTime()" class="btn"><text>设置播放位置</text></div>
<div @click="sendDanmu()" class="btn"><text>发送文字弹幕</text></div>
<div @click="stopDanmu()" class="btn"><text>停止弹幕</text></div>
<div @click="getBarrageType()" class="btn"><text>获取当前弹幕类型</text></div>
<div @click="setBarrageType()" class="btn"><text>设置弹幕类型</text></div>
<text class="log">{{msg}}</text>
</div>
</template>
<script>
String.prototype.endWith = function(endStr) {
var d = this.length - endStr.length;
return (d >= 0 && this.lastIndexOf(endStr) == d)
}
export default {
// http://9890.vod.myqcloud.com/9890_4e292f9a3dd011e6b4078980237cc3d3.f20.mp4
// http://las-tech.org.cn/kwai/las-test_ld500d.flv
data() {
return {
url: 'http://9890.vod.myqcloud.com/9890_4e292f9a3dd011e6b4078980237cc3d3.f20.mp4',
coverImage: 'https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF',
index: 0,
urls: [],
height: 300,
width: 300,
msg: "",
danmuTime: null,
barrageType: 'all',
config: {
autoPlay: false,
menus: ["barrage"]
}
}
},
onLoad() {
// 设置播放器宽高，一般宽度铺满全屏，宽高比是16:9
const {
windowWidth,
windowHeight
} = uni.getSystemInfoSync();
this.width = windowWidth;
this.height = this.width / (16.0 / 9.0);
},
methods: {
playerPrepareToPlay: function(resp) {
var str = JSON.stringify(resp.detail);
this.showMsg("playerPrepareToPlay:" + str);
},
playerReadyToPlay: function(resp) {
var str = JSON.stringify(resp.detail);
this.showMsg("playerReadyToPlay:" + str);
},
playerPlayTimeChanged: function(resp) {
var str = JSON.stringify(resp.detail);
this.showMsg("playerPlayTimeChanged:" + str);
},
playerBufferTimeChanged: function(resp) {
var str = JSON.stringify(resp.detail);
this.showMsg("playerBufferTimeChanged:" + str);
},
playerPlayFailed: function(resp) {
var str = JSON.stringify(resp.detail);
this.showMsg("playerPlayFailed:" + str);
},
playerDidToEnd: function(resp) {
var str = JSON.stringify(resp.detail);
this.showMsg("playerDidToEnd:" + str);
},
videoStart: function() {
// 开始播放
this.$refs.videoPlayer.start()
},
videoPause: function() {
// 暂停播放
this.$refs.videoPlayer.pause()
},
videoSwitch: function() {
var path = "_www";
var absPath = plus.io.convertLocalFileSystemURL(path);
// Android获取的absPath以/结尾，iOS获取的absPath不是/结尾
if (absPath.endWith('/')) {
absPath = absPath.substring(0, absPath.length - 1);
}
var videoPath = absPath + "/static/demo.mp4"
// 切换播放视频
this.$refs.videoPlayer.play({
url: videoPath
})
},
seekToTime: function() {
// 切换播放视频
this.$refs.videoPlayer.seekToTime({
time: 10000
})
},
sendDanmu: function() {
// this.sendTxtImageDanmu();
this.stopDanmu();
var count = 10;
if (this.barrageType == 'all') {
count = 15;
} else if (this.barrageType == 'half') {
count = 2;
} else if (this.barrageType == 'none') {
count = 0;
}
if (count > 0) {
this.danmuTime = setInterval(() => {
for (var i = 0; i < count; i++) {
this.sendTxtImageDanmu();
}
}, 1000)
}
},
stopDanmu: function() {
if (this.danmuTime != undefined && this.danmuTime != null) {
clearInterval(this.danmuTime)
this.danmuTime = null;
}
},
sendTxtImageDanmu: function() {
var path = "_www";
var absPath = plus.io.convertLocalFileSystemURL(path);
// Android获取的absPath以/结尾，iOS获取的absPath不是/结尾
if (absPath.endWith('/')) {
absPath = absPath.substring(0, absPath.length - 1);
}
var imagePath = absPath + "/static/images/demoIcon.png"
var options = {};
options.texts = [{
type: "txt",
text: "这是一条",
textColor: "#FFFF00", // 文字颜色
textSize: 25, // 字体大小
bold: true // 粗体
// link: "http://www.baidu.com", // 链接
},
{
type: "image",
url: imagePath,
size: {
width: 50,
height: 50
}
},
{
type: "txt",
text: "图片弹幕~",
textColor: "#FFFF00",
textSize: 30
}
];
var random = Math.ceil(Math.random()*10);
var direction = "RL";
var priority = random % 4;
var duration = random % 5 + 5;
if(random % 4 == 0) {
direction = "RL";
} else if(random % 4 == 1) {
direction = "LR";
} else if(random % 4 == 2) {
direction = "TB";
} else if(random % 4 == 3) {
direction = "BT";
}
options.direction = direction;
options.priority = priority; // 取值范围[0, 1, 2, 3]
options.duration = duration;
// options.borderColor = "#FFAEff";
this.$refs.videoPlayer.sendDanmu(options);
},
onBarrageTypeChange: function(resp) {
let barrageType = resp.detail.barrageType;
if (barrageType == 'all') {
this.showMsg("华丽弹幕模式");
} else if (barrageType == 'half') {
this.showMsg("精简弹幕模式");
} else if (barrageType == 'none') {
this.showMsg("弹幕已关闭");
}
this.barrageType = barrageType;
this.sendDanmu();
},
setBarrageType: function() {
var options = {};
options.barrageType = "none"; // all:华丽弹幕模式 half:精简弹幕模式 none:弹幕已关闭
this.$refs.videoPlayer.setBarrageType(options);
this.barrageType = options.barrageType;
this.sendDanmu();
},
getBarrageType: function() {
this.$refs.videoPlayer.getBarrageType((resp) => {
let barrageType = resp.barrageType;
if (barrageType == 'all') {
this.showMsg("华丽弹幕模式");
} else if (barrageType == 'half') {
this.showMsg("精简弹幕模式");
} else if (barrageType == 'none') {
this.showMsg("弹幕已关闭");
}
});
},
showMsg: function(msg) {
this.msg = msg;
}
}
}
</script>
<style>
.btn {
margin-top: 25rpt;
}
</style>
网友评论