HTML5 特性,包括原生音频和视频支持而无需 Flash。

HTML5 和 标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源,包含 controls 属性让用户可以播放和暂停媒体。

嵌入视频下面是在 Web 页面中嵌入视频文件最简单的形式:

XML/HTML Code复制内容到剪贴板

Your browser does not support theelement.

目前的 HTML5 规范草案还没有指定浏览器应该在 video 标签中支持哪种视频格式。但是最常用的视频格式是:

Ogg:带有 Thedora 视频编码器和 Vorbis 音频编码器的 Ogg 文件。

mpeg4:带有 H.264 视频编码器和 AAC 音频编码器的 MPEG4 文件。

我们可以使用带有媒体类型和其他属性的 标签指定媒体文件。video 元素允许使用多个 source 元素,浏览器会使用第一个认可的格式:

XML/HTML Code复制内容到剪贴板

HTML>

Your browser does not support theelement.

Video 属性规范HTML5 video 标签可以使用多个属性控制外观和感觉以及各种控制功能:

属性

描述

autoplay

如果指定这个布尔值属性,只要没有停止加载数据,视频就会立刻开始自动播放。

autobuffer

如果指定这个布尔值属性,即使没有设置自动播放,视频也会自动开始缓冲。

controls

如果指定这个属性,就允许用户控制视频播放,包括音量控制,快进,暂停或者恢复播放。

height

这个属性以 CSS 像素的形式指定视频显示区域的高度。

loop

如果指定这个布尔值属性,表示允许播放结束后自动回放。

preload

指定这个属性,视频会在载入页面时加载并准备就绪。如果指定自动播放则忽略。

poster

这是一个图像 URL,显示到用户播放或快进。

src

要嵌入的视频 URL。可选,可以在 video 块中使用 元素替代来指定要嵌入的视频。

width

这个属性以 CSS 像素的形式指定视频显示区域的宽度。

嵌入音频HTML5 支持的 标签用于在如下所示的 HTML 或 XHTML 文档中嵌入语音内容。

XML/HTML Code复制内容到剪贴板

Your browser does not support theelement.

当前的 HTML 草案规范还没有指定浏览器应该在 audio 标签中支持哪种音频格式。但是最常用的音频格式是 ogg,mp3 和 wav。

我们可以使用带媒体类型以及其他属性的的 标签指定媒体。Audio 元素允许使用多个 source 元素,并且浏览器会使用第一个认可的格式:

XML/HTML Code复制内容到剪贴板

HTML>

Your browser does not support theelement.

Audio 属性规范

HTML5 audio 标签可以使用多个属性来控制外观,感受以及各种控制功能:

属性

描述

autoplay

如果指定这个布尔值属性,只要没停止加载数据,音频就会立刻自动开始播放。

autobuffer

如果指定这个布尔值属性,即使没有设置自动播放,音频也会自动开始缓冲。

controls

如果指定这个属性,表示允许用户控制音频播放,包括音量控制,快进以及暂停/恢复播放。

loop

如果指定这个布尔值属性,表示允许音频播放结束后自动回放。

preload

这个属性指定加载页面时加载音频并准备就绪。如果指定自动播放则忽略。

src

要嵌入的音频 URL。可选,可以在音频块里面使用 元素指定要嵌入的音频来替代。

处理媒体事件HTML5 audio 和 video 标签可以用多个属性利用 JavaScript 控制各种控制功能:

事件

描述

abort

播放中止时生成这个事件。

canplay

足够的数据可用并且媒体可以播放时生成这个事件。

ended

播放完成时生成这个事件。

error

发生错误时生成这个事件。

loadeddata

媒体第一帧载入完成时生成这个事件。

loadstart

开始加载媒体时生成这个事件。

pause

播放暂停时生成这个事件。

play

播放开始或者恢复时生成这个事件。

progress

定期通知媒体下载进度时生成这个事件。

ratechange

播放速度改变时生成这个事件。

seeked

快进操作完成时生成这个事件。

seeking

快进操作开始时生成这个事件。

suspend

媒体加载被暂停时生成这个事件。

volumechange

音频音量变化时生成这个事件。

waiting

请求操作(比如播放)被延迟,等待另一个操作完成(比如快进)时生成这个事件。

下面是一个允许播放给定视频的示例:

XML/HTML Code复制内容到剪贴板

HTML>

function PlayVideo(){

varv=document.getElementsByTagName("video")[0];

v.play();

}

Your browser does not support theelement.

配置服务器媒体类型大多数服务器默认都没使用正确的 MIME 类型提供 Ogg 或 mp4 媒体,因此我们可能需要添加适当的配置。

复制代码代码如下:

AddType audio/ogg .oga

AddType audio/wav .wav

AddType video/ogg .ogv .ogg

AddType video/mp4 .mp4

