多媒体

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

图像

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

示例：

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

渲染效果：

多媒体 - 图1

请选择以下任意一种方式预览：

1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-image.js

2. 在 Android 手机上先下载 Kraken Playground App，然后打开 App 扫描下方二维码预览：

多媒体 - 图2

视频

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

示例：

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

渲染效果：

多媒体 - 图4

请选择以下任意一种方式预览：

1. 安装 Kraken CLI，然后复制以下命令到命令行中运行：

kraken http://kraken.oss-cn-hangzhou.aliyuncs.com/demo/guide-video.js

2. 在 Android 手机上先下载 Kraken Playground App，然后打开 App 扫描下方二维码预览：

多媒体 - 图5