建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > Dreamweaver教程 >

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

更新时间:2017-04-24整理编辑:建站学习网阅读:0

我们在网页中插入视频时,有没有发现,当视频未播放之前播放窗口黑乎乎的甚是难看,那么能否在视频未播放之前先预设一些图像呢?下面给网友们介绍两种增加预设图片的方法。

一、从视频中获得图像
  
从视频中获得,主要是让视频跳到所需要的帧,然后暂停播放。下面请看在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事件:

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

        :更多精彩教程请关注建站学习网网页设计教程 栏目,

本文网址:https://www.dedexuexi.com/wysj/dw/3084.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
Dreamweaver如何制作网页漂浮广告?
« 上一篇2017年04月24日
Dreamweaver网页制作之菜单概述
2017年04月24日下一篇 »
  • Dreamweaver CS5-HTML简介
    0阅读
    1.什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,它规定了自己的语法规则,用来表示比“文本“更丰富的意义,比如图片,表格,链接等。浏览器(IE,FireFox等)软件知道HTML语言的语法,可以用来查看HTML文档。目前互联网上的绝大部...
  • Dreamweaver文档编辑
    0阅读
    快捷键可以提高我们平时的工作效率,今天小编为大家介绍一下dreamweaver中文档编辑快捷键。
  • 色彩模式介绍
    0阅读
    在图象和图形处理软件中,通常都使用了HSB、RGB、Lab及CMYK几种色彩模型,并且具有多种色彩模式,用来反映不同的色彩范围,其中许多模式能用对应的命令相互转换。 (一) HSB模型 基于人类对色
  • Dreamweaver教程:用dw制作图片浏览器
    0阅读
    如图所示,在很多地方我们都看到过这样的图片展示效果 ,通过点击下方的缩略图来展示不同的图片,今天我们就是要来做一下这个效果,其实方法很简单,就是给缩略图添加一个交换图像的
  • DreamweaverMX2004打造留言本详解
    0阅读
    一、IIS(Internet 信息服务)安装配置 这里以Windows Server 2003(以下简称Win2003)为例。因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以在添加或删除程序添加/删除Windows组件对
 
QQ在线咨询