<audio src="1.mp3" controls></audio>
<video src="1.mp4" controls></video>

<audio>标签:
使用<audio>标签嵌入音频的最简单的一个例子,controls属性告诉浏览器包含基本的播放控件。
<audio>标签还支持另外3个属性:
preload:告诉浏览器如何下载音频。
autoplay:加载完音频后立即播放,不需要用户点击播放按钮。要实现背景播放,可以去掉controls属性,使用autoplay。
loop:是否循环播放音频。

<video>标签:
<video>标签的使用和<audio>几乎完全一样,它们具体相同的属性。<video>还有另外3个属性,height和width用来设置视频窗口的高和宽;poster用于设置替换视频的图片。

关于格式的兼容性的问题:
为了在不支持某种编码格式的浏览器中都能看到同样的音频和视频,解决方法是在<video></video>中嵌套<source>标签。即,拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件(如果有的话):
<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>

关于html5兼容性的问题:
为了让不支持html5的浏览器也能看到视频内容,我们使用flash作为后备。在<video>标签内嵌套<object>标签插入flash播放器。

html5中插入视频和音频的更多相关文章

  1. html5-8 如何控制html5中的视频标签和音频标签

    html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...

  2. 【转】向HTML中插入视频并兼容所有浏览器的方法

    原文地址:http://www.jb51.net/web/168548.html 向HTML中插入视频有两种方法,一种是古老的object标签,一种是html5中的video标签,前者兼容性相对好些, ...

  3. HTML中插入视频

    最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...

  4. 如何在html中插入视频

    如何在html中插入视频 1,插入优酷视频: 在优酷分享界面有个html代码,直接复制放入body中,定义div的align居中即可 2.插入本地视频:用video属性  用mp4格式 <vid ...

  5. 测试开发之前端——No9.HTML5中的视频/音频

    HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...

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

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

  7. 页面中插入视频的方法---video/embed/iframe总结

    1. video标签 当前主流的方法当然是HTML5中的video标签了,但是 当前,video 元素只支持三种视频格式: Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg ...

  8. 页面中插入视频兼容ie8以上的浏览器

    有时候页面中需要插入视频,如果不考虑ie8的话:就是直接用h5标签<video></video>就可以了: 但是有的时候需求是需要考虑ie8,这样我们就可以用插件,这种vide ...

  9. 转:HTML网页中插入视频各种方法

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.Chrome),支持H.264的(Safari.IE ...

随机推荐

  1. linux(centos6.5 i386)安装mysql5.6源码包

    在开始安装前,先说明一下mysql-5.6.4与较低的版本在安装上的区别,从mysql-5.5起,mysql源码安装开始使用cmake了,因此当我们配置安装目录./configure --perfix ...

  2. map的使用(自增)ret = map(lambda x : x+100 if x % 2 == 1 else x - 100, [1,2,3,4,5])

    #!/usr/bin/env python ret = map(lambda x : x+100 if x % 2 == 1 else x - 100, [1,2,3,4,5]) print(ret) ...

  3. 电量检测芯片BQ27510使用心得

    最近接触到一款TI的电量检测芯片BQ27510,网上很少有人提及该芯片如何使用,大部分博文都是搬得BQ27510的datasheet,至于真正使用过的很少,该芯片我个人感觉还是非常强大的,能自动学习你 ...

  4. BZOJ 1042 硬币购物(完全背包+DP)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1042 题意:给出四种面值的硬币c1,c2,c3,c4.n个询问.每次询问用d1.d2.d ...

  5. 摘抄--使用cos实现多个文件上传详解

    在开发中常常需要上传文件,上传文件的方式有很多种,这里有一个cos实现的例子. 首先是要拷贝cos.jar包拷贝到WEB-INF/lib目录下,然后才进行编码. 创建一个可以进行自动重命名的Java文 ...

  6. js对cookie的操作,包括增,取,删

    在其他人都开会到时间里,我偷偷摸哦的试了一下cookie,唉,从来没有用过cookie,慢慢的知识忘光了,还好这次偷偷摸摸的做出来了,虚,大家都别出声啊 <!DOCTYPE html> & ...

  7. 数独Sudoku

    数独(すうどく,Sūdoku),是源自18世纪瑞士发明,流传到美国,再由日本发扬光大的一种数学游戏.是一种运用纸.笔进行演算的逻辑游戏.玩家需要根据9×9盘面上的已知数字,推理出所有剩余空格的数字,并 ...

  8. [HDOJ3714]Error Curves(三分)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3714 题意:求n个二次函数在[0,1000]的最小值. 三分枚举. #include <bits ...

  9. iOS - OC NSArray 数组

    前言 @interface NSArray<__covariant ObjectType> : NSObject <NSCopying, NSMutableCopying, NSSe ...

  10. mysql 主主复制的配置流程

    1.先关闭B,把A的数据导出来,mysqldump -hlocalhost -uroot -p123456 --database ibprpu >ibprpu.sql2.关闭A,启动B,进入my ...