实时视频

更新时间:

该组件用于播放实时视频流。目前,该组件支持自动播放、暂停、音量调节和全屏播放功能。本文介绍组件的详细配置方法。

使用说明

实时视频组件兼容性如下:

  • 支持的播放协议:HLS。

  • 支持的视频编码协议:H.264、H.265。

步骤一:添加组件

  1. 创建Web应用。详细操作请参见创建Web应用

  2. 在Web应用编辑器中,单击最左侧的组件图标组件

  3. 在画布左侧组件列表上方,输入实时视频,找到该组件,然后将组件拖拽到中间画布。

    有关组件添加的详细内容,请参见添加组件

    05b73e06e14e967864a859ecdb084945

步骤二:配置数据源

  • 静态数据

    1. 在右侧样式播放源地址右侧提交框中,输入HLS地址。

      重要
      • 如果该组件所在应用有网络环境的使用限制,或直播的视频数据有安全限制,请不要配置公网环境下的视频播放源地址,以防视频数据泄露。

      • 提供的链接必须是HTTPS开头且链接支持跨域。

    2. 启用Flash插件并刷新页面后,组件即可播放视频。

      说明

      如果已设置当前浏览器禁止网站运行Flash,请修改相关浏览器设置为:运行Flash插件前先询问。

  • 动态数据

    单击播放源地址提交框右侧的配置数据源图标image,选择数据源类型,完成配置,单击确定

    可选数据源类型有设备接口应用推送页面变量

    播放源地址将基于关联的数据源实时更新。

步骤三:配置样式

  1. 调整组件在页面中的最终位置。有关组件通用样式配置,请参见样式配置

  2. 依次单击页面右上方的保存预览按钮,查看该组件的展示效果。

    播放中的视频界面,如图所示。播放效果

最佳实践

使用IoT Studio播放Link Visual摄像头实时视频流