HTML display of Plugin and videotag

问题

I am facing a weird problem with html display.I have a html page that has both plugin object and video tag. Both are placed under the same area. Plugin area is 970x560 and video area is 320x240px. The plugin renders images which have a rectangular hole cut inside them to view the video(i.e., some part of images rendered have transparent pixels (alpha opaque=0 ) just to display the video).

Now on launching of this html application in chrome, I am able to see only the video first frame and not the image rendered by plugin. But to cross check if the image is rendered or not I dumped the image and they do exist and also when I change the background style property of the plugin like background colour I am able to see the image along with the background only in the recatngular hole cut part of image.

I am posting the html below. The link for video is also posted and image is posted video link http://www.w3schools.com/tags/movie.mp4 (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video) image url

![Plugin rendered image with transparent pixels][1]
[1]: http://i.stack.imgur.com/3yLDB.png

HTML Code

 <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>

Please help!!!!

Thanks in advance, TechTotie.

回答1:

Thanks for your inputs.

I got the answer. It was because of chrome flags that was causing a problem.

I had to explicitly enable "Override software rendering list Mac, Windows, Linux, Chrome OS, Android" flag. It Overrides the built-in software rendering list and enables GPU-acceleration on unsupported system configurations. But I am still not sure and could not understand why software rendering could not do what was expected. Why is Hardware Rendering required for it.

It would be helpful if anyone could clarify.

Thanks and Regards,

Techtotie.

来源：https://stackoverflow.com/questions/20071413/html-display-of-plugin-and-videotag

标签

html