Giter Club home page Giter Club logo

txv-miniprogram-plugin's Introduction

腾讯视频小程序播放插件

只需要一个vid!!把视频上传到腾讯视频之后得到vid!!就可以在自己的小程序上播放视频了!!流畅到爆!!

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

本github仓库就是一个示例项目

接入方式

申请使用插件 appid:wxa75efa648b60994b

首先,参见微信官方的插件使用文档申请插件权限,在申请使用插件的使用时,填写以下appid:wxa75efa648b60994b

引入插件代码

参见官方文档示例项目,尽量使用最新版本插件,如在使用的过程中遇到问题,可在微信开发社区下查找或者到github提交issues

使用播放器组件

wxml

<txv-video 
  vid="e0354z3cqjp"   // 可使用vid="{{vid}}"的方式应用data变量
  playerid="txv1" 
  autoplay="{{true}}" // 是否自动播放
></txv-video>
// 支持slot,用于在video上显示UI
<txv-video 
  vid="e0354z3cqjp"   // 可使用vid="{{vid}}"的方式应用data变量
  playerid="txv1" 
  width="{{100%}}"    //自定义宽度
  height="{{'auto'}}" // 自定义高度
  autoplay="{{true}}"> // 是否自动播放
  <cover-view class='txv-video-slot'>video slot</cover-view>
</txv-video>

组件元素支持的属性(最新版本基本上小程序的video属性都支持):

  • vid 视频id
  • playerid 播放器标识符,需全局唯一,用于获取Video Context,进而手动控制播放
  • width 视频宽度
  • height 视频高度
  • autoplay 是否自动播放
  • usePoster 是否使用海报图
  • poster 视频海报,会根据视频vid拿一个默认值
  • direction 视频全屏时方向
  • objectFit 视频填充方式
  • controls 视频播放控件
  • showCenterPlayBtn 是否显示中间播放按钮
  • isHiddenStop 是否在不可见区域自动停止播放,默认false,即滑到不可见区域不停止播放
  • isNeedMutex 是否互斥播放,默认true,即播放一个视频另一个播放的视频自动被暂停

/* V1.2.4 */

  • enableDanmu 是否允许弹幕,默认false
  • danmuBtn 是否显示弹幕button,默认false
  • danmuList 弹幕数据列表,具体数据格式请看小程序官网video组件

组件元素支持的事件(最新版本基本上小程序的video事件都支持):

  • bindplay 播放
  • bindpause 暂停
  • bindended 播放结束
  • bindfullscreenchange 全屏
  • bindtimeupdate 播放进度更新事件
  • binderror 视频播放错误信息
  • bindstatechange 播放状态变更事件,包含loading, ready, playing, end, error,回调函数接受两个参数newstate,oldstate

/* V1.2.4 */

  • sendDanmu 发送弹幕,具体数据格式请看小程序官网video组件
  • hideVideo 隐藏视频插件里面的播放器
  • showVideo 显示视频插件里面的播放器(隐藏后再显示目前有些机型会导致不能播放,已经在解决中)
  • showContainer 显示视频插件里面的最外层容器
  • hideContainer 隐藏视频插件里面的最外层容器

插件 js api

const TxvContext = requirePlugin("tencentvideo");

let txvContext = TxvContext.getTxvContext('txv1') // txv1即播放器组件的playerid值

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()  //关闭

最新版本功能

  1. 全局只播放一个视频,并且视频滑出可见区域自动停止播放
  2. 支持slot,由于原生video组件层级限制,slot内容推荐用cover-view
  3. 支持竖屏,海报
  4. 支持广告暂停和全屏

常见问题

  1. 找不到playerid为txv1的txv-video组件 要注意在小程序根目录app.json里声明对组件的依赖,在页面的json里声明对插件的使用。详见ps://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html)与示例项目

  2. 常见视频播放错误 (1)播放器提示 : 播放出错(P.0) 是捕获到video的binderror事件,大概率是网络断了 (2)播放器提示 : 啊哦, 表示获取数据失败,提示的数字是返回的错误码

tips

  1. playerid可以设置为vid
  2. 想实现点击视频任何区域,实现视频全屏,经测试发现ios下,部分机型不能正常捕获到video或者容器的tap事件,推荐视频区域不要用video,假写成一张图片和一个播放按钮,点击的时候全屏播放视频
  3. const TxvContext = requirePlugin("tencentvideo");可以打印TxvContext,插件暴露的接口都在这里面

txv-miniprogram-plugin's People

Contributors

zombieyang avatar aliarmo avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.