精选文章 微信小程序开发实战(15):视频组件(video)

微信小程序开发实战(15):视频组件(video)

作者:蒙娜丽宁 时间: 2020-07-27 02:24:51
蒙娜丽宁 2020-07-27 02:24:51

-----------支持作者请转发本文-----------

video组件用于播放网络或本地视频。video组件中最常用的属性是src,用于指定视频文件的路径,例如,下面的布局代码会播放一个网络视频文件。


  播放网络视频
  

一开始运行,视频并未自动播放,效果如图1所示。

微信小程序开发实战(15):视频组件(video)1

图1  video组件的默认效果

点击播放按钮后,开始播放视频,效果如图2所示。

微信小程序开发实战(15):视频组件(video)2

图2 video组件播放视频的效果

在前面的布局代码中,video组件还指定了binderror属性,该属性指定了如果视频文件播放出错(如路径不对),将调用的方法。该方法的代码如下:

videoErrorCallback: function (e) {
  console.log('视频错误信息:');
  console.log(e.detail.errMsg);
}

如果视频播放出差,会在Console中输出如图3所示的日志信息。

微信小程序开发实战(15):视频组件(video)3

图3  视频错误信息

如果要让视频在装载后自动播放,需要使用autoplay属性,该属性值为true,视频会自动播放,布局代码如下:


下面看一下如何让video组件播放本地视频。首先在video组件下面放置一个button,点击该button,会弹出一个选择视频文件对话框,选择本地视频文件后,会自动在video组件中播放。布局代码如下:


  
  

 video组件的src属性和src变量绑定,点击button后,会调用bindButtonTap方法,该方法的实方法如下:

Page({
  data:{
    src:""
  },
  bindButtonTap:function(){
    var that = this;
      wx.chooseVideo({
      sourceType:['album','camera'],
      maxDuration:60,
      camera:['front','back'],
      success:function(res){
        that.setData({
          src:res.tempFilePath
        })
        console.log(res.tempFilePath);
      }
    })
  },
  … …
})

从这段代码看出,bindButtonTap通过调用wx.chooseVideo方法弹出了选择视频文件的对话框,如图4所示。

微信小程序开发实战(15):视频组件(video)4

图4  选择视频对话框(Mac OS X)

当选择一个视频文件后,会自动播放该视频,效果如图5所示。

微信小程序开发实战(15):视频组件(video)5

图5  自动播放本地视频

从日志输出结果中可以看到,本地文件名如下:

wxfile://tmp_766585555o6zAJs2t5tIf5IgXSSAKZjRtz91g1482398885788.mp4

该文件名以wxfile开头,是小程序生成的一个临时文件,将视频文件路径直接赋给src属性也可以播放,布局代码如下:


  
  

对本文感兴趣,可以加李宁老师微信公众号(unitymarvel):

微信小程序开发实战(15):视频组件(video)6

关注  极客起源  公众号,获得更多免费技术视频和文章。

微信小程序开发实战(15):视频组件(video)7

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:四、瞬时响应-高性能网站架构

下一篇:vnc viewer免费版,6款vnc viewer免费版

您可能感兴趣

  • 【面试】面试经历

    2020年面试经历 2020年6月4日 深信服科技 数据库专家 失败。缺乏亮点 1,编程能力体现2,调试能力体现。 总结:不是做了什么,会用什么,而是你项目中的亮点和能力体现 2019年6月24日11:00 am. 艾锐势科技(深圳)有限公司 主要做通信的,嵌入式毕竟多,但是上来就问我愿意做后台开发还是做嵌入式开发。我直接说后台服务器开发(败笔,人家没有这个东西),他们说自己主要做嵌入式,也...

  • 《重新定义公司》读书笔记

    激励偏向的是事成之后的利益分享,而赋能强调的,是激起创意人的兴趣与动力,给予挑战。唯有发自内心的志趣,才能激发持续的创造,命令则不适用于他们。因此,组织的职能不再是分派任务和监工,而更多的是让员工的专长、兴趣和客户的问题有更好的匹配,这往往要求更多的员工自主性、更高的流动性和更灵活的组织。我们甚至可以说,是员工使用了组织的公共服务,而不是公司雇用了员工。两者的根本关系发生了颠倒。 年少时,第...

  • 【转】Microsoft Teams快速上手系列-01Teams的前世今生

    说到Teams,这到底是一个什么产品?有人说它是团队协作工具,有人说它是云视频系统,有人说它是Hub,还有人说它是微软有史以来发展最快的一个产品,还有人说它完全是一个高效办公神器。其实都是对的。 Teams集成了SharePoint和OneDrive的功能,以微软的Lync/Skype for Business为底层进行研发,同时又增加了自身更多的功能,还能通过“插件”的形式打通当今市场上的...

  • 江苏谋定特色小镇-农业大健康·万祥军:旅游理念经营产业

    江苏谋定特色小镇-农业大健康·万祥军:旅游理念经营产业 新闻中国采编网 中国新闻采编网 谋定研究中国智库网 经信研究 国研智库 国情讲坛 哲商对话 万赢信采编 :“希望各地会后抓紧时间对培育建设对象进行梳理,根据标准推荐重点对象,有计划、有步骤地组织实施,努力打造富有鲜明个性、成效显著的特色旅游小镇。”特色旅游小镇培育工作座谈会江苏省旅游局局领导詹庚庆表示,江苏省计划通过“十三五”的努力,加...

  • Python很难学吗?网友直呼:原来学霸是这样的,那我也可以!

    很多人觉得Python难学,学着学着,就从入门学到放弃了,那学霸们,是如何来学习Python的呢?学霸优秀且异于常人,当然是有原因的,包括学习方法,资料,自律等等的因素,小编觉得这其中最重要的,莫过于他们手中的学习清单了吧,今天,一向宠粉的小编,给小伙伴们整理了学霸们的Python学习清单 Python是以简单易学著名的,自学的话是完全可以学会的。 除此之外呢,小编还给大家准备了一份大礼,P...

  • 云上实践·布局未来 | 走进有孚网络云计算数据中心

    2020年7月24日晚,以“新基建:数据中心创新之路”为主题的2020年(第十九届)中国互联网大会数据中心论坛在线上成功举办。论坛在央视网、央视影音、爱奇艺、新浪科技、搜狐科技、第一视频、抖音、bilibili 等24家直播平台同步直播,累计播放量破百万。 有孚网络华北总经理、北京市通信行业协会副理事长商彦强博士发表了题为“云上实践·布局未来 | 走进有孚云计算数据中心”的演讲。商博士从“数...

  • Netflix 微服务架构设计解析

    1 概述 数年来,Netflix 一直是全球体验最好的在线订阅制视频流媒体服务,其流量占全球互联网带宽容量的 15%以上。 在过去的2019 年,Netflix 已经有 1.67 亿名订阅用户,平均每个季度新增 500 万订户,服务覆盖全球 200 多个国家 / 地区。 Netflix 用户每天在 4000 多部电影和 47000 集电视剧上花费超过 1.65 亿小时的时间。从工程角度看,这...

  • “分库分表”与“NewSQL”如何选择?

    “ 最近与同行交流,经常被问到分库分表与分布式数据库如何选择。 图片来自 Pexels 网上也有很多关于中间件+传统关系数据库(分库分表)与 NewSQL 分布式数据库的文章,但有些观点与判断是我觉得是偏激的,脱离环境去评价方案好坏其实有失公允。 本文通过对两种模式关键特性实现原理对比,希望可以尽可能客观、中立的阐明各自真实的优缺点以及适用场景。 NewSQL 数据库先进在哪儿? 首先关于“...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。