多媒体

页面中的多媒体用得比较多的图像与视频，Kraken 分别使用 <img> 与 <video> 标签来支持，以下介绍具体的用法。

图像

Kraken 支持所有 Flutter 支持的图像格式，包含 JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, WBMP。

示例：

  1. <div style={{ padding: '20px' }}>
  2.   <img
  3.     src="https://img.alicdn.com/imgextra/i4/O1CN01GIxaZ01V0isGFLuJQ_!!6000000002591-2-tps-400-339.png"
  4.     style={{ width: '100%' }}
  5.   />
  6. </div>

渲染效果：

多媒体 - 图1
请选择以下任意一种方式预览：
1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：
2. 在 Android 手机上先下载 Play Kraken App，然后打开 App 扫描下方二维码预览：
多媒体 - 图2

视频

视频不属于 Kraken 原生支持的能力，需要先安装这个 kraken_video_player 插件来支持，详细安装方法请参考开发文档。

示例：

  1. <div>
  2.   <video
  3.     src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
  4.     autoplay={true}
  5.     style={{ width: '100%', height: '200px' }}
  6.   />
  7. </div>

渲染效果：

多媒体 - 图3
请选择以下任意一种方式预览：
1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：
2. 在 Android 手机上先下载 Play Kraken App，然后打开 App 扫描下方二维码预览：
多媒体 - 图4