基于uni-app开发的一款视频播放器插件
yy-video-player基于uni-app开发的一款视频播放器插件,开箱即用,具有视频下载,页面返回,弹幕,进度条等功能。使用截图非全屏待播放全屏播放使用教程导入插件import yyVideoPlayer from '@/components/yy-video-player.nvue';声明插件components: {yyVideoPlaye...
·
yy-video-player
基于uni-app开发的一款视频播放器插件,开箱即用,具有视频下载,页面返回,弹幕,进度条等功能。
插件地址:https://ext.dcloud.net.cn/plugin?id=856
使用截图
非全屏播放
全屏播放
使用教程
导入插件
import yyVideoPlayer from '@/components/yy-video-player.nvue';
声明插件
components: {
yyVideoPlayer
}
使用插件
<yy-video-player
:auto-play="false"
:url="url"
:poster="poster"
:danmu-list="danmuList"
:show-back-btn="true"
></yy-video-player>
参数说明:
属性 | 说明 | 是否必填 | 默认值 |
---|---|---|---|
url | 视频地址,支持的格式请参考uni-app官网 | 是 | |
poster | 视频封面地址,支持的格式请参考uni-app官网 | 是 | |
auto-play | 是否自动播放 | 否 | true |
danmu-list | 弹幕列表 | 否 | [] |
show-back-btn | 是否显示返回按钮 | 否 | false |
show-download-btn | 是否显示下载按钮 | 否 | false |
process-bar-color | 进度条颜色 | 否 | #39BFFD |
其它说明
如需设置后台不播放,返回页面继续播放,请在使用插件的页面内监听:
onShow() {
if (this.videoContext) {
this.videoContext.play();
}
},
onReady: function() {
this.videoContext = uni.createVideoContext('video', this);
},
onHide: function() {
if (this.videoContext) {
this.videoContext.stop();
}
}
视频组件使用的是fixed布局,默认高度为227px,这样方便下面的内容上滑时视频组件始终在最上层,如需视频下面开发界面,可以使用一个高度为227px的占位div。
发弹幕使用
this.videoContext.sendDanmu({
text: this.danmuValue,
color: "#FFF"
});
本人很菜,如有bug欢迎提issue。
更多推荐
已为社区贡献1条内容
所有评论(0)