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


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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
Feb 29 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
Vue实现动态显示textarea剩余字数
May 22 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
js尾调用优化的实现
May 23 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
Yii rules常用规则示例
2016/03/15 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
2016/06/21 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
深入分析python中整型不会溢出问题
2018/06/18 Python
python3+pyqt5+itchat微信定时发送消息的方法
2019/02/20 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
初一新生军训方案
2014/05/22 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
音乐研修感悟
2015/11/18 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
Android中View.post和Handler.post的关系
2022/06/05 Java/Android
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android