在网页中给视频播放窗口预设图像

  • 来源: 中国IT实验室 作者: somesun   2008-03-17/10:11
  • 我们在网页中插入视频时,有没有发现,当视频未播放之前播放窗口黑乎乎的甚是难看,那么能否在视频未播放之前先预设一些图像呢?下面给网友们介绍两种增加预设图片的方法。

    一、从视频中获得图像

    从视频中获得,主要是让视频跳到所需要的帧,然后暂停播放。下面请看在wmp与rm中的代码示例:

    Window Media Player:

    1、首先在BODY中添加wmp的控件:

    <object id="WMVplayer" height="300" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

    <param NAME="AutoStart" VALUE="-1">

    <!--是否自动播放-->

    <param NAME="url" value="video。mpg">

    <!--播放的文件地址-->

    </object>

    2、其次在HEAD中添加js代码:

    <script>

    var obj,obj1;

    function stopWMVplayer()

    {

    if(document。getElementById("WMVplayer")。Controls。currentPosition>=1。1)//如果当前位置超过1。1,则停止播放,并且清除stopWMVplayer函数的执行;否则继续运行stopWMVplayer函数。

    {

    document。getElementById(“WMVplayer”)。Controls。Pause();

    window。clearTimeout(obj);

    }

    else

    {

    obj=window。setTimeout("stopWMVplayer()",10);

    }

    }

    3、再次为body添加onload事件:

    <body onload=” document。getElementById("WMVplayer")。Controls。currentPosition=1;stopWMVplayer();”>



    RealOne:

    1、首先在BODY中添加rm的控件:

    <object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" name="RMplayer" width="300" height="240 id="RMplayer">

    <param name="AUTOSTART" value="-1">

    <!--是否自动播放-->

    <param name="SRC" value="flower。rm">

    <!--播放的文件地址-->

    <param name="CONTROLS" value="Imagewindow,ControlPanel,StatusBar">

    <!--指定哪些控制可见-->

    </object>

    2、其次在HEAD中添加js代码:

    function stopRMplayer()

    {

    if(document。getElementById("RMplayer"。getPosition()>=1100)// 如果当前位置超过1100,则停止播放,并且清除stopRMplayer函数的执行;否则继续运行

    {

    document。getElementById("RMplayer")。doPause();

    window。clearTimeout(obj1);

    }

    else

    {

    obj1=window。setTimeout("stopRMplayer()",10);

    }

    }

    3、再次为body添加onload事件:

    <body onload="document。getElementById('RMplayer')。setPosition(2500);stopRMplayer(); ">
            二、从外部获取图像

    前面主要是从视频中获得某个图像,那么我们如果需要从外部获得一张图片然后显示到窗口中,又是怎么完成呢?

    Window Media Plyaer:

    1、首先在BODY中添加wmp的控件:

    <object id="WMVplayer" height="300" width="260" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">

    <param NAME="AutoStart" VALUE="-1">

    <!--是否自动播放-->

    <param NAME="PlayCount" VALUE="999">

    <!—控制播放次数-->

    <param NAME="url" value="movie-pic。gif">

    <!--播放的文件地址-->

    </object>

    2、其次在HEAD中添加js代码:

    <script>

    Var obj;

    function WMVplayer()

    {

    if((document。getElementById("WMVplayer")。PlayState=="1"||document。getElementById("WMVplayer")。PlayState=="2")&&document。getElementById("WMVplayer")。url。indexOf("movie-pic。gif")>0)//当视频文件为图像文件时,并且播放状态为暂停或停止则开始播放视频文件

    {

    document。getElementById("WMVplayer")。url="video。mpg";

    window。clearTimeout(obj);

    }

    obj=window。setTimeout("WMVplayer()",10);

    }

    </script> 3、再次为body添加onload事件:#p#分页标题#e#

    <body onload="WMVplayer();">

    RealOne:

    1、首先在BODY中添加rm的控件:

    <object classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" name="RMplayer" width="300" height="240 d="player">

    <param name="AUTOSTART" value="-1">

    <!--是否自动播放-->

    <param name="SRC" value="movie-pic。gif">

    <!--播放文件地址-->

    <param name="CONTROLS" value="Imagewindow,ControlPanel,StatusBar">

    <!--指定哪些控制可见-->

    <param name="LOOP" value="true">

    <!--是否循环播放-->

    </object>

    2、其次在HEAD中添加js代码:

    <script>

    var obj;

    function RMplayer()

    {

    if((document。getElementById("RMplayer")。GetPlayState()=="4"||document。getElementById("RMplayer")。GetPlayState()=="0")&&document。getElementById("RMplayer")。GetSource()。indexOf("movie-pic。gif")>0) //当视频文件为图像文件时,并且播放状态为暂停或停止则开始播放视频文件

    {

    document。getElementById("RMplayer")。SetSource("flower。rm");

    window。clearTimeout(obj);

    }

    obj=window。setTimeout("RMplayer()",10);

    }

    </script>

    3、再次为body添加onload事件:

    <body onload="RMplayer();">

    其实Window Media Player与RealOne中功能的实现原理基本是一致的,只是一些实现方法的语句不同而已,希望大家在使用时有所注意,关于两个播放器的其它语句的具体说明这里就不再多费口舌了,大家可以通过网络进行搜索。

    评论 {{userinfo.comments}}

    {{money}}

    {{question.question}}

    A {{question.A}}
    B {{question.B}}
    C {{question.C}}
    D {{question.D}}
    提交

    驱动号 更多