内容：

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. TF-IDF算法（2）—python实现

    参加完数模之后休息了几天,今天继续看TF-IDF算法.上篇中对TF-IDF算法已经做了详细的介绍,在此不再赘述.今天主要是通过python,结合sklearn库实现该算法,并通过k-means算法实现 ...

  2. 在MNIST数据集，实现多个功能的tensorflow程序

    使用带指数衰减的学习率的设置.使用正则化来避免过拟合,使用滑动平均模型使得最终模型更加健壮. import tensorflow as tf from tensorflow.examples.tuto ...

  3. STM32 用c语言控制4个LED灯从左向右无限流动

    在用c语言写LED流水灯的前提条件是配置好其他环境,这里我就不说环境了, 想让LED灯无限循环时,首先要想到的是无限循环函数,我这里利用的是for函数 无限循环. #include "stm ...

  4. 转：三种状态对象的使用及区别(Application,Session,Cookie)

    Application状态对象 Application 对象是HttpApplication 类的实例,将在客户端第一期从某个特定的ASP.NET应用程序虚拟目录中请求任何URL 资源时创建.对于We ...

  5. Linux操作系统网络配置

  6. 《DSP using MATLAB》 Problem 3.22

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  7. Entities、pads、links 实体、垫、链接

    Entities.pads.links 实体.垫.链接 Entities:1.实体由一个struct media_entity实例表示.结构通常嵌入到一个较高级别的结构,例如v4l2_subdev或v ...

  8. 整理开源协议问题 GPL APACHE

    整理开源协议问题 GPL APACHE APACHE 和 GPL 互相不兼容. APACHE 不可以使用 GPL 的代码. 但是 APACHE 可以调用 GPL 组件的接口. 比如 Linux 和 A ...

  9. 调试 FastAdmin 出现 Failed to parse SourceMap

    看到群里有人说在调试 FastAdmin出现 SourceMap 出错. 报错信息为: Failed to parse SourceMap 来自 Karson 说明: 这个文件是用于匹配原有less中 ...

  10. python 网络编程要点

    From http://www.zhihu.com/question/19854853 Python网络编程是一个很大的范畴,个人感觉需要掌握的点有:1. 如何使用Python来创建socket, 如 ...