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. Github上的PHP资源汇总大全

    依赖管理 ——用于依赖管理的包和框架 Composer/Packagist : 一个包和依赖管理器 Composer Installers:  一个多框架Composer库安装器 Pickle: 可以 ...

  2. PHP的继承方法如何获取子类名？get_class() 和 get_called_class()

    PHP里的__CLASS__这类东西是静态绑定的,如果不在子类里重载的话,那么继承父类方法所得到的依旧是父类的名称,而不是子类的名称,比如: <?php class A { function _ ...

  3. Go - 路径、目录名、包名、文件名

    先看一个示例: 1.目录结构 bin pkg src pk1 pk2 function1.go function2.go index.go 2.function1.go 文件内容: package p ...

  4. 【Android学习】Windows下Android环境搭建

    一.  JDK下载配置 直接百度,很简单. 二.android JDK下载配置 1.进入下载官网(需要FQ):https://developer.android.com/studio/index.ht ...

  5. Linux 架构

    (转)作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! http://www.cnblogs.com/vamei/archive/2 ...

  6. linux常用命令-帮助命令man,whatis,apropos,info,help

    man 命令 man 配置文件,注意这里只需要写文件名称就可以了,不能写文件的绝对路径 man既可以查看命令的帮助信息也可以查看配置文件的帮助信息,如果内容太多,可以输入"/内容" ...

  7. GET和POST可传递的值到底有多大？

    前日,看到这个问题了. 没有深入了解.我的常识里面get最大传递的值为256b,post 是2M.这是很久以前不知在哪看到的.于是又百度一下.看到两篇文章装过来看看: 浅谈 HTTP中Get与Post ...

  8. __new__方法

    __new__:创建对象时调用,返回当前对象的一个实例__init__:创建完对象后调用,对当前对象的实例的一些初始化,无返回值 案例一: >>> class A(object): ...

  9. 自定义el函数

    1.1.1 自定义EL函数(EL调用Java的函数) 第一步:创建一个Java类.方法必须是静态方法. public static String sayHello(String name){ retu ...

  10. 【转】Android Studio系列教程六--Gradle多渠道打包

    原文链接:http://stormzhang.com/devtools/2015/01/15/android-studio-tutorial6/ 由于国内Android市场众多渠道,为了统计每个渠道的 ...