内容：

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. iOS-----推送机制(下)

    推 送 机 制(下) 单击”从证书颁发机构请求证书”后,将会显示下图所示的对话框 输入电子邮件地址和常用名称,并选中“存储到磁盘”单选钮,然后单击“继续”按钮,该程序将会创建一个“Certificat ...

  2. [python]自问自答：python -m参数？ （转） （ python2.7 版本 ）

    原文地址: http://www.cnblogs.com/xueweihan/p/5118222.html python -m xxx.py 作用是:把xxx.py文件当做模块启动 但是我一直不明白当 ...

  3. HihoCoder - 1867: GCD (莫比乌斯容斥)

    Sample Input 6 1 6 2 5 3 4 Sample Output 10 You are given a {1, 2, ..., n}-permutation a[1], a[2], . ...

  4. HDU 1084：What Is Your Grade?

    Problem Description "Point, point, life of student!" This is a ballad(歌谣)well known in col ...

  5. HDU 2009

    求数列的和 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submiss ...

  6. Spring Data JPA Hibernate @QueryHints

    另一个实例: http://leobluewing.iteye.com/blog/2032396 : 本文内容来源:https://blog.csdn.net/gavinchen1985/articl ...

  7. JS前端数据多条件筛选(商品搜索)

    有时候也会需要在前端进行数据筛选,增强交互体验.当数据可用的筛选条件较多时,把逻辑写死会给后期维护带来很大麻烦.下面是我自己写的一个简单的筛选器,筛选条件可以根据数据包含的字段动态设置. 仿照京东的筛 ...

  8. 南阳oj-ASCII码排序-用了一个晚上

    #include <iostream> #include <sstream> #include <stdio.h> #include <string> ...

  9. stenciljs 学习五 事件

    组件可以使用Event Emitter装饰器发送数据和事件. Event 定义 参考: import { Event, EventEmitter } from '@stencil/core'; ... ...

  10. watchtower 自动更新容器的工具

    watchtower 自动更新容器的工具 安装 使用docker docker run -d \ --name watchtower \ -v /var/run/docker.sock:/var/ru ...