html5中加入音频,使用HTML5在网页中嵌入音频和视频播放的基本方法相关推荐

  1. html将excel数据自动导入到网页,如何把excel表中的数据自动输入到网页中

    怎么把excel表中的数据自动输入到网页中 因要给员工网上投工伤保险,员工资料在excel表中,现在在网上投保险时只能一笔笔的复杂粘贴到网页中,有没有办法能直接把excel表中的资料自动输入到网页中的 ...

  2. 在Scrapy中如何利用Xpath选择器从网页中采集目标数据——详细教程(下篇)

    点击上方"Python爬虫与数据挖掘",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 二十四桥明月夜, 玉人何处教吹箫. ...

  3. pdf在html中加载不出来,在网页中打开显示PDF

    在这里呢,本站仅为大家讲解在网页中显示PDF文件的简单方法,注意,是简单方法,同时,本站已验证过如下的相关代码,测试已通过. 当然,有的朋友可能会问,是否能达到像百度文库那样在网页中显示PDF?回答是 ...

  4. 在html表格中怎么创建下拉列表,在html网页中如何做个下拉列表?下拉列表的方法有哪几种?...

    在我们是html学习中,我们会遇到各种不同的标签,那么今天我们就来说说"在html网页中如何做个下拉列表"吧!以下是小编整理的一个方法. 1.首先我们在开发工具中新建一个新的文件, ...

  5. html 表格是网页中的数据,用 Pandas 读写网页中的 HTML 表格数据

    介绍超文本标记语言(HTML)是用于构建网页的标准标记语言.我们可以使用HTML的 Programming LanguageCreatorYear CDennis Ritchie1972PythonG ...

  6. 在html中显示word,如何在浏览器网页中显示word文件内容

    把word文件读到byte[]中,再Response.OutputStream.Write(bytes)到客户端去 Page_Load事件中写: //FileStream   fs   =   new ...

  7. android会中病毒吗,安卓手机浏览网页中病毒几率多大

    手机病毒作为一种新兴类型病毒在现今手机用户中迅速发展,尤其是我国进入4G网络之后,高带宽的手机通信传输网络为手机病毒的.传播都供了温床.那么,安卓手机浏览网页中病毒几率多大那?就让佰佰安全网的小编和你 ...

  8. 如何在html中做一个表格模板,【网页中表格教案】教案表格模板

    第三课 在网页中插入表格 一.教材分析 网页制作中用表格来规划整个网页的布局,是我们设计制作网页常用的手法.所以学会在网页中插入表格是网页制作中的一个重要的部分.本课的主要内容包括在网页中插入表格,表 ...

  9. html网页中加五角星,使用css3在网页中实现五角星样式(原理解析)

    本篇文章给大家带来的内容是关于使用css3在网页中实现五角星样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我们平时在web网页中看到的各种图形包括正方形,长方形,三角形,圆形等 ...

  10. python提取网页中表格数据_Python2 BeautifulSoup 提取网页中的表格数据及连接

    网址:http://quote.eastmoney.com/ce- 要做的是提取网页中的表格数据(如:板块名称,及相应链接下的所有个股,依然是个表格) 暂时只写了这些代码: import urllib ...

最新文章

  1. 【linux】ubuntu14.04升级dbus到1.13.8,杯具了,无法进入桌面
  2. 动软代码生成V2.74模版简介
  3. 使用 Redis 实现一个轻量级的搜索引擎
  4. 关于LeTax中图形放置的参数理解
  5. 使用FakeAsync对Angular异步代码进行单元测试
  6. Ajax 生成流文件下载 以及复选框的实现
  7. 使用镜像源安装EASY_INSTALL和PIP教程
  8. html5善于盒模型定位,2个小时上手html+css-003盒模型和定位
  9. linux--安装完qt出现 /usr/bin/ld: error: cannot find -lGL错误
  10. android 颜色0x00,Android 状态栏颜色兼容方案
  11. 从零实现深度学习框架——Softmax回归简介
  12. Oliver运维管理系统之一庐山真面目
  13. Mysql ORDER BY用法的一点理解
  14. 游侠原创:VMware ESXi 5安装图文教程
  15. 狂打气球html5游戏_4399h5游戏_企业团建活动小游戏:合力吹气球
  16. msdn我告诉你win10哪个是专业版
  17. DDD原著 -- 第一章 知识消化
  18. 简洁好用的数据库表结构文档生成工具screw
  19. windows下 apache配置rewrite错误解决
  20. PDF裁剪页面及调整页面大小的方法

热门文章

  1. 面向对象3(final、static、instanceof、向上/向下转型、初始化次序)
  2. deb 安装_本地安装DEB包的3种命令行工具(适合Ubuntu和Deepin )
  3. C/Cpp / STL / map 的 key 为自定义的 struct 或者 class 时,有什么注意事项?
  4. Esp32-CAM(ESP32带camera)使用说明
  5. windows10mysql安装包_windows10上安装mysql8(zip包)
  6. linux串口boost,Boost串口通信第一课 boost::asio::serial_port基本使用
  7. cka教程_2020年11月新版CKA考试心得
  8. 技术干货 | 基于 Doris 构建的小程序私域流量增长
  9. 电脑反应慢卡怎么解决_电脑开不了机怎么解决?
  10. 国产linux 中标麒麟安装.net core sdk