# Summary


You should consider <video> as demo purpose, and re-implement it your favourite video library.

The video component can be used to embed video content in a Weex page.

# Child Components

A text is the only valid type of child component.

# Attributes

  • src, string. The URL of the video to embed.
  • play-status, string. Valid options are 'play' | 'pause'. Use it to control video's play status. Default value is pause
  • auto-play, boolean. Use it to control whether it is playing when the page initialization finished. Defalut value is false.
  • poster, string, v0.18+ & iOS. Post image URL of this video if any.
  • controls, string, v0.19+. If set to nocontrols, native video component will hide its play-back control panel.

# Styles

# Events

  • start Triggered when playback state is Playing.
  • pause Triggered when playback state is Paused.
  • finish Triggered when playback state is Finished.
  • fail Triggered when playback state is Failed.

# Vue Example

    <video class="video" :src="src" autoplay controls
      @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
    <text class="info">state: {{state}}</text>

<style scoped>
  .video {
    width: 630px;
    height: 350px;
    margin-top: 60px;
    margin-left: 60px;
  .info {
    margin-top: 40px;
    font-size: 40px;
    text-align: center;

  export default {
    data () {
      return {
        state: '----',
      onstart (event) {
        this.state = 'onstart'
      onpause (event) {
        this.state = 'onpause'
      onfinish (event) {
        this.state = 'onfinish'
      onfail (event) {
        this.state = 'onfinish'

# Rax Example

rax-video is the component <video> of rax, which can run in web and weex.

import { createElement, Component, render } from "rax";
import Video from "rax-video";
import Driver from "driver-universal";

    style={{ width: '750rpx', height: '400rpx' }}
  { driver: Driver }

rax-video doc

Last Updated: 8/15/2022
Excellent docUnusable doc