HTML网页显示一下后消失的原因—HTML与javascript的执行顺序

最新推荐文章于 2023-04-04 20:32:19 发布

振哥在，世界充满爱！

最新推荐文章于 2023-04-04 20:32:19 发布

阅读量3.4k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_30507287/article/details/51780580

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

由于项目的需要，在网页中添加了一个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>中。

说明：整个文件的功能实现链接：http://download.csdn.net/detail/qq_30507287/9557230

振哥在，世界充满爱！

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML网页显示一下后消失的原因—HTML与javascript的执行顺序

由于项目的需要，在网页中添加了一个vlc视频播放器，需要实现对播放器的基本控制，如：放大屏幕，播放，暂停，截图，查看等功能，但是每次在加载完视频之后，视频闪动一下就消失，屏幕上就一片空白了，如下图所示。但是，滚动一下鼠标，或移动一下浏览器，播放器就会出现。由于要写的网页嵌入到C#中的WebBrowser控件中，设置为没有滚动条的情况，于是视频播放器就加载不出来。原因是：
复制链接

扫一扫

专栏目录