自定义接收器无法正确显示图像答案

【问题标题】：Custom receiver doesn't display image correctly自定义接收器无法正确显示图像
【发布时间】：2017-03-19 06:37:55
【问题描述】：

我正在使用 chromecast SDK 3.0 并希望创建自定义接收器。它适用于视频和音频，但在图像投射方面存在问题。
在 html 文件中：

<body style="margin: 0">
         <img id="androidImage" src="" />
...

在 js 文件中：

sampleplayer.CastPlayer.prototype.loadImage_ = function(info) {
  this.log_('loadImage_');
  var url = info.message.media.contentId;
  document.getElementById("androidImage").src=url;
  this.setState_(sampleplayer.State.PLAYING, true);
};

使用这种实现图像会在一秒钟内出现并随着替换为背景图像而消失。图像也显示不正确的尺寸。为了设置刻度类型的样式，我使用了这样的代码：

<style>
      img#androidImage {
        height:100%;
        width:100%;
      }
  </style>

有人有意见吗？谢谢！

【问题讨论】：

它在您的浏览器中是否正常工作？如果主体不是浏览器视口的 100% 高度，则图像也无法缩放到 100% 高度。快速解决方法通常是将正文和 html 的高度设置为 100%

标签： javascript android css chromecast google-cast

【解决方案1】：

图像处理不同于视频和音频，因为没有“播放”状态。由于图像由 html 图像标记处理，因此没有与它们相关联的事件（在视频/音频的情况下，Media 元素会产生许多 Cast SDK 接入的事件）。所以不要尝试在接收端设置图像的状态。您可以选择使用以最基本方式处理图像的默认/样式接收器。如果您想编写自定义接收器，您可以简单地使用自定义命名空间将图像 url 发送到接收器，然后在接收器端，获取 url 并填充图像标签（类似于您正在尝试的内容）；无需担心与其他类型媒体相关的接收器 SDK 的其他方面。最后一件事：如果您打算添加幻灯片功能、花哨的过渡等，您将无法对图像做太多事情；您可以一张一张地显示图像，淡出一张并淡入下一张（以产生更令人愉悦的过渡）。

【讨论】：

谢谢解释。问题出在html布局中。在我们的例子中，图像标签需要放在播放器下方，并且它的位置应该设置为absolute。