在小程序中使用腾讯视频插件播放教程视频的方法_插件wxa75efa648b60994b - CSDN文库

53 浏览量更新于2023-05-03 收藏 385KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

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

在我们开发的一个小程序里面，为了给客户了解一些教程内容，我们需要增加一个在线播放视频的模块，考虑过直接使用视频组件播放服务器上的视频不

成功，因此使用腾讯视频插件来播放最终测试成功。本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式，并重点介绍视频插件方

式的处理过程。

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

});

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

<view class="container">

<view class="goods-container">

<view id="myVideo" class="goods-box" wx:for-items="{{videos}}" wx:key="{{index}}" data-id="{{item.id}}">

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38711529

粉丝: 4
资源: 901

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