HTML网页显示一下后消失的原因—HTML与javascript的执行顺序
振哥在，世界充满爱！
原创
关注
0点赞·2622人阅读
由于项目的需要，在网页中添加了一个vlc视频播放器，需要实现对播放器的基本控制，如：放大屏幕，播放，暂停，截图，查看等功能，但是每次在加载完视频之后，视频闪动一下就消失，屏幕上就一片空白了，如下图所示。
但是，滚动一下鼠标，或移动一下浏览器，播放器就会出现。由于要写的网页嵌入到C#中的WebBrowser控件中，设置为没有滚动条的情况，于是视频播放器就加载不出来。
原因是：HTML中的视频代码和javascript控制操作代码是顺序执行的，当执行完javascript后会覆盖掉播放器，部分代码如下：
<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="container">
<div id="menuleft"><td>
<object center="center" width="100%" height="100%"id='vlc1_IE' events="True"codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab"classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921">
<param name="ShowDisplay" value="True" />
<param name="AutoPlay" value="false" />
</object>
</td>
</div>
<script language="Javascript"type="text/javascript">
var vlc=document.getElementById("vlc1_IE")
var id=vlc.playlist.add("视频源")
vlc.playlist.playItem(id)
vlc.playlist.stop()
var seek_time = 1000 * 50
var volume_number = 10
functiononPause(){}
function onPlay(){}
functionVolumeUp(){}
functionVolumeDown(){}
functionScreenLeftTop(){}
functionScreenRightTop(){}
functionScreenLeftBottom(){}
functionScreenRightBottom(){}
</script>
</body>
</html>
登录后复制
当执行完javascript相关的方法后页面中的播放器被覆盖，显示不出来。为了能够加载播放器并显示出来，将javascript中获取的变量放到一个加载函数中，如下所示：
window.οnlοad=function(){
vlc=document.getElementById("vlc1_IE")
varid=vlc.playlist.add("rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp")
vlc.playlist.playItem(id)
vlc.playlist.stop()
}
这样，整个播放器加载就完成了，并且可以实现对页面的相关操作。加载完后如下图所示：
当然也可以将<script></scritpt>中的内容分离到一个单独的.js文件中，只不过在HTML文件中需要通过<script type=”text/javascript”src=”xxx.js”></script>调用一下，要放在<head></head>中。
ondblclick='return false'你可以加一个透明层，就像baidu一样,我举个例子
<div style='position:absoluteleft:200top:100width:400height:400background-color:blackfilter:alpha(opacity=10)z-index:100'></div>
然后把视频放在他下面,注意长宽都比他小,z-index值小于100大于-100
