• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例6-4 设置video元素的poster属性

实例6-4 设置video元素的poster属性

1.功能描述

在实例6-3的基础上,为<video>元素新增一个“poster”属性,并选取一幅图片作为该属性的值,当播放视频文件时,在视频播放区域中,首先将显示“poster”属性指定的图片。

2.实现代码

在DreamweaverCS5中新建一个HTML页面6-4.html,加入代码如代码清单6-4所示。

代码清单6-4 设置<video>元素的poster属性

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>设置<video>元素的poster属性</title>
	<link href="Css/css6.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	〈video id="vdoMain" src="Video/6-test_l.mov"
	        width="36Opx" height=n22Opx"
	        controls="true" poster="Images/2010年作品.jpg">
	        你的浏览器不支持视频
	</video>
	</body>
	</html>

3.页面效果

该页面在Chrome10浏览器中执行的页面效果如图6-4所示。

4.源码分析

在本实例中,设置了<video>媒体元素的“poster”属性,该属性是视频元素<video>所独有的属性。利用该属性不仅可以在视频文件开始播放前设置图片,还可以通过视频元素的事件机制,指定在某事件中改变该属性的图片URL。例如,当用户单击“暂停”或播放完成时,在相应的事件中编写JavaScript代码,通过setAttribute()方法重置“poster”属性中图片的URL,可以根据不同事件,动态变换图片的效果。具体实例将在6.3.3节中介绍。

图6-4 设置多媒体元素的poster属性后的效果

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101