微信小程序如何引入视频插件,解决文娱资质问题(uni-app 同样适用)

ゝ一世哀愁。 2021-07-25 23:35 4166阅读 1赞

如果你们近期在做微信小程序,可以先浏览一下,避免踩坑.  
如果你们的微信小程序,**含有视频的话,首先你必须要有文娱资质**,如果没有的话,一定要做开关,在审核前打开开关隐藏视频,审核通过后再放开.如果已经晚了的话现在有两种方案,一种是申请文娱资质,然后再提交审核,(这个资质特别难搞).要么就引入微信小程序第三方视频插件,下面我会详细叙述插件如何使用,和注意事项.  
**第一步**  
登录微信公众平台,进入微信小程序后台管理,点击设置–>点击第三方设置 -->插件管理–>添加插件,然后搜索腾讯视频,点击添加即可.如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 1]  
**第二步**  
在项目中引入视频播放组件

// 在app.json里面引入插件，注意插件版本号填最新的版本号
    "plugins": { 
      "tencentvideo": { 
        "version": "1.4.6", //这块是版本号
        "provider": "wxa75efa648b60994b" //这块是腾讯视频插件的id 不必修改
      }
    }

代码所放位置如下图 (微信开发者工具开发)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 2]  
代码所放位置如下图 (uni-app开发)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 3]

在需要使用插件的界面配置json(这块的位置就是,你准备在哪个界面使用视频组件,就在哪个界面的json里面进行配置)  
配置项:

// 在你们的json里面插入
    "usingComponents": { 
      "txv-video": "plugin://tencentvideo/video"
    }

代码所放位置如下图 (微信开发者工具开发)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 4]  
代码所放位置如下图 (uni-app开发)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 5]

**第三步**  
在项目中使用  
在你需要使用的界面html中 写上以下代码  
vid 是你上传腾讯视频后的视频id 等同于 src 的意思.

// 在你们的wxml上这样插入视频元素
    <txv-video vid="e0354z3cqjp" playerid="txv1"></txv-video>

**如果你不需要过的的操作,只是让视频播放,那么看到这里就足够使用了.**

这个组件的配置项和video差不多,具体的可以看官方文档,我放到下面了  
**配置项详情:**

<txv-video 
      vid="e0354z3cqjp"   // 可使用vid="{
       {vid}}" wx:if="{
       {vid}}" 的方式应用data变量,要注意确保vid存在，详情可见文档最后面的tips
      playerid="txv1"     //playerid必须要全局唯一，可以设置为vid
      autoplay="{
       {true}}" // 是否自动播放
    ></txv-video>

// 支持slot，用于在video上显示UI
    <txv-video 
      vid="e0354z3cqjp"   // 可使用vid="{
       {vid}}" wx:if="{
       {vid}}" 的方式应用data变量,要注意确保vid存在，详情可见文档最后面的tips
      playerid="txv1" 
      width="{
       {100%}}"    //自定义宽度
      height="{
       {'auto'}}" // 自定义高度
      autoplay="{
       {true}}"> // 是否自动播放
      <view class='txv-video-slot'>video slot</view>
    </txv-video>

组件元素支持的自定义属性：

*  vid 视频id
 *  playerid 播放器标识符,需全局唯一，用于获取Video Context，进而手动控制播放
 *  width 视频宽度
 *  height 视频高度
 *  isHiddenStop 是否在不可见区域自动停止播放，默认false，即滑到不可见区域不停止播放
 *  isNeedMutex 是否互斥播放，默认true，即播放一个视频另一个播放的视频自动被暂停

组件元素支持的video属性，属性取值与video一致（插件支持小程序video的大部分属性）

*  autoplay 是否自动播放
 *  poster 视频海报，会根据视频vid拿一个默认值
 *  usePoster 是否使用海报图
 *  direction 视频全屏时方向
 *  objectFit 视频填充方式
 *  controls 视频播放控件
 *  showCenterPlayBtn 是否显示中间播放按钮

