Question

在HTML5中，我们使用VLC网络插件来显示直播视频。我们在视频插件上放置了HTML画布，用于绘制像矩形这样的几个形状。在Internet Explorer的情况下，绘制的矩形移动到VLC视频插件后面。在Firefox的情况下，相同的代码可以正常工作。任何人都可以帮助我们吗？

以下是示例代码。

<!DOCTYPE html>
<html>
<title>IE VLC Canvas Issue</title>
<head>
    <style type="text/css">
        #displayPlugin
        {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #navi
        {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #navi
        {
            z-index: 1000;
        }
        #displayPlugin
        {
            z-index: 0;
        }
        body
        {
            font-size: 11.2px !important;
        }
    </style>
</head>
<body onload="">
    <div id="containerDiv">
        <div id="navi" style="background-color: transparent">
            <canvas id='drawingCanvas' width='640' height='480'></canvas>
        </div>
        <div id="displayPlugin">
            <object id="playerId" classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' toolbar='false'
                controls='false' width='640' height='480' events='True'>
                <param name='AutoPlay' value='true' />
                <param name='ShowDisplay' value='true' />
                <param name='Controls' value='false' />
                <param name='Toolbar' value='false' />
                <param name='windowless' value='true' />
                <param name='wmode' value='transparent' />
                <param name='Src' value='rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov' />
                <embed type='application/x-vlc-plugin' progid='VideoLAN.VLCPlugin.2' name='video1'
                    id='video1' autoplay='yes' wmode='transparent' windowless='true' controls='false'
                    loop='yes' width='640' height='480' target='rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov'
                    pluginspage='http://www.videolan.org' />
            </object>
        </div>
    </div>
</body>

<script language="javascript">
    var c = document.getElementById("drawingCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = 'rgba(255, 255, 255, 0)';
    ctx.fillRect(10, 10, 100, 100);

    ctx.strokeStyle = "#0000ff";
    ctx.lineWidth = 5;
    ctx.strokeRect(10, 10, 100, 100);
</script>

</html>

谢谢， Jaymin Shah

IE + VLC Web插件问题

0 个答案: