相信很多人都有在手机上看视频的习惯,比较看视频更真实更形象。那么我们在微信小程序中如何观看视频呢?这就需要video组件的帮忙了。今天我们就给大家演示一下,如何用微信小程序组件video播放视频。我们在网络上随便找了一个简短的视频源。video组件的引用格式如下:

[AppleScript] 纯文本查看 复制代码
1
<video src="http://www.w3school.com.cn//i/movie.mp4" binderror="videoErrorCallback"></video>

我们先来看一下动态效果图:
<ignore_js_op>

主要代码有:

[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
{
  "pages":[
    "copyright/copyright",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "使用video组件播放视频",
    "navigationBarTextStyle":"black"
  }
}

源码下载地址:http://bbs.html51.com/t-1049-1-1/

如何使用微信小程序video组件播放视频的更多相关文章

  1. 微信小程序video组件出现无法播放或卡顿

    微信小程序使用video组件播放视频的时候,会出现卡顿或者无法播放的问题,加一个custom-cache=”true“即可解决,这个属性文档上没有,是从小程序开发社区中get到的.

  2. 微信小程序 - video组件poster无效 / 视频播放列表

    在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...

  3. 微信小程序 video组件 不随页面滚动

    1.页面初始化(滚动前)时,video所在位置 2.页面滚动后,video视频组件所在位置 看了别人家的小程序并不会出现这种状况.最后检查发现,是页面包裹层设置了 height:100% 导致的 顺便 ...

  4. 微信小程序 video组件----真机测试position:fixed无效 且有黑底

    1.问题描述 video组件fixed后,视频随页面滚动,且有个黑色底停留在页面. 页面滚动前 滚动后 这里贴一下修改前代码,在微信开发者工具看是没有任何问题的.在手机端测试就有以上的问题 <v ...

  5. 微信小程序video监测播放进度

    video组件提供的进度相关的监测只有 bindtimeupdate ,官方说明这个函数250ms触发一次,在开发者工具上基本符合,但在真机上每隔1秒触发一次.达不到我们要求的精度.对比下音频,wx. ...

  6. 微信小程序------媒体组件(视频,音乐,图片)

    今天主要是简单的讲一下小程序当中的媒体组件,媒体组件包括:视频,音乐,图片等. 先来看看效果图: 1:图片Image <!-- scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸 ...

  7. 第七篇、微信小程序-video组件

    主要属性: 效果图: ml: <View>1.播放网络视频</View> <view > <video style="width: 100%;hei ...

  8. [小程序开发] 微信小程序audio音频播放组件+api_wx.createAudioContext

    引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/ ...

  9. 微信小程序的组件总结

    本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可 ...

随机推荐

  1. 10.6 Graph Test

    一套图论的练习题,各个方面都有挺好的 第一第二题有一定难度(来源POI),第三第四题比较水 但我并没考好 T1 特工 szp T2 洞穴 zaw T3 最短路 line T4 最小差异值 dvalue

  2. 【NOI 2007】 社交网络

    [题目链接] 点击打开链接 [算法] 首先,跑floyd,计算最短路和最短路径数 然后,计算答案,枚举k,s,t,若dist[s][k] + dist[k][t] = dist[s][t], 那么,点 ...

  3. Newtonsoft.Json序列化日期时间去T的几种方式。

    原文地址:MVC web api 返回JSON的几种方式,Newtonsoft.Json序列化日期时间去T的几种方式. http://www.cnblogs.com/wuball/p/4231343. ...

  4. Wannafly挑战赛29A御坂美琴

    传送门 这套题很有意思2333 蠢了--首先先判总共加起来等不等于\(n\),不是的话就不行 然后dfs记录\(n\)不断分下去能分成哪些数,用map记录一下,判断是否所有数都能被分出来就是了 //m ...

  5. Akka源码分析-Cluster-Singleton

    akka Cluster基本实现原理已经分析过,其实它就是在remote基础上添加了gossip协议,同步各个节点信息,使集群内各节点能够识别.在Cluster中可能会有一个特殊的节点,叫做单例节点. ...

  6. [读书笔记3]《C语言嵌入式系统编程修炼》

    第五章 性能优化   5.1 使用宏定义 在C语言中,宏是产生内嵌代码的唯一方法.对于嵌入式系统而言,为了能达到性能要求,宏是一种很好的代替函数的方法.   写一个"标准"宏MIN ...

  7. ListView(4)取消GridView/ListView item被点击时的效果

    方法一,在代码中设置 gridView.setSelector(new ColorDrawable(Color.TRANSPARENT)); listView.setSelector(new Colo ...

  8. UML中类之间的关系

    UML中类之间的关系分为以下几种:依赖.关联.泛化.聚合.组合. 依赖是指一个类使用了另一个类,它是一种使用关系,描述了一个事物的规格说明的变化可能会影响到使用它的另一个事物(反之不一定).最常见的依 ...

  9. [转]mysql update操作

    转自:http://www.cnblogs.com/ggjucheng/archive/2012/11/06/2756392.html update语法 Single-table语法: UPDATE ...

  10. Javascript中的那些bug

    1. x(比如document) is not defined 不止要检查是不是没有声明变量就使用了,还要检查是不是对象的方法调用写错了!比如: alert( document.getElementB ...