引入

  1. {
  2.   "usingComponents": {
  3.     "x-video":"waft-ui/assembly/video/video"
  4.   }
  5. }

代码示例

  1.  <x-video ref="video" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoplay="{{true}}" controls="{{ true }}" loop="{{ true }}"></x-video>

组件样式

axml

  1. <view class="warpper">
  2.   <x-nav-bar showArrow="{{ true }}" title="测试 Video 组件"></x-nav-bar>
  3.   <view style="height: 30rpx"></view>
  4.   <view class="page">
  5.     <view class="flex">
  6.       <view class="btn" onTap="play">播放</view>
  7.       <view class="btn" onTap="pause">暂停</view>
  8.       <view class="btn" onTap="stop">停止</view>
  9.     </view>
  10.     <view class="video">
  11.       <x-video ref="video" full="{{ true }}" mixMode="underlay" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" autoplay="{{true}}" controls="{{ true }}" loop="{{ true }}"></x-video>
  12.     </view>
  13.   </view>
  14. </view>

ts

import { Props, Page } from 'waft';
import { refs } from 'waft-ui-common';
import { Video } from "../../../assembly/video/video";

export class TestVideo extends Page {
  constructor(props: Props) {
    super(props);

    this.addEventListener('play', () => {
      if (refs.get('video') instanceof Video) {
        const component = refs.get('video') as Video;
        component.play();
      }
    });
    this.addEventListener('pause', () => {
      if (refs.get('video') instanceof Video) {
        const component = refs.get('video') as Video;
        component.pause();
      }
    });
    this.addEventListener('stop', () => {
      if (refs.get('video') instanceof Video) {
        const component = refs.get('video') as Video;
        component.stop();
      }
    });
  }
}

API

  • props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | src | 要播放视频的资源地址 | string | | | loop | 是否循环播放 | boolean | false | | autoplay | 是否自动播放 | boolean | false | | muted | 是否静音 | boolean | false | | controls | 是否显示默认播放控件（底部工具条，包括播放/暂定按钮、播放进度、时间） | boolean | false | | poster | 视频封面图的url。如果不传的话，默认取视频的首帧图作为封面图 | string | | | scaleType | 当视频、封面大小和容器大小不一致时，表现形式(fit-center/fitCenter center-crop/centerCrop fit-xy/fitXY) | string | fitCenter | | mixMode | 显示层次，可设置：underlay，置于底层, 默认置于顶层, 底层不显示控制条等 | string | |

  • Events | 事件名 | 说明 | 回调参数 | | —- | —- | —- | | play | 当开始/继续播放时触发play事件 |
    | | pause | 当暂停播放时触发pause事件 | | | ended | 当播放到末尾时触发ended事件 | | | stop | 视频播放终止，恢复到视频首帧，点击播放按钮可以继续播放 | | | error | 当视频播放出错时触发，{“errorCode”:”int 错误码”} | | | timeUpdate | 当播放进度变化时触发，{“currentTime”:’’int 当前进度”, “videoDuration”:”int 视频总时长”} | |

  • ref 方法 | 名称 | 说明 | | —- | —- | | play | 开始播放/继续播放 | | pause | 暂停播放 | | stop | 停止播放，回到初始状态 |