源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 434|回复: 17

[Dreamweaver教程] Dreamweaver技巧之在网页中给视频播放窗口预设图像

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2014-1-22 13:23:49 | 显示全部楼层 |阅读模式
我们在网页中插入视频时,有没有发现,当视频未播放之前播放窗口黑乎乎的甚是难看,那么能否在视频未播放之前先预设一些图像呢?下面给网友们介绍两种增加预设图片的方法

    一、从视频中获得图像
  
  从视频中获得,主要是让视频跳到所需要的帧,然后暂停播放。下面请看在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中功能的实现原理基本是一致的,只是一些实现方法的语句不同而已,希望大家在使用时有所注意,关于两个播放器的其它语句的具体说明这里就不再多费口舌了,大家可以通过网络进行搜索。

回复

使用道具 举报

2

主题

2万

回帖

67

积分

注册会员

Rank: 2

积分
67
发表于 2022-9-15 12:19:09 | 显示全部楼层
数据库了多久撒快乐的健身卡啦
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

182

积分

注册会员

Rank: 2

积分
182
发表于 2022-10-13 10:43:19 | 显示全部楼层
很好,谢谢分享
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-5-25 03:33:44 | 显示全部楼层
谢谢楼主分享
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

155

积分

注册会员

Rank: 2

积分
155
发表于 2023-6-18 13:05:11 | 显示全部楼层
大家都不容易!
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-7-12 03:04:31 | 显示全部楼层
终于找到了,我擦
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

68

积分

注册会员

Rank: 2

积分
68
发表于 2023-8-25 02:09:07 | 显示全部楼层
sdsadsadsadf
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

221

积分

中级会员

Rank: 3Rank: 3

积分
221
发表于 2023-8-25 02:55:45 | 显示全部楼层
啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

69

积分

注册会员

Rank: 2

积分
69
发表于 2023-8-31 06:59:34 | 显示全部楼层
需要很久了终于找到了
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

66

积分

注册会员

Rank: 2

积分
66
发表于 2023-9-13 13:21:31 | 显示全部楼层
hi哦和烦恼农家女
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-25 23:52 , Processed in 0.071235 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表