图片、音乐和视频

一、图片

1、属性

属性

说明

alt

规定图像的替代文本。

src

规定显示图像的 URL

align

规定如何根据周围的文本来排列图像。

border

定义图像周围的边框。

height

定义图像的高度。

hspace

定义图像左侧和右侧的空白。

ismap

将图像定义为服务器端图像映射。

longdesc

指向包含长的图像描述文档的 URL。

usemap

将图像定义为客户器端图像映射。

vspace

定义图像顶部和底部的空白。

width

设置图像的宽度。

2、例

<img src=“images/logo.png”  alt='LOGO”  title=“logo” />

二、音乐

1、属性

属性

描述

autoplay

如果指定这个布尔值属性,只要没停止加载数据,音频就会立刻自动开始播放。

autobuffer

如果指定这个布尔值属性,即使没有设置自动播放,音频也会自动开始缓冲。

controls

如果指定这个属性,表示允许用户控制音频播放,包括音量控制,快进以及暂停/恢复播放。

loop

如果指定这个布尔值属性,表示允许音频播放结束后自动回放。

preload

这个属性指定加载页面时加载音频并准备就绪。如果指定自动播放则忽略。

src

要嵌入的音频 URL。可选,可以在音频块里面使用 <source> 元素指定要嵌入的音频来替代。

2、例

<audio controls=“controls”> <!--不自动播放--->

<source src="media/兰色天际.mp3" type="audio/mp3" />

</audio>

三、视频

1、属性

属性

描述

autoplay

如果指定这个布尔值属性,只要没有停止加载数据,视频就会立刻开始自动播放。

autobuffer

如果指定这个布尔值属性,即使没有设置自动播放,视频也会自动开始缓冲。

controls

如果指定这个属性,就允许用户控制视频播放,包括音量控制,快进,暂停或者恢复播放。

height

这个属性以 CSS 像素的形式指定视频显示区域的高度。

loop

如果指定这个布尔值属性,表示允许播放结束后自动回放。

preload

指定这个属性,视频会在载入页面时加载并准备就绪。如果指定自动播放则忽略。

poster

这是一个图像 URL,显示到用户播放或快进。

src

要嵌入的视频 URL。可选,可以在 video 块中使用 <source> 元素替代来指定要嵌入的视频。

width

这个属性以 CSS 像素的形式指定视频显示区域的宽度。

2、例

<video width="400"  autoplay="" controls=“controls”>     <!--自动播放--->

<source  src="media/v8.mp4"type="video/mp4" />

</video>

三、处理媒体事件

HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:

事件

描述

abort

播放中止时生成这个事件。

canplay

足够的数据可用并且媒体可以播放时生成这个事件。

ended

播放完成时生成这个事件。

error

发生错误时生成这个事件。

loadeddata

媒体第一帧载入完成时生成这个事件。

loadstart

开始加载媒体时生成这个事件。

pause

播放暂停时生成这个事件。

play

播放开始或者恢复时生成这个事件。

progress

定期通知媒体下载进度时生成这个事件。

ratechange

播放速度改变时生成这个事件。

seeked

快进操作完成时生成这个事件。

seeking

快进操作开始时生成这个事件。

suspend

媒体加载被暂停时生成这个事件。

volumechange

音频音量变化时生成这个事件。

waiting

请求操作(比如播放)被延迟,等待另一个操作完成(比如快进)时生成这个事件。

HTML5:图片、音乐和视频的更多相关文章

  1. php表单提交 图片、音乐、视频、文字,四种类型共同提交到数据库

    这个问题一直困扰了我好几天,终于在今天让我给解决了,难以掩饰的激动. 其实在之前没有接触到这种问题,只是表单提交数据而已,再就是图片,四种类型同时提交还真是没遇到过,做了一个系统,其中有一个功能就是提 ...

  2. 分享10款效果惊艳的HTML5图片特效

    在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...

  3. 8款精美的HTML5图片动画分享

    From:http://geek.csdn.net/news/detail/196250 HTML5结合jQuery可以让网页图片变得更加绚丽多彩,比如实现一些图片3D切换.CSS3动画绘制以及各种图 ...

  4. Matlab从一系列图片导出AVI视频,导出GIF动图

    平台:Win7,Matlab 2014a 从一系列图片导出AVI视频的M代码如下: clear all; % 清除变量 % 官方示例,命令窗口输入“doc VideoWriter” writerObj ...

  5. iOS开发-- 利用AVPlayer播放远程音乐和视频

    一.简单的播放音乐和视频,播放视频的工具栏需要自己写 二.利用老师封装的框架实现视频播放 链接:http://pan.baidu.com/s/1hrEKlus 密码:8e7g

  6. html5 简单音乐播放器

    html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  7. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  8. HTML5图片旋转

    HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...

  9. 基于CSS3和HTML5图片加工前后对比代码

    分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览   源码下载 实现的代码. html代码 ...

随机推荐

  1. OAuth 2.0之授权码模式

    转载自:http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html OAuth 2.0授权码模式 授权码模式(authorization code)是功 ...

  2. react脚手架搭建及配置

    npm install -g create-react-app 装完之后,生成一个新的项目,可以使用下面的命令: create-react-app my-app cd my-app/yarn star ...

  3. zabbix部署相关

    一.centos7 安装zabbix 二.zabbix 乱码问题 三.zabbix自动发现自动注册 四.zabbix3.4实现sendEmail邮件报警

  4. mybatis 查询优化主子表查询之association和collection

    很多开发人员之所以编写出低效的应用,有一大原因是并不理解怎样编写高效的SQL.以订单查询为例,我们经常需要查询某个用户的订单以及订单明细,并且以树形方式展现如下: 对于这种性质的功能,很多开发人员的做 ...

  5. 【题解】JSOIWC2019 Round3

    题面 题解: T1: 先对图进行染色,重新对联通快重新建图 根据四色定理,珂以得出这实际是一颗树 因为树的中心肯定是最佳的决策,所以答案就是树的直径/2(上取整) #include <bits/ ...

  6. nginx访问不到

    nginx访问不到 今天,一朋友的一台linux服务器上部署了nginx,但是外部(公网)就是不能访问,于是协助其排查.整体思路如下: 1.确认nginx配置是否ok. 2.确认网络是否可达. 3.是 ...

  7. 深入学习IOZone【转】

    本文转载自:https://blog.csdn.net/werm520/article/details/7262103 深入学习IOZone 刘智朋       2011-3-29 1        ...

  8. shell编程(一)之变量

    变量:命名的内存空间 bash的变量种类: 根据变量的生效范围等标准 本地变量: 生效范围为当前shell进程:对当前shell之外的其他shell进程,包括当前shell的子shell进程均无效 环 ...

  9. tp剩余未验证内容-8

    模型类的自动验证? 分为自动验证, 和 动态验证(手工验证), 前者的验证规则是定义在模型类中的, 所以要自己创建 扩展的/继承的模型类, 同时用 D方法实例化模型类 而动态验证是 先调用 valid ...

  10. 解决Intellij IDEA中console窗口中文乱码的问题

    配置完tomcat之后,测试运行时,中文是乱码,如下图(自己忘截图了,图源网络,看水印) 网上其他的修改方法我就不说了,至少我试了一个都没用. 下面两个方法也是网上的,在此总结一下: 1.在idea. ...