北京pk赛车计划最准:在小程序中使用腾讯视频插件播放教程视频的方法

北京快三走势图 www.mxld9.cn  更新时间:2018年07月10日 11:27:57   作者:伍华聪   我要评论

这篇文章主要介绍了在小程序中使用腾讯视频插件播放教程视频的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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地址,如下所示。

然后在页面的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>

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

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

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

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

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

相关文章

  • 基于JS实现移动端向左滑动出现删除按钮功能

    基于JS实现移动端向左滑动出现删除按钮功能

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,其实实现此功能很简单的。这篇文章主要介绍了基于js实现移动端向左滑动出现删除按钮,需要的朋友可以参考下
    2017-02-02
  • javascript操纵OGNL标签示例代码

    javascript操纵OGNL标签示例代码

    这篇文章主要介绍了javascript 怎么操纵OGNL标签,需要的朋友可以参考下
    2014-06-06
  • js实现微博发布小功能

    js实现微博发布小功能

    本篇文章主要介绍了javascript实现微博发布小功能的示例代码,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript设计模式之模板方法模式原理与用法示例

    JavaScript设计模式之模板方法模式原理与用法示例

    这篇文章主要介绍了JavaScript设计模式之模板方法模式原理与用法,结合实例形式分析了JavaScript模板方法模式的概念、组成、定义、使用等相关操作技巧与注意事项,需要的朋友可以参考下
    2018-08-08
  • JS获取时间的方法

    JS获取时间的方法

    这篇文章主要介绍了JS获取时间的方法,涉及date的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 简单易用的倒计时js代码

    简单易用的倒计时js代码

    倒计时js代码想必大家都有用过,大同小异,本例为大家介绍的是简单易用的,需要的朋友可以参考下
    2014-08-08
  • JavaScript 动态添加表格行 使用模板、标记

    JavaScript 动态添加表格行 使用模板、标记

    在客户端使用JavaScript动态添加表格行,先到网上找了相关的资料,发现有现成做好的组件,发现它只能够满足比较简单的要求。
    2009-10-10
  • bootstrap轮播图示例代码分享

    bootstrap轮播图示例代码分享

    这篇文章主要为大家详细介绍了bootstrap轮播图示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 容易造成JavaScript内存泄露几个方面

    容易造成JavaScript内存泄露几个方面

    这篇文章主要介绍了容易造成JavaScript内存泄露几个方面,本文讲解了多个会在Chrome V8中产生内存泄漏的示例,需要的朋友可以参考下
    2014-09-09
  • JS点击某个图标或按钮弹出文件选择框的实现代码

    JS点击某个图标或按钮弹出文件选择框的实现代码

    本文给大家介绍js点击点击某个图标或按钮弹出文件选择框的实现代码,代码简单易懂,非常不错,感兴趣的朋友可以参考下
    2016-09-09

最新评论

  • 中共中央直属机关党校 2019-04-21
  • 全国自由搏击锦标赛落下帷幕 2019-04-20
  • 近来人民网强国社区的评论少了很多,那是因为人们反映事实存在的问题,绝大多数都是说了等于白说,于是渐渐地失望了,渐渐地越来越多的人“算了,不说了!” 2019-04-19
  • 热巴窦骁携手演绎经典神话 2019-04-19
  • 神奇!沈阳现3D稻田画 2019-04-18
  • 中国和巴基斯坦将合拍电影《天路》 2019-04-18
  • 电视剧抱团出海 又有哪些作品走出了国门 2019-04-17
  • 谈判与加关税的不同在于,后者没有给小左唱赞歌的机会 2019-04-16
  • 全世界人民都要顺应人类社会发展规律,不断扩大社会财富公有制的范围,不断缩小社会财富私有制的范围,以便最终消灭社会财富私有制,建立共产主义社会财富公有制。 2019-04-15
  • 新时代·新征程十九大精神在基层---“各地聚焦”--湖南频道--人民网 2019-04-14
  • 首部由中国人翻译的120回《三国演义》问世 2019-04-14
  • 2022年冬奥会筹备进行时 2019-04-13
  • 牙膏的10个超实用功能 速收藏 2019-04-13
  • 新华保险荆州中支助力首届荆楚文化旅游节开幕 2019-04-12
  • 未来十天 山西以对流性天气为主 多阵性降水 2019-04-12
  • 300| 323| 882| 152| 997| 129| 72| 860| 860| 920|