关于小程序当中video小程序基础-组件的使用

摘要： 表示图像的组件、表示视图容器的 组件，表示链接的组件组件的属性公共属性是指小程序所有的组件都有的属性，如id、class、style轮播效果小程序有专门的轮播组件swip...

表示图像的组件、表示视图容器的 组件，表示链接的组件

组件的属性

公共属性是指小程序所有的组件都有的属性，如id、class、style

轮播效果

小程序有专门的轮播组件swiper

<view class="home-top">
    <view class="home-swiper">
        <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicat
orColor}}" indicator-active-color="{{activecolor}}">
          <block wx:for="{{imgUrls}}" wx:key="*this" >
            <swiper-item>
                <image src="{{item}}" style="width:100%;height:200px" class="slide-image" mode="widthFix"  />
            </swiper-item>
          </block>
        </swiper>
    </view></view>

imgUrls: [  'https:40',  'https:640',  'https:640'],interval: 5000,duration: 1000,indicatorDots: true,indicatorColor: "#ffffff",activecolor:"#2971f6",autoplay: true,

audio组件

audio组件是音频组件

<audio src="{{musicinfo.src}}" poster="{{musicinfo.poster}}" name="{{music
info.name}}" author="{{musicinfo.author}}" controls></audio>

 musicinfo: {      poster: 'http://'
      name: '此时此刻',      author: '许巍',      src: ''},

src：要播放音频的资源地址

poster：默认控件上的音频封存的图片资源地址

name：默认控件上的音频名字

author：默认控件上的作者名字

video组件

video组件用来表示视频

<video id="daxueVideo" src="=0"autoplay loop muted initial-time="100" controls event-model="bubble">
</video>

autoplay：是否自动播放

loop：是否循环播放

muted：是否静音播放

inital-time：指定视频初始播放位置，单位是秒

controls：是否显示默认播放控件

cover效果

把view、图片组件覆盖在地图map或视频video组件之上

地图组件

<map
  id="myMap"
  style="width: 100%; height: 300px;"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  markers="{{markers}}"
  covers="{{covers}}"
  show-location></map>

latitude: 22.540503
 longitude: 113.934528, markers: [{      id: 1,      latitude: 22.540503,      longitude: 113.934528,      title: '深圳腾讯大厦'    }],

在地图上标记多个点

markers: [
      {        id: 1,      latitude: 22.540503,      longitude: 113.934528,      title: '深圳腾讯大厦'
      },
      {        id: 2,        latitude: 22.540576,        longitude: 113.933790,        title: '万利达科技大厦'
      },
      {        id: 3,        latitude: 22.522807,        longitude: 113.935338,        title: '深圳腾讯滨海大厦'
      },
      {        id: 4,        latitude: 22.547400,        longitude: 113.944370,        title: '腾讯C2'
      },    
    ],

地图是⼀个⾮常复杂的组件

callout:点击marker出现气泡callout、以及气泡上的label，可以丰富点击地图标记弹出丰富的信息介绍

circle：在地图上显中心圆，或者权重中心点在地图的可视化

polygon：指定x系列坐标点，根据 points 坐标数据组成闭合多边形,，如圈出实际的范围

polyline：指定y系列坐标点，从数组第一项连线到最后一项，如跑步的路线