专栏首页极客起源微信小程序开发实战(15):视频组件(video)

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

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

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

<view style="margin:30px">
  <text >播放网络视频</text>
  <video  style="margin-top:10px"
  src="http://flv.bn.netease.com/videolib3/1605/22/auDfZ8781/HD/auDfZ8781-mobile.mp4" binderror="videoErrorCallback"></video>
</view>

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

图1 video组件的默认效果

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

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

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

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

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

图3 视频错误信息

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

<video … … autoplay="true"></video>

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

<view style="margin:30px">
  <video src="{{src}}" autoplay="true"></video>
  <button bindtap="bindButtonTap">获取视频</button>
</view>

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所示。

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

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

图5 自动播放本地视频

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

wxfile://tmp_766585555o6zAJs2t5tIf5IgXSSAKZjRtz91g1482398885788.mp4

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

<view style="margin:30px">
  <video src="wxfile://tmp_766585555o6zAJs2t5tIf5IgXSSAKZjRtz91g1482398885788.mp4"
     autoplay="true"></video>
  <button bindtap="bindButtonTap">获取视频</button>
</view>

本文分享自微信公众号 - 极客起源(geekculture),作者:geekori

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序开发实战(21):发起HTTPS请求

    在wx对象中有一个request方法,可以发起HTTPS请求。该方法只有一个对象类型参数。该对象支持如下所示。

    蒙娜丽宁
  • Python高效编程之88条军规(1):编码规范、字节序列与字符串

    在微信公众号「极客起源」中输入595586,可学习全部的《Python高效编程之88条军规》系列文章。

    蒙娜丽宁
  • JavaScript和React Native:小程序、iOS App、Android App全搞定

    如果程序员使用React Native开发iOS App和Android App,那么至少和小程序采用的编程语言相同,都是JavaScript。至于布局,wxm...

    蒙娜丽宁
  • JavaScript技术篇-js提升网页视频播放速率,提高慕课网视频播放速度

    document.querySelector(‘video’) 筛选出播放视频的组件,然后直接设置播放速率就搞定了。

    小蓝枣
  • 2017一季度JAVA面试题锦集

    1、如何实现分布式事务,你们公司是怎么解决的? 2、HashMap数据结构及实现原理,其链表是用来解决什么问题的 3、可以自定义java.lang.String...

    Java技术栈
  • 测试自动化与自动化测试:差异很重要

    自动化测试是通过自动化(例如一组回归测试)进行特定测试的行为,而不是手动进行,而测试自动化是指自动化跟踪和管理不同测试的过程。

    FunTester
  • 测试自动化与自动化测试:差异很重要

    自动化测试是通过自动化(例如一组回归测试)进行特定测试的行为,而不是手动进行,而测试自动化是指自动化跟踪和管理不同测试的过程。

    泽阳
  • Nodejs写的爬虫及模拟提交知识分享

    这篇文章 主要学习这两个模块的使用:request-promise-native : https://github.com/request/request-pr...

    javascript.shop
  • oauth2.0实现sso单点登录的方式和相关代码

    百科:SSO英文全称Single Sign On,单点登录。SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。它包括可以将这次主要的...

    Dream城堡
  • Java Web之Servlet获取表单值

    Java Web开发中,最常用的就是在后台获取前台的参数,经典的案例就是 JSP 表单传值到后台的 Servlet,然后在 doGet 或者 doPost 中获...

    YungFan

扫码关注云+社区

领取腾讯云代金券