[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>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- spring加载过程中jar包加载不了，解决方法
当我们在开发spring项目时,一般会将jar包放到webInf/lib下,这样是myeclipse自动将jar包加载到tomcat中webapps下,但是当我们新建一个lib文件夹的情况下,我们ad ...
- [即时通讯]openfire启动失败解决办法
当你发现你的电脑上的openfire无论你是重新安装还是重启都无法启动的情况下你可以按照我下面写的那些终端指令来启动你的openfire不用再去重新做你的系统了. 一般你发现你的openfire打开出 ...
- mysql trouble shooting---- 从库停止同步lock_wait_timeout_exceeded_try_restarting_transaction
问题描述: 数据库从库停止同步. 问题分析: show slave status\G;(也可使用show full processlist) 显示 某个update语句出错,Lock wait tim ...
- HUST 1354 Rubiks
背包.注释写详细了. 本想这样写:每个组内各自做背包,然后组间做背包,但是由于这题M=10000,时间复杂度太大. #include<cstdio> #include<cstring ...
- python_json常用的方法
1. 什么是JSON? JSON 可以将 JavaScript 对象中表示的一组数据转换为字符串,然后就可以在函数之间轻松地传递这个字符串,或者在异步应用程序中将字符串从 Web 客户机传递给服务器端 ...
- ios 添加PCH文件
- 【转】国外程序员整理的 C++ 资源大全
内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...
- STM32 定时器用于外部脉冲计数（转）
源:STM32 定时器用于外部脉冲计数 STM32 定时器(一)——定时器时间的计算 STM32的定时器是灰常NB的,也是灰常让人头晕的(当然是对于白菜来说的). STM32中的定时器有很多用法: ( ...
- js 设置url 参数值
//设置url中参数值 function setParam(param,value){ var query = location.search.substring(1); var p = new Re ...
- IOS开发中UIFont字体设置
我们在开发中很多时候要设置UIlabel,UIbutton,UItextfield的字体,这个时候我们就需要用到UIFont,下面简单介绍一下UIFont的用法,仅供参考. UIFont用于获取和设置 ...