当前位置:首页 > 编程教程 > javascript技术文章 > 在小程序中使用腾讯视频插件播放教程视频的方法

小程序中用腾讯视频插件播放教程视频的实例讲解

  • 发布时间:
  • 作者:码农之家
  • 点击:87

这篇文章主要知识点是关于小程序、腾讯视频插件、微信小程序视频插件、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

微信小程序开发:入门与实践
  • 类型:小程序大小:92.7 MB格式:PDF作者:雷磊
立即下载

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

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

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>

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

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

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 微信小程序动态添加分享数据的实操方法
  • 微信小程序分享效果: js代码: page({ /** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: function (res) { var that = this; return { title: that.data.common.act_name, desc: that.data.common.introduction, path: /pages/xiangqing/xiangqing?id=+that.data.id, success: function (res) { // 转发成功 }, fail: function (res) { // 转发失败 } } }}) 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。 ……

  • 微信小程序视图容器创建轮播图实例
  • 本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下 一、视图容器(Swiper) 1、swiper:滑块视图容器 微信官方文档 二、swiper应用 1、页面逻辑(index.js) Page({ data: { imgUrls: [ { link: /pages/index/index, url: /images/001.jpg }, { link: /pages/list/list, url: /images/002.jpg }, { link: /pages/list/list, url: /images/003.jpg } ], indicatorDots: true, //小点 indicatorColor: white,//指示点颜色……

  • 实例解析微信小程序实现图片滚动效果
  • 本文实例讲述了微信小程序实现图片滚动效果。分享给大家供大家参考,具体如下: 效果:左右滑动可以切换展示图片 代码: !--pages/test/test.wxml--!-- 组件 --swiper swiper-item wx:for={{imgUrls}} image src={{item}} width=335 height=150 mode=widthFix class=img / /swiper-item/swiper pages/test/test.js: Page({ data: { imgUrls:[ https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=8b20fba45e6034a829b7b087fb23656c/14ce36d3d539……

  • 微信小程序三级联动选择器实例用法
  • 本文实例为大家分享了微信小程序三级联动选择器的具体代码,供大家参考,具体内容如下 效果图 实现原理 利用微信小程序的picker组件,其中: 1,普通选择器:mode = selector实现一级选择实例; 2,省市区选择器:mode = region实现省市区三级联动; 3, 多列选择器:mode = multiSelector实现二级和三级联动的10以内数字的乘法。 WXML view class=tui-picker-content view class=tui-picker-name一级选择实……

  • 小程序顶部导航栏滑动tab效果实现的方式代码
  • 小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下 效果图: 首先是滑动的效果: scroll-view scroll-x=true /scroll-view 小程序使用/scroll-view,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index4的时候,导航栏下面的省略号加上 (因为tab-nac的border-bottom只能显示到第五个分类) scroll-view scroll-x=true !-- tab -- view class=tab vi……

    相关电子书
    学习笔记

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757