[html5] 学习笔记-html5音频视频
HTML5 最大的新特色之一就是支持音频和视频。在 HTML5 之前,我们必须使用插件如 Silverlight 或 Flash 来实现这些功能。在 HTML5 中,可以直接使用新标签< audio> 和 < video>将音频和视频嵌入到页面。
1、音频播放
Audio（音频），html5提供了播放音频文件的标准
control（控制器），龚添加播放、暂停和音量控件
标签：<audio> 定义声音；<source>，定义多媒体资源，可以是多个
<body>
<!--使用浏览器自带播放控件-->
<audio src="catelog/1.mp3" controls="controls"></audio>
<!--自定义播放控件-->
<button onclick="clickA()">播放/暂停</button>
<audio id = "audio" src="catelog/1.mp3"></audio>
<script>
var state = document.getElementById("audio");
function clickA() {
if (state.paused) {
state.play();
}else{
state.pause();
}
}
</script>
</body>
2、编解码工具
不同的浏览器支持的视频格式不同，chrome支持mp4格式，而safari支持ogg格式，因此需要有编解码工具来进行转码。
FFmpeg:www.ffmpeg.org 使用得非常广泛的一款工具，大部分编解码工具是使用它做内核
关于该工具的介绍，可以参考简书上一个作者的文章：http://www.jianshu.com/p/7ed3be01228b
我下载的是windows的Static版本，主要的操作有，进入到ffmpeg.exe所在目录，执行以下命令，即可完成1.mp4向1.ogg的转码：
ffmpeg -i 1.mp4 1.ogg
进入到ffplay.exe所在目录，执行以下命令，即可完成1.ogg的播放：
ffplay 1.ogg
3、视频播放
Video（视频）:html5提供了展示视频的标准
control（控制器）：control属性提供添加播放、暂停和音量控件
标签：<video>定义声音 <source>规定多媒体资源，可以是多个
属性：width 宽 height 高
<body>
<video src="1.mp4" controls="controls"></video>
<!--让浏览器全部兼容，则把所有格式的文件都放入-->
<video controls="controls">
<source src="1.mp4">
<source src="1.ogg">
</video>
<!--自定义播放器-->
<button onclick="clickV()">播放/暂停</button>
<button onclick="clickBig()">放大</button>
<button onclick="clickSmall()">缩小</button>
<video id="video" width="500px" height="300px">
<source src="1.mp4">
<source src="1.ogg">
</video>
<script>
var v = document.getElementById("video");
function clickV() {
if (v.paused) {
v.play();
}else{
v.pause();
}
}
function clickBig(){
v.width = 800;
v.height = 800;
}
function clickSmall(){
v.width = 300;
v.height = 100;
}
</script>
</body>
[html5] 学习笔记-html5音频视频的更多相关文章
- HTML5学习笔记----html5与传统html区别
一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: HTML5的文件扩展符(.html或.htm)与内容类型(text/html)保持不变. HTML5中 ...
- [html5] 学习笔记-html5增强的页面元素
在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress. ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记 音频
HTML5提供了播放音频的标准. Web上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件比如flash来播放的.然而,并非所有的浏览器都拥有同样的插件. hmt ...
- HTML5 学习笔记（一）——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- 导出WAS已部署的ear包的几种方法
可以通过下面几种办法将部署好的工程导出为一个ear包. 1.最简单的,通过was的控制台导出: 首先登录控制台,进入"企业应用程序"管理页面,选中要导出的工程,点击"导出 ...
- JAVA中浅复制与深复制 - coolmist - ITeye技术网站
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- python redis list操作
LPUSH list_name value [value ...] Prepend one or multiple values to a list 从左侧插入值,最早插入的值在最右边 LPUSHX ...
- JMS连接WMQ及收发消息
因为对JMS的了解也只算入门级,有些概念也很模糊,不过,卤煮会尽可能去介绍的.另外,sample code都调试过可以跑. 1.神马是JMS? jms即Java消息服务(Java Message Se ...
- Unity3d ShaderLab之WorldNormalVector
首先来看看Unity 3d官方文档上对WorldNormalVector的解释: float3 worldNormal; INTERNAL_DATA - will contain world norm ...
- tp框架实现文件上传
public function shangchuan() { $this->display(); } public function upload() { $uplode= new \Think ...
- CI分页器pagination的原理及实现
以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 下面这段代码是从官网上翻译过来的,介绍了分页的用例 1 2 3 4 5 6 ...
- js设置文本框只能输入数字
JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...
- RabbitMQ消息队列（三）：任务分发机制
在上篇文章中,我们解决了从发送端(Producer)向接收端(Consumer)发送“Hello World”的问题.在实际的应用场景中,这是远远不够的.从本篇文章开始,我们将结合更加实际的应用场景来 ...
- Beautiful Soup 定位指南
Reference: http://blog.csdn.net/abclixu123/article/details/38502993 网页中有用的信息通常存在于网页中的文本或各种不同标签的属性值,为 ...