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

浅浅的花香味﹌ 2023-06-07 08:15 31阅读 0赞

# yy-video-player #

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

# 使用截图 #

## 非全屏播放 ##

![007X8olVly1g7wvuhud80j30u01o0n4v.jpg][]

## 全屏播放 ##

![007X8olVly1g7wvukmml1j31o00u04fz.jpg][]

## 使用教程 ##

导入插件

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>

参数说明：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
   <th>是否必填</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>视频地址，支持的格式请参考uni-app官网</td> 
   <td>是</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>poster</td> 
   <td>视频封面地址，支持的格式请参考uni-app官网</td> 
   <td>是</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>auto-play</td> 
   <td>是否自动播放</td> 
   <td>否</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>danmu-list</td> 
   <td>弹幕列表</td> 
   <td>否</td> 
   <td>[]</td> 
  </tr> 
  <tr> 
   <td>show-back-btn</td> 
   <td>是否显示返回按钮</td> 
   <td>否</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>show-download-btn</td> 
   <td>是否显示下载按钮</td> 
   <td>否</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>process-bar-color</td> 
   <td>进度条颜色</td> 
   <td>否</td> 
   <td>#39BFFD</td> 
  </tr> 
 </tbody> 
</table>

## 其它说明 ##

如需设置后台不播放，返回页面继续播放，请在使用插件的页面内监听：

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][https_github.com_RickyHal_yy-video-player]

[https_ext.dcloud.net.cn_plugin_id_856]: https://ext.dcloud.net.cn/plugin?id=856
[007X8olVly1g7wvuhud80j30u01o0n4v.jpg]: /images/20230601/46595114a6fd43e2bb8eacafa4896a54.png
[007X8olVly1g7wvukmml1j31o00u04fz.jpg]: /images/20230601/b37d57cbd5e94eb38d86ea249733f3ca.png
[https_github.com_RickyHal_yy-video-player]: https://github.com/RickyHal/yy-video-player