小程序里多媒体组件的学习（图片和视频，视频可发弹幕）
16-1,认识图片image组件
image组件：主要用来显示图片，可以是本地图片，也可以是网络图片。
官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
当我们不给image设置宽高时，image组件的默认宽度是320px，高度240px。
16-1-1，src属性显示网络图片
我们通过src属性来设置要显示的图片资源，图片资源有两种
本地图片资源
网络图片资源
由于我们本地的图片会占用小程序软件包的大小，所以这里推荐大家尽量使用网络图片。
我们设置显示图片的语法如下
<image src="图片资源地址"></image>
1
如下图，我们显示一个网络图片。
这里给大家两个网络图片地址：
https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg
https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2273029747,2912173232&fm=15&gp=0.jpg
16-1-2，src属性显示本地图片
用image显示本地图片，我们需要提前把图片放在小程序项目里，如下图我们把本地图片放在images目录里，这个images目录需要我们自己新建。
然后在image组件里设置src属性，指向这个本地图片，就可以在小程序里展示了。
我把网络图片和本地图片都在小程序里展示，给大家对比着学习下。
16-1-3，通过mode设置图片裁剪、缩放的模式
image组件另外一个比较重要的属性就是mode了。我们在使用图片时，不能百分之百保证图片的比例正好是我们想要的，这个时候就要用到图片的裁剪和缩放了。
mode 的常用设置如下
值说明scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3top裁剪模式，不缩放图片，只显示图片的顶部区域bottom裁剪模式，不缩放图片，只显示图片的底部区域center裁剪模式，不缩放图片，只显示图片的中间区域left裁剪模式，不缩放图片，只显示图片的左边区域right裁剪模式，不缩放图片，只显示图片的右边区域top left裁剪模式，不缩放图片，只显示图片的左上边区域top right裁剪模式，不缩放图片，只显示图片的右上边区域bottom left裁剪模式，不缩放图片，只显示图片的左下边区域bottom right裁剪模式，不缩放图片，只显示图片的右下边区域
比如我们有一个原图如下。
设置不同的mode值，可以很明显的看出来区别
后面我们需要对图片做裁剪或者伸缩处理时，就可以设置不同的mode值来实现不同的效果。
16-1-4，图片懒加载
小程序里image组件是支持图片懒加载的，当我们一个列表页有很多图片时，我们可以使用懒加载，来加快页面加载速度。使用懒加载时，我们只需要给image设置lazy-load就可以了。
16-2,认识视频video组件
video组件：主要用来实现视频播放。
官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/video.html
16-2-1，src属性设置视频地址
video组件里也是通过src属性来设置视频资源的。这里的视频资源都是网络连接。
我把这几个mp4格式的视频链接贴给大家
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
https://media.w3.org/2010/05/sintel/trailer.mp4
http://vjs.zencdn.net/v/oceans.mp4
如果上面链接失效，我们可以去官方文档拿官方的视频链接
16-2-2，设置视频弹幕属性来显示弹幕
我们上面设置src只能保证视频的正常播放，如果我们想使用弹幕功能，就要为video设置别的属性了。
我们如果想在视频上显示弹幕，就要设置danmu-list属性。可以看出danmu-list属性是一个数组，而这个数组就要放置我们弹幕的一些数据了。
下面我在代码里给大家简单的演示下弹幕的显示。
首先在wxml里设置danmu-list属性，并且给danmu-list绑定数据danmuList
而这个danmuList就要在js里设置了。
我们可以在danmuList的每个弹幕对象里设置弹幕显示的内容，弹幕的颜色，弹幕显示的时间。
通过上图可以看到，我们设置的弹幕成功的显示在了视频上。这样我们就可以轻松的实现弹幕展示功能了。
16-2-3，发送弹幕功能
我们上面只是简单的展示了弹幕，如果我们想让用户发送弹幕该怎么做呢。下面就来教大家实现弹幕的发送功能。
简单起见，我这里设置一个input来获取用户输入的内容，用一个button按钮来触发弹幕的发送。
wxml文件如下：
这里我们特意设置了一个id属性，我们下面发送弹幕时，需要先初始化一个视频对象，而初始化视频对象时就用到了这个id。
js文件如下：
可以看出，我们在onReady页面渲染完成时，初始化了一个视频对象videoContext，然后通过bindInput获取用户输入的弹幕内容。最后在点击发送弹幕按钮时，通过videoContext.sendDanmu来发送弹幕到视频的屏幕上。
到这里，我们发送弹幕的功能也实现了，当然video视频组件还有很多别的属性，这里就不再一个个介绍了。大家可以自己去看官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
持续更新中，敬请关注。。。
视频讲解：
https://www.bilibili.com/video/BV12T4y1E7k6/
站内视频：
