在小程序里播放视频是很常见的功能。在本文里，我们来看一看怎么在微信小程序里开发一个播放视频的功能。本文将使用uni-app+腾讯视频来实现。

uni-app

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见 (opens new window)）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

腾讯视频插件

ThumbPlayer-Miniprogram 腾讯视频小程序播放器SDK，适用于手Q和微信小程序的播放器插件，开箱即用无需配置。仅支持自有腾讯视频创作号上传内容播放。腾讯视频插件分为1.x版本和2.x版本，因为2.x版本提供了视频的播放、暂停、重播等功能的使用说明，本文里将使用2.x版本来实现。

申请腾讯视频插件

想要使用腾讯视频插件，必须在微信小程序里先申请该插件的使用。

打开微信公众平台，使用小程序的微信管理员账号扫码登录，在左侧菜单栏最底下，找到设置。

选择第三方设置选项卡，插件管理中添加插件

点击详情查看文档，并获取插件的appid跟版本号

点击开发文档，查看如何引入和使用该插件。

创建项目

uni-app可以使用HBuildX作为开发工具，点击HBuildX下载链接进行下载安装。还需要安装微信开发工具。

HBuildX安装以后，打开文件=>新建=>项目，选择uni-app项目进行创建

创建以后目录结构如图，选择mainfest.json文件进行编辑，编辑后会自动保存。

点击基础配置，获取uni-app的AppId

点击微信小程序配置，输入微信小程序的AppId

点击源码视图，引入腾讯视频插件代码包

"mp-weixin" : {"appid" : "","setting" : {"urlCheck" : false},"usingComponents" : true，"plugins":{"player": {"version": "2.1.1","provider": "wxa75efa648b60994b"}}
}

选择pages.json进行编辑，在页面内进行插件引入插件

"pages": [ {"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app","usingComponents": {"player-component": "plugin://player/video",}}}...
],

这样我们就能在页面内使用腾讯视频插件播放视频了，首先到腾讯视频网站上传或者找到一个想播放的视频，获取vid，比如生活小知识：樱桃是常见的一种水果，很有营养价值，但有些人不能吃

<template><view><player-component vid="p0743x9grjv"></player-component></view>
</template>

控制视频播放/暂停

有时候我们需要对视频的播放、暂停进行控制。下面介绍一些常用到的api

