在小程序中使用腾讯视频插件播放教程视频的方法


Posted in Javascript onJuly 10, 2018

在我们开发的一个小程序里面,为了给客户了解一些教程内容,我们需要增加一个在线播放视频的模块,考虑过直接使用视频组件播放服务器上的视频不成功,因此使用腾讯视频插件来播放最终测试成功。本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式,并重点介绍视频插件方式的处理过程。

1、使用视频组件播放视频

由于是我们自己录制的视频内容,本来想直接通过视频组件来播放自己服务器上的视频,理想很丰满,现实很骨感,不知道是视频内部比较大的原因还是腾讯禁止,虽然在开发工具上测试的时候可以播放,不过最终发布测试的时候不能播放视频,不过这里也顺带介绍一下基于视频组件的播放处理方式吧。

最简单的代码应该如下所示。

<video src="{{src}}" controls ></video>

不过我们一般还可以使用视频组件的其他参数(如果需要的话),详细的说明可以参考地址:https://developers.weixin.qq.com/miniprogram/dev/component/video.html

为了实现动态的URL的数据绑定,我们可以把一些变量放到一个独立的文件中,也可以根据API接口动态获取。

例如我在一个Config.js里面放置一个固定的待播放视频的数组,如下所示

videos: [
  { id: 0, src: '字典管理模块介绍.mp4', poster: '字典管理模块介绍.png', vid:'i0690agm8uf'},
  { id: 1, src: '分页控件介绍.mp4', poster: '分页控件介绍.png', vid: 'f06919dlvi9'},
  { id: 2, src: '公用类库介绍.mp4', poster: '公用类库介绍.png', vid: 'p0686rsvwbx'},
  { id: 3, src: '混合框架之WebAPI接入的增量开发过程.mp4', poster: '混合框架之WebAPI接入的增量开发过程.png', vid: 'd0688o38mkk'},
  { id: 4, src: 'Winform框架增量开发过程.mp4', poster: 'Winform框架增量开发过程.png', vid: 'f06919dlvi9'},
  { id: 5, src: '混合框架图片显示及存储.mp4', poster: '混合框架图片显示及存储.png', vid: 'f06919dlvi9'},
  { id: 5, src: '混合框架增量开发过程.mp4', poster: '混合框架增量开发过程.png', vid: 'e0686jwu3ff'},
 ],

然后同时定义一个基础的URL地址,如下所示。

video_base_url:https://www.iqidi.com/doc/Video/,

在小程序中使用腾讯视频插件播放教程视频的方法

然后在页面的JS文件里面,我们可以引入这个文件,并给页面对象赋值。

//获取配置的地址
const config = require("../../utils/config.js");

Page({

 /**
 * 页面的初始数据
 */
 data: {
 videos:[],
 video_base_url:'',
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 that.setData({
  videos: config.videos,
  video_base_url: config.video_base_url
 });

然后在界面上定义好视频组件即可。

<!--pages/Video/index.wxml-->
<!--1px = 750/320 = 2.34rpx;-->
<view class="container">
 <view class="goods-container">
  <view id="myVideo" class="goods-box" wx:for-items="{{videos}}" wx:key="{{index}}" data-id="{{item.id}}">
   <view class="goods-title">{{item.src}}</view>
   <video class="goods-video" id="{{item.id}}" src="{{video_base_url}}{{item.src}}" controls></video>
  </view>
 </view>
</view>

这样我们可以在开发工具上看到视频的展示了,而且也可以播放,不过悲剧的是无法发布在手机上看到视频,这个也是介绍使用腾讯视频播放插件的原因。

在小程序中使用腾讯视频插件播放教程视频的方法

2、使用腾讯视频插件播放视频

既然我们无法直接播放自己服务器上的视频,那么我们把它上传到腾讯视频服务器上试试,并且使用腾讯视频的小程序插件来处理。

注册一个腾讯视频的账号,然后在客户端上上传自己的视频内容。

在小程序中使用腾讯视频插件播放教程视频的方法

上传成功视频后,我们打开视频播放,在右侧的视频信息里面找到如下菜单

在小程序中使用腾讯视频插件播放教程视频的方法

然后查看网页信息,可以看到视频的vid参数了。

在小程序中使用腾讯视频插件播放教程视频的方法

腾讯视频插件就是使用这个vid参数进行播放的。

在使用视频插件之前,我们先来介绍如何获得这个插件,小程序插件需要开发者同意才能获得使用权,我们可以在小程序的【设置 -> 第三方服务】里面看到对应的入口。

在小程序中使用腾讯视频插件播放教程视频的方法

添加相应的插件,这里是腾讯视频,如下所示。

在小程序中使用腾讯视频插件播放教程视频的方法

添加视频后,可以获得视频的APPID进行使用,如下是这个插件的信息。

在小程序中使用腾讯视频插件播放教程视频的方法

官方的介绍和使用页面代码如下

在小程序中使用腾讯视频插件播放教程视频的方法

不过使用这个小程序的插件还是需要遵循小程序使用插件的几个步骤,详细说明如下所示。

首先需要在app.json里面加入插件的声明,如下所示。

在小程序中使用腾讯视频插件播放教程视频的方法

在页面JS代码里面加入插件对象的定义,如果没有在脚本里面使用视频插件,那么也可以不用这行代码

const txvContext = requirePlugin("tencentvideo");

在页面里面加入如下代码

<!--pages/Video/index.wxml-->
<!--1px = 750/320 = 2.34rpx;-->
<view class="container">
 <view class="goods-container">
  <view id="myVideo" class="goods-box" wx:for-items="{{videos}}" wx:key="{{index}}" data-id="{{item.id}}">
   <view class="goods-title">{{item.src}}</view>
   <txv-video class="goods-video" vid="{{item.vid}}" playerid="txv{{item.id}}" autoplay="{{false}}"></txv-video>
  </view>
 </view>
</view>

最后注意项目的调试基础类库,选择比较新的,否则有时候太低版本估计开发工具都无法测试通过,我就是忘记修改这里的基础库,导致一直出错还是没有找到原因。

在小程序中使用腾讯视频插件播放教程视频的方法

最终手机上测试的效果如下所示,唯一遗憾的就是每个视频都要播放一段广告,郁闷。

在小程序中使用腾讯视频插件播放教程视频的方法

总的来说,使用小程序插件还是非常方便简洁的,不过第一次使用总是多少碰到一些问题,慢慢习惯就好了。

还有腾讯视频放在腾讯服务器,也可以减轻自己服务器的访问压力,还可以分享给其他朋友,也是很好的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
Vue+webpack实现懒加载过程解析
Feb 17 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 #Javascript
ng-alain表单使用方式详解
Jul 10 #Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 #Javascript
React之PureComponent的使用作用
Jul 10 #Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 #Javascript
echarts整合多个类似option的方法实例
Jul 10 #Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 #Javascript
You might like
php实现按照权重随机排序数据的方法
2015/01/09 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
javascript中的面向对象
2017/03/30 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
Python包argparse模块常用方法
2021/06/04 Python
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers