MiniX自绘渲染跨平台框架
  • 框架说明
  • 声明式开发范式
  • 内置Api
指南
接口
  • Minix CLI
示例
  • 类Web框架

    • 框架说明
    • 类Web开发范式
    • 内置Api
  • 指南
  • 组件
  • 接口
  • 示例
  • 规范
  • DophinHybrid

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • DolphinWeex

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • 发布消息
  • 常见问题
  • 更新日志
  • 框架说明
  • 声明式开发范式
  • 内置Api
指南
接口
  • Minix CLI
示例
  • 类Web框架

    • 框架说明
    • 类Web开发范式
    • 内置Api
  • 指南
  • 组件
  • 接口
  • 示例
  • 规范
  • DophinHybrid

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • DolphinWeex

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • 发布消息
  • 常见问题
  • 更新日志
  • 快速上手
  • 基础

    • Grid 布局
    • Icon 图标
    • Button 按钮
    • Toast 轻提示
    • Cell 列表项
  • 数据录入

    • Checkbox 多选框
    • Radio 单选框
    • Slider 滑杆
    • Switch 滑动开关
    • Picker 滚动选择器
    • Rate 评分
    • SearchBar 搜索栏
  • 数据展示

    • Tag 标记
    • Badge 徽标
    • Blank 缺省页
    • Card 卡片容器
    • Steps 步骤条
    • NoticeBar 提醒栏
    • Swiper 轮播
  • 操作反馈

    • ActionSheet 动作清单
    • Loading 加载
    • Overlay 遮罩层
    • Popup 弹窗
    • PopupImage 图片弹窗
    • PullRefresh 下拉刷新
  • 导航

    • NavBar 导航栏
    • TabBar 标签栏
    • Tab 标签页
  • 媒体

    • Camera 相机
    • Video 视频
  • 美居组件

    • Apng 动态图片
    • Lottie 动画
    • midea-map-view 地图
    • Picker 滚动选择器
    • SeekBar 滑杆
    • ArcSlider 环形控制
    • Progresscycle 环形进度条
    • Gesture Password 手势密码
    • Linechart 折线图
    • Barchart 柱状图
    • Linechart Dragging 可拖拽折线图
    • Pick Pallet 取色器
    • Webview 浏览器视图组件
    • midea-common-weex-view Weex 子窗口
    • midea-common-mx-view Minix 子窗口
    • midea-piechart-view 饼图
    • Video 视频播放器
      • 代码演示
      • Api
    • Map 地图
    • Webview 浏览器容器
  • 插件模版

    • Warmer 暖风机

# Video 视频播放器

请扫码查看示例

# 引入

APP内置原生组件,可直接使用cross-view标签。 Minix默认提供的video组件只支持基本视频操作,本组件可支持更多选项,比如全屏播放等

# 代码演示

# 基本用法

通过设置 crossprops 和 type 属性,展示环形进度条。

<div class="wrapper">
  <cross-view id="mideagespass1" class="crossview" type="midea-video" crossprops="{{cross_props}}" onCallMethod="onCallMethod"></cross-view>
</div>
1
2
3
import prompt from '@system.prompt'
export default {
  data: {
    cross_props: JSON.stringify({
      src: 'https://img.smartmidea.net/1654852718700.mp4',
      autoplay: true
    }),
  },

  /**
   * video 原生回调方法
   */
  onCallMethod({ method, params }) {
    if (method == 'start') {
      this.printResult(method, params)
    } else if (method == 'readyToPlay') {
      this.printResult(method, params)
    } else if (method == 'pause') {
      this.printResult(method, params)
    } else if (method == 'fail') {
      this.printResult(method, params)
    } else if (method == 'finish') {
      this.printResult(method, params)
    } else if (method == 'progress') {
      this.printResult(method, params)
    }
  },
  printResult(method, params) {
    prompt.showToast({
      message: "stone video playStatus: " + method + "----" + JSON.stringify(params),
      duration: 2000,
    });
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# Api

# Prop

字段 说明 类型 默认值 是否必须
type 原生组件类型 String midea-video 是
crossprops 参数 String {}附表1 是

# 附表1

字段 说明 类型 默认值 是否必须
src 视频在线路径 String - 是
autoplay 进入页面后是否自动播放 Boolean false 否

# Methods 原生回调参数

方法名称 说明 备注
start 视频开始播放时触发 -
pause 视频暂停播放时触发 -
finish 视频播放完毕时触发 -
fail 视频播放失败时触发 -
readyToPlay 视频资源加载成功后触发 -