基于uni-app开发的一款视频播放器插件

yy-video-player

基于uni-app开发的一款视频播放器插件,开箱即用,具有视频下载,页面返回,弹幕,进度条等功能。
插件地址:https://ext.dcloud.net.cn/plugin?id=856

使用截图

非全屏播放

基于uni-app开发的一款视频播放器插件_第1张图片

全屏播放

基于uni-app开发的一款视频播放器插件_第2张图片

使用教程

导入插件

  import yyVideoPlayer from '@/components/yy-video-player.nvue';

声明插件

  components: {
      yyVideoPlayer
  }

使用插件


参数说明:

属性 说明 是否必填 默认值
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。

github地址:https://github.com/RickyHal/yy-video-player

你可能感兴趣的:(前端)