[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>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- 已经安装了Myeclipse8.5 的情况下，激活myeclipse10.7要注意
使用下载好的10.7的包里的激活文件和提供的激活方法激活,不成功,在网上搜索了很多方法试过也不成功,最后打开安装目录D:\MyEclipse 10下的myeclipse.ini文件,发现如下内容: . ...
- Cocos2dx 3.1.1 将一个2.X的项目改成3.1版本
最近在论坛上下载到了一个Cocos2dx的单机跑酷例子, 也不知道是2.x版的, 花了一天时间试着把他改成3.1.1的试试, 现在已经可以顺利编译的, 但是还是有Heap Free的问题,调试了好几天 ...
- C# DateTime变量不能赋null值
使用定时器的时候: DateTime aimtime=DateTime.Now.AddSeconds(1); CheckTimer() { if(DateTime.Now.CompareTo(aimt ...
- iOS8学习笔记-构建多视图应用程序
严格来说,凡是UIView的子类都可以称为视图,实际上IOS的图形界面就是视图包含视图的方案,绝大多数的控件都是UIView的子类,但是苹果公司定义的视图术语,通常是指具有相应视图控制器的uiview ...
- LWIP_STM32_ENC28J60_NETCONN_UDP（3）
前面移植了lwip之后只是简单地做了一个dhcp的程序,但是实际工作中经常要用来通讯,那今天就来讲一讲怎么用lwip来进行UDP通讯 要使用数据通信首先第一步得知道lwip是怎么样保存数据的,在使用n ...
- Kconfig基本语法
Linux 内核在2.6版本以后将配置文件由原来的config.in改为Kconfig.当执行make menuconfig时会出现内核的配置界面,所有配置工具都是通过读取arch/$(ARCH)Kc ...
- tableView滑动到底部
- (void)scrollToBottom { NSInteger sectionCount = [self.dataSource numberOfSectionsInTableView:self] ...
- php+socket模拟表单发送请求
<?php /** * http请求类(php + socket) * @todo 这里还有很多未完善的地方,仅有简单的get post head请求 * @author chuangrain@ ...
- swift新特性（__nullable和__nonnull
http://www.mamicode.com/info-detail-923593.html 最近在看老师写代码的时候经常遇到两个陌生的关键字,但是当我在我的电脑上敲得时候就是敲不出,后来才知道这是 ...
- 《C程序设计语言》读书笔记----习题1-20
练习1-20:编写程序detab,将输入中的制表符替换成适当数目的空格,使得空格充满到下一个制表符终止位的地方,.假设制表符终止位的位置时固定的,比如每隔n列就会出现一个终止位. 这里要理解“制表符” ...