内容：

1.video元素

2.audio元素

注：这两个元素均是HTML5新增的元素

1.video元素

(1)用途

<video> 标签定义视频，比如电影片段或其他视频流

(2)标签属性

(3)实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>video标签</title>

 </head>

 <body>

 <!-- 自动播放 有播放控件 宽600px 高400px -->

 <video src="xxx.mp4" controls="controls" autoplay="autoplay" width="600" height="500">

     <!-- 当浏览器不支持video标签时显示如下文字 -->

     your browser does not support the video tag

 </video>

 </body>

 </html>

(4)补充 - source元素与编码格式

source元素指定多个播放格式与编码：source元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下，直到选择都所支持的格式为止。其使用方法如下：

 <video>

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

     <source src="video.webm" type="video/webm" />

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

     <source src="video.mp4" />

 </video>

各种设备对于编码格式的支持：

 
  • webm(.webm)格式的视频：Firefox4.0以上、chrome6.0以上、Opera10.6以上；
  • mp4(.m4v)格式的视频：IE9.0以上、Safari3.1以上、iso5.0以上、Android4.0以上；
  • ogg(.ogv)格式的视频：Firefox3.5以上、chrome3.0以上、Opera10.5以上；
  • mp4(.mp4)格式的视频：IE9.0以上、Safari3.1以上、iso3.0以上、Android2.3以上；

2.audio元素

(1)用途

<audio> 标签定义声音，比如音乐或其他音频流

(2)标签属性

(3)实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>audio标签</title>

 </head>

 <body>

 <!-- 自动播放 带播放控件 -->

 <audio src="xxx.wav" controls="controls" autoplay="autoplay">

     <!-- 当浏览器不支持audio标签时显示如下文字 -->

     your browser does not support the audio tag

 </audio>

 </body>

 </html>

video元素和audio元素的更多相关文章

  1. video元素和audio元素相关事件

    前言 在利用video元素或audio元素读取或播放媒体数据时,会触发一系列事件,如果用js脚本来捕抓这些事件,就可以对着这些事件进行处理了. 捕抓的方式有两种: 第一种是监听的方式.使用vedio或 ...

  2. audio元素和video元素在ios和andriod中无法自动播放

    原因: 因为各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放: /音频,写法一 <audio src="music/bg.mp3" autop ...

  3. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  4. html5--4-4 audio元素/格式的转换

    html5--4-4 audio元素/格式的转换 学习要点 掌握audio元素的用法 视频/音频文件的格式转换 当前,audio 元素支持三种音频格式: Ogg 免费, 支持的浏览器:Firefox. ...

  5. Cannot read property 'nodeType' of null; audio元素默认样式下载按钮

    1.chrome-->console抛出如下错误: Uncaught TypeError: Cannot read property 'nodeType' of null 错误原因:从stack ...

  6. html5的 embed元素 和 object元素

    html5的 embed元素 和 object元素 一.总结 一句话总结: embed定义嵌入的内容,比如插件,比如flash object定义定义一个嵌入的对象,用于包含对象,比如图像.音频.视频. ...

  7. HTML5中新增加的结构元素、网页元素和全局属性

    HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...

  8. 第48天学习打卡（HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 ）

    行内元素和块元素 块元素 ​ 无论内容多少,该元素独占一行 ​ (p.h1-h6) 行内元素 ​ 内容撑开宽度,左右都是行内元素的可以排在一行 ​ (a.strong.em...) 列表 什么是列表 ...

  9. jquery 元素控制(追加元素/追加内容)

    参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: ...

随机推荐

  1. 20155315 2016-2017-2 《Java程序设计》第九周学习总结

    教材学习内容总结 1.JDBC架构 数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网 ...

  2. BZOJ3864: Hero meet devil【dp of dp】

    Description There is an old country and the king fell in love with a devil. The devil always asks th ...

  3. day25 python学习 继承，钻石继承 多态

    ---恢复内容开始--- 通过一个列子认识父类和子类中,子类的如何实现对父类默认属性调用,同时拥有自己的属性,如何在子类中调用父类的方法,class Ainmal: country='afdas' d ...

  4. leetcode:Maximum Depth of Binary Tree【Python版】

    # Definition for a binary tree node # class TreeNode: # def __init__(self, x): # self.val = x # self ...

  5. STORJ 有实际应用

    STORJ 有实际应用,Filezilla 支持 STORJ 的分布式协议.

  6. Apache+modproxy布置tomcat集群

    一.环境: Apache: 2.2.14: 下载地址:http://archive.apache.org/dist/httpd/binaries/win32/ Tomcat: 7.0.82 JDK1. ...

  7. [C++ Primer] : 第12章: 动态内存

    动态内存与只能指针 静态内存用来保存局部static对象, 类static数据成员以及定义在任何函数之外的变量. 栈内存用来保存定义在函数内的非static对象. 分配在静态或栈内存中的对象由编译器自 ...

  8. MySQL 查看编码 排序规则

    查看数据库的排序规则 mysql> show variables like 'collation%'; +----------------------+-------------------+ ...

  9. 重建oracle的em

    重建oracle的em   今天不知道怎么,心血来潮,就把本机从域里退了出去,然后准备把oracle11g的control给处理处理 一开始也没怎么用心,上网随便找了点资料,就照着干了,然后什么都没干 ...

  10. Python中的偏函数

    偏函数是从Python2.5引入的一个概念,通过functools模块被用户调用. 偏函数是将所要承载的函数作为partial()函数的第一个参数,原函数的各个参数依次作为partial()函数后续的 ...