我在html显示方面遇到了一个奇怪的问题。我有一个html页面，有插件对象和视频标签。两者都位于同一区域下。插件区域为970x560，视频区域为320x240px。该插件渲染内部有一个矩形孔的图像以观看视频（即，渲染的图像的某些部分具有透明像素（alpha不透明=0），仅用于显示视频）。
现在在chrome中启动这个html应用程序时，我只能看到视频的第一帧，而不能看到插件渲染的图像。但是，为了交叉检查图像是否渲染，我丢弃了图像，它们确实存在，而且当我更改插件式背景颜色的背景样式属性时，我只能在图像的凹凸孔切割部分看到图像和背景。
我在下面发布html。还发布了视频链接和图像视频链接http://www.w3schools.com/tags/movie.mp4(http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video)图像url
[具有透明像素的插件渲染图像][1]
[1] ：https://i.stack.imgur.com/3yLDB.png
HTML代码
<html>
<head>
PROXY PLUGIN
</head>
<script>
function pluginLoaded() {
console.log("Plugin loaded!");
alert("Plugin loaded!");
}
var myVideo=document.getElementById("testVideo");
function plugin0()
{
return document.getElementById('proxyplugin');
}
plugin = plugin0;
</script>
<body bgcolor=#000000>
<style type="text/css">
.myClass { color: white; text-decoration: bold; position:absolute;left: 60px; top:170px;width:320px;height:240px; }
</style>
<div style="position: absolute; top: 120px; left: 60px;">
<video id="testVideo" width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<object id="proxyplugin" type="application/x-proxyplugin" bgcolor="#E6E6FA" style="position: absolute;left: 60px; top:120px; width: 970px; height: 560px;z-index:3" > <param name="onload" value="pluginLoaded" /> <param name="wmode" value="transparent" />
</object>
</body>
</html>
请帮忙！！！！
提前感谢，TechTotie。
感谢您的输入。
我得到了答案。这是因为铬标志造成的问题。
我必须明确启用"覆盖软件渲染列表Mac、Windows、Linux、Chrome OS、Android"标志。它覆盖内置软件渲染列表，并在不支持的系统配置上启用GPU加速。但我仍然不确定，也不明白为什么软件渲染不能达到预期效果。为什么需要硬件渲染。
如果有人能澄清一下，那会很有帮助。
感谢和问候，
Techtotie。