# 获取播放器实例
const store = requirePlugin('player')
// index.wxml 中 <video id="tvp-id" playerId="tvp">
const player = store.get('tvp');
// 或
const player = this.selectComponent('#tvp-id');# 打开/关闭调试日志
store.openLog();
store.closeLog();# 播放
const player = store.get('player')
player.play() // 调用小程序videoContext.play()
player.play('想播放的vid') // 播放指定vid
player.play('想播放的vid', { startTime: 5 }) // 指定起播的时间# 跳转/暂停/停止
const player = store.get('player')
player.pause(); // 暂停，同videoContext.pause()
player.stop(); // 停止，同videoContext.stop()
player.seek(5); // 跳转，同videoContext.seek()# 重播
const player = store.get('player')
player.replay();# 设定清晰度
const player = store.get('player')
player.setLevel('fhd')
player.setLevel('fhd').catch(error => {// error处理
})# 播放器支持的video标签事件
'play',
'pause',
'ended',
'timeupdate',
'waiting',
'error',
'progress',
'loadedmetadata',
'controlstoggle',
'seekcomplete',
'fullscreenchange',# 播放器支持的video标签属性
/*** 指定视频初始播放位置*/initialTime: {type: NumberConstructor,value: number, // 0}/*** 是否使用ui，这里是设置总体UI开关。*/controls: {type: BooleanConstructor,value: boolean, // true},/*** 是否静音播放*/muted: {type: BooleanConstructor,value: boolean, // false},/*** 设置全屏时视频的方向，不指定则根据宽高比自动判断*/direction: {type: NumberConstructor,value: number, // -1},/*** 屏幕锁*/showScreenLockButton: {type: BooleanConstructor,value: boolean, // false}/*** 当视频大小与 video 容器大小不一致时，视频的表现形式*/objectFit: {type: StringConstructor,value: string, // 'contain'},/*** 是否开启播放手势，即双击切换播放/暂停*/enablePlayGesture: {type: BooleanConstructor,value: boolean, // false},/*** 当跳转到本小程序的其他页面时，是否自动暂停本页面的视频播放*/autoPauseIfNavigate: {type: BooleanConstructor,value: boolean, // true},/*** 当跳转到其它微信原生页面时，是否自动暂停本页面的视频*/autoPauseIfOpenNative: {type: BooleanConstructor,value: boolean, // true},/*** 是否开启手机横屏时自动全屏，当系统设置开启自动旋转时生效*/enableAutoRotation: {type: BooleanConstructor,value: boolean, // false},/*** 是否开启投屏*/showCastingButton: {type: BooleanConstructor,value: boolean, // false},/*** 非全屏模式下音量/亮度手势*/vslideGesture: {type: BooleanConstructor,value: boolean, // false},/** 全屏下模式下音量/亮度手势 */vslideGestureInFullscreen: {type: BooleanConstructor,value: boolean, // true},/*** 是否使用进度条手势*/enableProgressGesture: {type: BooleanConstructor,value: boolean, // true},/*** 是否自动播放*/autoplay: {type: BooleanConstructor,value: boolean, // true},/** 是否显示进度条 */showProgress: {type: BooleanConstructor,value: boolean, // true},

欢迎关注

最后，欢迎大家关注我的公众号呀。打开微信搜索程序猿零壹公众号即可关注，希望能与大家共同进步。

在uni-app中使用腾讯视频插件播放视频相关推荐

微信小程序（或uniapp）引入腾讯视频插件播放视频
1.申请插件注意:个人开发者无法使用登录微信公众平台,在你的小程序后台的设置-第三方服务-插件管理,搜索插件并点击添加. 添加成功之后,点击详情,查看该插件的具体信息. 拿到该插件的appid以及 ...
在小程序中使用腾讯视频插件播放教程视频
在我们开发的一个小程序里面,为了给客户了解一些教程内容,我们需要增加一个在线播放视频的模块,考虑过直接使用视频组件播放服务器上的视频不成功,因此使用腾讯视频插件来播放最终测试成功.本篇随笔介绍微信小程 ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
如何实现web浏览器无插件播放视频监控直播？
很多年前,监控视频的直播只能够进行单一的服务器传输,而如今,很多网站已经可以观看视频直播了,不过大多网站观看视频直播的时候还是需要下载插件,有时候就会碰到系统不兼容.版本不对应等问题,那么能不能实现w ...
微信公众号如何实现视频列表播放视频的功能
原创文章,2020-1-7,载转请说明来自CSDN 微信公众号如何实现视频列表播放视频的功能使用场景要求: 在微信公众号中,添加多个视频,且可实现视频列表的连播功能. 要求观看视频时无广告.稳定流畅 ...
unity 使用ump插件播放视频，打包发布后黑屏或者在别人电脑上运行黑屏，解决方案
unity 使用ump插件播放视频 ,打包发布后黑屏或者在别人电脑上运行黑屏,解决方案. ump插件下载最近在项目里面需要接入海康监控并在unity中显示,我选择使用ump 插件播放视频, 刚开 ...
公众号如何实现视频列表播放视频的功能
阿酷TONY原创文章,2020-1-14 公众号如何实现视频列表播放视频的功能使用场景要求: 在公众号中,添加视频列表播放的效果 1.创建视频列表专辑进入酷播云管理平台,打开"视频列表& ...
Unity3d C# 使用Universal Media Player（ump）插件播放视频的众坑之无法播放视频和VLC播放器依赖的问题
前言 Ump播放视频的坑,相信很多人都踩过了很多了,这个问题是必须VLC播放器的问题,我默认导入UMP Pro Win Mac Linux WebGL 2.0.3后,设置界面是这样的: 并且无法去除U ...
华为服务器视频无法播放视频文件夹,服务器上的视频文件
服务器上的视频文件内容精选换一换华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务. 语音文件和视 ...
某盘视频网页播放视频修改播放速度代码
某网盘视频网页播放控制速度代码 F12打开开发者模式,点击console,粘上下面的代码按回车 videojs.getPlayers("video-player").html5pl ...

在uni-app中使用腾讯视频插件播放视频