1.HTML5视频

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<video width="320" height="240" controls>

<!--src中可以是http链接-->

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  您的浏览器不支持 HTML5 video 标签。

</video>

</body>

</html>

视频格式

视频标签中的属性

2.HTML音频

HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

</head>

<body>

<audio controls>

  <source src="horse.ogg" type="audio/ogg">

  <source src="horse.mp3" type="audio/mpeg">

您的浏览器不支持 audio 元素。

</audio>

</body>

</html>

音频支持的格式

音频标签中的属性

HTML5的视频和音频的更多相关文章

  1. HTML5 添加视频和音频（响应式视频）

    最初的 HTML5规范呼吁所有浏览器内置支持使用 Ogg格式① 直接播放视频或音频(无需插件).但是由于 HTML5工作组的内部争议,曾经作为基线标准的支持 Ogg(包括 Theoravideo 和 ...

  2. 借用HTML5 插入视频。音频

    HTML5 规定了一种通过 video 元素来包含视频的标准方法. 插入视频 <video width="320" height="240" contro ...

  3. 安卓与IOS移动段浏览器视频与音频的问题与总结

    1. 安卓.苹果移动浏览器上都不支持html5的视频与音频自动播放 2. 安卓.苹果移动浏览器要支持播放,前提是必须是用户触发的事件 3. 针对这个特殊的问题,代码需要在用户进来第一次屏幕触发中,去创 ...

  4. Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  5. The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

  6. Html5中 视频 音频标签 进度条问题

    最近项目中使用Html5的video和audio标签来在线播放视频和音频文件,但是遇到个奇葩的问题,页面上播放之后进度条无效, 查看w3c之后发现html代码并没有什么不同,之后猜想如果用静态的htm ...

  7. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  8. HTML5（二）音频视频画布

    HTML5 Audio(音频) 定义和用法 <audio src="someaudio.wav" controls="controls"> 您的浏览 ...

  9. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

随机推荐

  1. 大熊君学习html5系列之------WebStorage（客户端轻量级存储方案）

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  2. Pandas-数据选取

    Pandas包对数据的常用数据切片功能 目录 [] where 布尔查找 isin query loc iloc ix map与lambda contains DataFrame的索引选取 [] 只能 ...

  3. codevs3163 抄书问题2

    题目描述 Description 现在要把M本有顺序的书分给K个人复制(抄写),每一个人的抄写速度都一样,一本书不允许给两个(或以上)的人抄写,分给每一个人的书,必须是连续的,比 如不能把第一.第三. ...

  4. noip2015 运输计划

    描述 公元 2044 年,人类进入了宇宙纪元.L 国有 nn 个星球,还有 n−1n−1 条双向航道,每条航道建立在两个星球之间,这 n−1n−1 条 航道连通了 L 国的所有星球. 小 P 掌管一家 ...

  5. cf723c Polycarp at the Radio

    Polycarp is a music editor at the radio station. He received a playlist for tomorrow, that can be re ...

  6. [Machine Learning & Algorithm] 决策树与迭代决策树（GBDT）

    谈完数据结构中的树(详情见参照之前博文<数据结构中各种树>),我们来谈一谈机器学习算法中的各种树形算法,包括ID3.C4.5.CART以及基于集成思想的树模型Random Forest和G ...

  7. [Qt]用QItemDelegate的来修改QStandardItem字体颜色

    1.重写ItemDelegate的Item方法 这里我使用的QListView来显示Log日志,将写好的代理在初始化中就可以直接赋值上. m_LogModel = new QStandardItemM ...

  8. 【bzoj3036】绿豆蛙的归宿

    题目描述 随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 给出一个有向无环的连通图,起点为1终点为N,每条边都有一个长度.绿豆蛙从起点出发,走向终点.到达每一个顶点时,如 ...

  9. 日期控件jsdate用法注意事项

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. Java NIO 系列教程

    http://www.iteye.com/magazines/132-Java-NIO