*/ V1.2.4 /*

*  defn 视频清晰度，默认auto，可选值：流畅，标清，高清，超清，蓝光，4K，杜比

*/ V1.2.6 /*

*  title 视频全屏时显示的标题

*/ V1.3.3 /*

*  vslideGesture Boolean，非全屏下，上下滑动调节亮度和音量，默认false
 *  vslideGestureInFullscreen Boolean，全屏下，上下滑动调节亮度和音量，默认true
 *  enablePlayGesture Boolean，双击播放或者暂停视频，默认false
 *  showMuteBtn Boolean，是否显示静音按钮，默认false
 *  playBtnPosition String，播放按钮位置，默认bottom，可选值center

**组件元素抛出的自定义事件**

*  bindstatechange 播放状态变更事件，包含loading(资源加载中), ready(资源加载完成),  
    playing(播放中，包含广告和视频), ended(广告和视频都播放完成),  
    error，回调函数接受两个参数newstate，oldstate

**组件抛出了小程序video抛出的所有事件，事件含义与video一致:**

*  bindplay 播放
 *  bindpause 暂停
 *  bindended 播放结束，e.detail.isAd可以用来区分是广告还是视频
 *  bindfullscreenchange 全屏
 *  bindtimeupdate 播放进度更新事件
 *  binderror 视频播放错误信息

**插件 js api**

const TxvContext = requirePlugin("tencentvideo");  
    
    let txvContext = TxvContext.getTxvContext('txv1') // txv1即播放器组件的playerid值
    
    //手动操作video
    txvContext.play();  // 播放
    txvContext.pause(); // 暂停
    txvContext.requestFullScreen(); // 进入全屏
    txvContext.exitFullScreen();    // 退出全屏
    txvContext.playbackRate(+e.currentTarget.dataset.rate); // 设置播放速率
    txvContext.seek(time);  //快进到某个时间
    
    
    //获取当前播放视频上下文，多个实例时特别有用
    var currPlayerId=TxvContext.getLastPlayId();     //获取当前播放视频的playerid
    var currPlayerContxt=TxvContext.getTxvContext(currPlayerId)   //获取当前播放视频的上下文，可进行play，pause等操作
    
    //开启和关闭播放器日志，默认关闭
    TxvContext.openLog()   //开启
    TxvContext.closeLog()  //关闭
    
    /* V1.2.4 */
    * `sendDanmu` 发送弹幕，具体数据格式请看小程序官网video组件
    * `hideVideo` 隐藏视频插件里面的播放器
    * `showVideo` 显示视频插件里面的播放器
    * `showContainer` 显示视频插件里面的最外层容器
    * `hideContainer` 隐藏视频插件里面的最外层容器
    
    /* V1.2.5 */
    * `hideVideoWithVoice` 隐藏视频插件，如果隐藏前正在播放，则隐藏后继续播
    * `showVideoWithVoice` 显示视频插件，跟上面的hideVideoWithVoice配合使用
    
    /* V1.2.6 */
     * `replay` 视频播放完成后，调用此方法可进行重播
       用法：txvContext.replay(vid)，接受一个参数，需要重播的vid
       骚操作，可以通过给vid前面或者后面加空格触发重播而不是调用replay方法，如：vid+=" ";this.setData({ vid})

**版本功能迭代**

*V1.2.4及之前版本*

*  全局只播放一个视频，并且视频滑出可见区域自动停止播放
 *  支持slot
 *  支持竖屏，海报
 *  支持广告暂停和全屏

*V1.2.5*

*  支持全屏下设置亮度
 *  支持全屏下切换清晰度

*V1.3.3*

*  cover-view改为view

**常见问题**

*  找不到playerid为txv1的txv-video组件  
    要注意在小程序根目录app.json里声明对组件的依赖，在页面的json里声明对插件的使用。详见ps://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)与示例项目
 *  常见视频播放错误
 *  播放器提示是P.0开头表示捕获到video的binderror事件，  
    可能的原因是MEDIA\_ERR\_SRC\_NOT\_SUPPORTED；MEDIA\_ERR\_DECODE；MEDIA\_ERR\_NETWORK
 *  播放器提示是G.开头，是接口错误，后面提示的数字是返回的错误码
 *  播放器提示是L开头，大概率是触发了逻辑错误

**tips**

1.  playerid必须要全局唯一，可以设置为vid
2.  想实现点击视频任何区域，实现视频全屏，经测试发现ios下，部分机型不能正常捕获到video或者容器的tap事件，推荐视频区域不要用video，假写成一张图片和一个播放按钮，点击的时候全屏播放视频
3.  const TxvContext = requirePlugin(“tencentvideo”);  
    可以打印TxvContext，插件暴露的接口都在这里面
4.  强烈建议在拿到vid后在渲染视频组件 否则会报错，因为视频组件初始化一定要给vid

**Q&A**

*  Q. 谁不能使用这个插件?
 *  A. 个人开发者不能使用视频插件，即使使用了，按理说提审会被拒绝
 *  Q. 视频播放资质问题？
 *  A. 使用视频插件播放不要求小程序主体具有文娱=》视频资质是因为视频插件具有文娱=》视频资质了，如果小程序主体还有用其他方式播放视频，那也需要文娱=》视频资质的。需要注意，如果小程序主体还有其他的需要资质功能，需要自己去办理，详细资质请看
 *  Q. 视频来源
 *  A. 禁止盗播腾讯视频版权视频，盗播是不能正常播放的，其他视频可以免费播放

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/4b4d242bf2de4b7882ada251626cc5d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/89b580a2a6664914bf8c4a456df7776c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/b36f989cab394bdaad84adbd8b85d986.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210725/aac2df8954114438bcf002c6b5c59500.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210725/d48682a6e53c43a4844bfd04b44b4548.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210725/5a4080590538413fbdc3d743afb1adee.png