内容：

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. 【opencv基础】测量运行时间的函数getTickCount/getCPUTickCount/getTickFrequency

    函数的计算结果类型是double,单位是秒. 要使用更精确的计时,就需要使用getCPUTickCount(),不过现代计算机CPU的频率会随着负载而变化所以没大有必要使用该函数,可以参看函数的介绍[ ...

  2. leetcode-1-TwoNums

    flag -everyday do leetcode problems at least one and at most three. problem here 需要学习的是c++的map类型,之前竟 ...

  3. 从 0 到 1 合理高效使用 GitHub 的资料

    来自:https://github.com/xirong/my-git/blob/master/how-to-use-github.md 说明 作为一名开发者,Github上面有很多东西值得关注学习, ...

  4. UVA 10305：Ordering Tasks（拓扑排序）

    #include <stdio.h> #include <string.h> #include <iostream> #include <algorithm& ...

  5. Xcode7（ linker command failed with exit code 1）

    ”Build Settings”->”Enable Bitcode”设置为NO ,因为有些SDK不支持Bitcode

  6. Python 操作Excel之通过xlutils实现在保留原格式的情况下追加写入数据

    在Python操作Excel 的模块有 xlrd.xlwt.xlutils等. xlrd:读取Excel文件数据 xlwt:写入Excel 数据,缺点是Excel格式无法复用,为了方便用户,写入的话, ...

  7. Microsoft-Excel Sheet Column Number

    Given a column title as appear in an Excel sheet, return its corresponding column number. For exampl ...

  8. c++hook全局触控事件

    https://gist.github.com/vbfox/1339671 namespace BlackFox { using System; using System.ComponentModel ...

  9. HDU3584 Cube

    分析 三维树状数组,跟二维的差不多,只不过容斥的不一样. 更新区间\((x_1,y_1,z_1)\rightarrow(x_2,y_2,z_2)\)时,需要利用容斥原理.须要更新的节点更新如下: \[ ...

  10. es6语法快速上手（转载）

    一.相关背景介绍 我们现在大多数人用的语法javascript 其实版本是ecmscript5,也是就es5.这个版本己经很多年了,且完美被各大浏览器所支持.所以很多学js的朋友可以一直分不清楚es5 ...