返回介绍

<video>

发布于 2020-01-01 14:27:53 字数 3216 浏览 1443 评论 0 收藏 0

WARNING

Weex中内置的<video>组件一般只做demo用途,在你的App中,你应该用你喜欢的视频库重新实现video组件。

Video 组件用于在页面中嵌入视频内容。

text 是唯一合法的子组件。

  • src, string. 内嵌的视频指向的URL。
  • play-status, string. 可选值为 play | pause,用来控制视频的播放状态,play 或者 pause,默认值是 pause
  • auto-play, boolean. 当页面加载初始化完成后,用来控制视频是否立即播放,默认值是 false
  • poster, string, v0.18+ & iOS. 指定视频首图的图片链接。
  • controls, string, v0.19+. 可选值为 controls | nocontrols,控制视频播放组件是否显示回放控制面板,默认会显示,当指定为 nocontrols 时不显示回放控制面板。
  • start 当 playback 的状态是 Playing 时触发。
  • pause 当 playback 的状态是 Paused 时触发。
  • finish 当 playback 的状态是 Finished 时触发。
  • fail 当 playback 状态是 Failed 时触发。
<template>
  <div>
    <video class="video" :src="src" autoplay controls
      @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
    <text class="info">state: {{state}}</text>
  </div>
</template>

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

<script>
  export default {
    data () {
      return {
        state: '----',
        src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
      }
    },
    methods:{
      onstart (event) {
        this.state = 'onstart'
      },
      onpause (event) {
        this.state = 'onpause'
      },
      onfinish (event) {
        this.state = 'onfinish'
      },
      onfail (event) {
        this.state = 'onfinish'
      }
    }
  }
</script>

Rax 示例

rax-video<video> 组件的上层封装,抹平了 Web 和 Weex 的展现

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

render(
  <Video
    style={{ width: '750rpx', height: '400rpx' }}
    autoPlay
    src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
  />,
  document.body,
  { driver: Driver }
);

rax-video 文档

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文