4

问题

我正在尝试在 SVG 中嵌入 YouTube 视频。它在 Chromium (Ubuntu) 上按预期工作，但在 Google Chrome (Windows 7) 上，视频在播放时会自行移动到画布的前面，然后在播放停止时回到原来的位置。

有谁知道为什么视频似乎改变了它的 z-index，以及如何停止它？

还有一个次要问题（在我的情况下稍微不那么紧迫），Firefox 在播放视频时不显示视频，只显示音频。

编码

我正在使用以下 HTML 嵌入视频：

<svg height="600" version="1.1" width="550" xmlns="http://www.w3.org/2000/svg">
    <foreignObject x="10" y="10" height="300" width="500">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <iframe xmlns="http://www.w3.org/1999/xhtml" width="500" height="300"
                    src="http://www.youtube.com/embed/jOV1-mkIOd0?wmode=opaque"
                    frameborder="0">
            </iframe>
        </div>
    </foreignObject>
    <circle cx="250" cy="250" r="150" fill="#ff0000"></circle>
</svg>​

我创建了一个演示问题的小提琴。

4

1 回答 1

1

如果您不想出现 z-index 问题，请先输出 <circle> 标签，然后输出视频/视频的容器；顺序很重要（最后一个对象将自动位于顶部）。还要确保您保留在 YouTube 视频上声明的“wmode=opaque”参数，就像您已经拥有它一样，因为没有它，无论如何视频都会排在首位。

<svg height="600" version="1.1" width="550" xmlns="http://www.w3.org/2000/svg">
    <circle cx="250" cy="250" r="150" fill="#ff0000"></circle>
    <foreignObject x="10" y="10" height="300" width="500">
        <div xmlns="http://www.w3.org/1999/xhtml">
            <iframe xmlns="http://www.w3.org/1999/xhtml" width="500" height="300"
                    src="http://www.youtube.com/embed/jOV1-mkIOd0?wmode=opaque"
                    frameborder="0">
            </iframe>
        </div>
    </foreignObject>
</svg>​
于 2012-06-16T20:41:16.510 回答