Question

我面临一个html display的奇怪问题。我有一个html页面，同时包含插件对象和视频标签。两者都放在同一区域下。插件面积为970x560，视频面积为320x240px。该插件呈现在其内部切出矩形孔的图像以观看视频（即，呈现的图像的某些部分具有透明像素（alpha opaque = 0）以显示视频）。

现在在chrome中启动这个html应用程序时，我只能看到视频第一帧而不是插件呈现的图像。但是为了交叉检查图像是否被渲染我倾倒了图像并且它们确实存在，并且当我更改插件的背景样式属性（如背景颜色）时，我能够仅在recatngular孔中看到图像和背景削减图像的一部分。

我发布下面的html。视频链接也会发布，图片也会发布视频链接http://www.w3schools.com/tags/movie.mp4（http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video）图片网址

！[带有透明像素的插件渲染图像] [1]
[1]：http://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。

Answer 1

感谢您的投入。

我得到了答案。这是因为铬标志导致了问题。

我必须明确启用“覆盖软件渲染列表Mac，Windows，Linux，Chrome OS，Android ”标志。它覆盖内置的软件渲染列表，并在不支持的系统配置上启用GPU加速。但我仍然不确定，也无法理解为什么软件渲染无法达到预期效果。为什么需要硬件渲染。

如果有人能澄清，那会很有帮助。

谢谢和问候，

Techtotie。

插件和录像带的HTML显示

1 个答案: