Waft容器 1.6+ Waft前端框架 0.7+

使用

=1.6容器，video组件支持enableNative开启同层渲染
<1.5容器，video组件为异层渲染（和文档流不在一个层级），需要通过mix-mode属性来控制在上层还是下层。

组件演示

axml

```html

play

pause

stop

seek

loop

autoplay

muted

enableNative

controls

属性信息：

play: {{play}}

pause: {{pause}}

stop: {{stop}}

seek: {{seek}}

autoplay: {{autoplay}}

loop: {{loop}}

controls: {{controls}}

muted: {{muted}}

enableNative: {{enableNative}}

onPlay: {{onPlay}}

onPause: {{onPause}}

onStop: {{onStop}}

onEnded: {{onEnded}}

onError: {{onError}}

onTimeUpdate: {{onTimeUpdate}}

视频上方

0.7 倍 1.0 倍 1.2 倍 1.5 倍 2.0 倍

<a name="IohQm"></a>
#### css
```css
.warpper {
  background-color:white;
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container{
  flex: 1;
  color: #999;
  line-height: 30rpx;
  font-size: 16rpx;
  width: 100vw;
}
.flex{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.buttons{
  padding-left: 20rpx;
  padding-right: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid darkgoldenrod;
}
.button{
  margin-bottom: 10rpx;
  margin-right: 20rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
  border-radius: 8rpx;
  background-color: #ccc;
}
.tip{
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 20rpx;
  background-color: #25b864;
  color: #fff;
}
.text{
  color: red;
}
.item{
  width: 25%;
}
.vodeo_outside{
  background-color: rgb(8, 100, 238);
  width: 80vw;
  height: 250rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.video{
  width: 50vw;
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video_inside{
  background-color: rgb(117, 213, 8);
  height: 50rpx;
  width: 30vw;
}

ts

import { JSON, JSONObject, JSONArray } from "waft-json";
import { console, getDataSource, Page, Props, WaftBridge, MessageEvent, setTimeout, document } from "waft";
let _this: Index;
export class Index extends Page {
  constructor(props: Props){
    super(props);
    _this = this;
    // 设置默认的state
    this.setState(getDataSource());
    this.addEventListener('play', () => {
      console.log('=============onPlay==================')
      const newState = new JSONObject;
      newState.set('play', '点击了play按钮')
      newState.set('stop', '')
      newState.set('seek', '')
      newState.set('pause', '')
      _this.setState(newState)
      let props = new JSONArray();
      props.push(document.querySelector("#myVideo").props.componentId);
      WaftBridge.call("render.component.video", "play", props.toString());
    })
    this.addEventListener('pause', () => {
      console.log('=============pause==================')
      const newState = new JSONObject;
      newState.set('pause', "点击了pause按钮")
      newState.set('play', "")
      newState.set('stop', "")
      newState.set('seek', "")
      _this.setState(newState)
      let props = new JSONArray();
      props.push(document.querySelector("#myVideo").props.componentId);
      WaftBridge.call("render.component.video", "pause", props.toString());
    })
    this.addEventListener('stop', () => {
      console.log('=============stop==================')
      const newState = new JSONObject;
      newState.set('stop', "点击了stop按钮")
      newState.set('seek', "")
      newState.set('pause', "")
      newState.set('play', "")
      _this.setState(newState)
      let props = new JSONArray();
      props.push(document.querySelector("#myVideo").props.componentId);
      WaftBridge.call("render.component.video", "stop", props.toString());
    })
    this.addEventListener('seek', () => {
      console.log('=============seek==================')
      const newState = new JSONObject;
      newState.set('seek', "点击了seek按钮")
      newState.set('pause', "")
      newState.set('play', "")
      newState.set('stop', "")
      _this.setState(newState)
      let param = new JSONObject;
      param.set('position', 10000);
      let props = new JSONArray();
      props.push(document.querySelector("#myVideo").props.componentId);
      props.push(param);
      WaftBridge.call("render.component.video", "seek", props.toString());
    })
    this.addEventListener('loop', () => {
      console.log('=============loop==================')
      const newState = new JSONObject;
      newState.set('video', false)
      newState.set('play', '')
      newState.set('pause', '')
      newState.set('stop', '')
      newState.set('seek', '')
      newState.set('onPlay', '')
      newState.set('onPause', '')
      newState.set('onStop', '')
      newState.set('onEnded', '')
      newState.set('onError', '')
      newState.set('onTimeUpdate', '')
      _this.setState(newState)
      setTimeout(() => {
        const loop = _this.state.getBool('loop')
        const _newState = new JSONObject;
        _newState.set('loop', !loop)
        _newState.set('video', true)
        _this.setState(_newState)
      }, 10)
    })
    this.addEventListener('autoplay', () => {
      console.log('=============autoplay==================')
      const newState = new JSONObject;
      newState.set('video', false)
      newState.set('play', '')
      newState.set('pause', '')
      newState.set('stop', '')
      newState.set('seek', '')
      newState.set('onPlay', '')
      newState.set('onPause', '')
      newState.set('onStop', '')
      newState.set('onEnded', '')
      newState.set('onError', '')
      newState.set('onTimeUpdate', '')
      _this.setState(newState)
      setTimeout(() => {
        const autoplay = _this.state.getBool('autoplay')
        const _newState = new JSONObject;
        _newState.set('autoplay', !autoplay)
        _newState.set('video', true)
        _this.setState(_newState)
      }, 10)
    })
    this.addEventListener('muted', () => {
      console.log('=============muted==================')
      const newState = new JSONObject;
      newState.set('video', false)
      newState.set('play', '')
      newState.set('pause', '')
      newState.set('stop', '')
      newState.set('seek', '')
      newState.set('onPlay', '')
      newState.set('onPause', '')
      newState.set('onStop', '')
      newState.set('onEnded', '')
      newState.set('onError', '')
      newState.set('onTimeUpdate', '')
      _this.setState(newState)
      setTimeout(() => {
        const muted = _this.state.getBool('muted')
        const _newState = new JSONObject;
        _newState.set('muted', !muted)
        _newState.set('video', true)
        _this.setState(_newState)
      }, 10)
    })
    this.addEventListener('enableNative', () => {
      console.log('=============muted==================')
      const newState = new JSONObject;
      newState.set('video', false)
      newState.set('play', '')
      newState.set('pause', '')
      newState.set('stop', '')
      newState.set('seek', '')
      newState.set('onPlay', '')
      newState.set('onPause', '')
      newState.set('onStop', '')
      newState.set('onEnded', '')
      newState.set('onError', '')
      newState.set('onTimeUpdate', '')
      _this.setState(newState)
      setTimeout(() => {
        const enableNative = _this.state.getBool('enableNative')
        const _newState = new JSONObject;
        _newState.set('enableNative', !enableNative)
        _newState.set('video', true)
        _this.setState(_newState)
      }, 10)
    })
    this.addEventListener('controls', () => {
      console.log('=============muted==================')
      const newState = new JSONObject;
      newState.set('video', false)
      newState.set('play', '')
      newState.set('pause', '')
      newState.set('stop', '')
      newState.set('seek', '')
      newState.set('onPlay', '')
      newState.set('onPause', '')
      newState.set('onStop', '')
      newState.set('onEnded', '')
      newState.set('onError', '')
      newState.set('onTimeUpdate', '')
      _this.setState(newState)
      setTimeout(() => {
        const controls = _this.state.getBool('controls')
        const _newState = new JSONObject;
        _newState.set('controls', !controls)
        _newState.set('video', true)
        _this.setState(_newState)
      }, 10)
    })
    this.addEventListener('onPlay', () => {
      console.log('=============onPlay==================')
      const newState = new JSONObject;
      newState.set('onPlay', 'onPlay 被触发')
      newState.set('onPause', '')
      newState.set('onStop', '')
      newState.set('onEnded', '')
      newState.set('onError', '')
      _this.setState(newState)
    })
    this.addEventListener('onPause', () => {
      console.log('=============onPause==================')
      const newState = new JSONObject;
      newState.set('onPause', 'onPause 被触发')
      newState.set('onPlay', '')
      newState.set('onStop', '')
      newState.set('onEnded', '')
      newState.set('onError', '')
      _this.setState(newState)
    })
    this.addEventListener('onStop', () => {
      console.log('=============onPause==================')
      const newState = new JSONObject;
      newState.set('onStop', 'onStop 被触发')
      newState.set('onPlay', '')
      newState.set('onPause', '')
      newState.set('onEnded', '')
      newState.set('onError', '')
      _this.setState(newState)
    })
    this.addEventListener('onEnded', () => {
      console.log('=============onPause==================')
      const newState = new JSONObject;
      newState.set('onEnded', 'onEnded 被触发')
      newState.set('onStop', '')
      newState.set('onPlay', '')
      newState.set('onPause', '')
      newState.set('onError', '')
      _this.setState(newState)
    })
    this.addEventListener('onError', () => {
      console.log('=============onPause==================')
      const newState = new JSONObject;
      newState.set('onEnded', '')
      newState.set('onStop', '')
      newState.set('onPlay', '')
      newState.set('onPause', '')
      newState.set('onError', 'onError 被触发')
      _this.setState(newState)
    })
    this.addEventListener('onTimeUpdate', (event) => {
      const detail = event.toJSONObject().get('detail')
      // console.log('=============onTimeUpdate=================='+detail.toString())
      const newState = new JSONObject;
      newState.set('onTimeUpdate', detail.toString())
      _this.setState(newState)
    })
  }
  onShow(): void{
    // 页面显示
    console.log('page onShow');
  }
  onLoad(query: JSONObject): void{
    // 页面加载后
    console.log('page onLoad:' + JSON.stringify(query));
  }
  onMessage(event: MessageEvent): void{
    // 信息推送更新
    console.log('page onMessage:' + JSON.stringify(event.data));
  }
}

• 调用API ```typescript import { VideoElement } from ‘waft’;

const video = document.querySelector(“#myVideo”) as VideoElement; // 播放 video.play(); // 暂停 video.pause(); ```

属性说明

默认值：fitCenter | | enableNative（1.6以上支持） | Boolean | 是否启动Native同层渲染播放器
默认值：false | | mix-mode（1.6以上废弃） | String | 显示层次，可设置：
underlay，置于底层（非enableNative下异层渲染，可能会被遮住）
normal：置于顶层 | | onPlay | EventHandle | 当开始/继续播放时触发play事件 | | onPause | EventHandle | 当暂停播放时触发pause事件 | | onEnded | EventHandle | 当播放到末尾时触发ended事件 | | onStop | EventHandle | 视频播放终止，恢复到视频首帧，点击播放按钮可以继续播放 | | onError | EventHandle | 当视频播放出错时触发，{“errorCode”:”int 错误码”} | | onTimeUpdate | EventHandle | 当播放进度变化时触发，{“currentTime”:’’int 当前进度”, “videoDuration”:”int 视频总时长”} |

API

moduleName: video

附录

• 如何切换视频
  通过修改src属性
• 事件触发的情况说明（目前小程序模拟器事件不能正常触发，如果后续需要行为可以看齐）
  • 如果是循环播放：在重新播之前会触发onEnded和onPlay
  • 如果是非循环播放：在播放结束会触发onEnded和onStop