[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>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- jquery中如何以逗号分割字符串_百度知道
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- struts2使用iterator标签显示嵌套Map - 云自无心水自闲 - BlogJava
"> <s:iterator value="dataMap.keySet()" id="class"> ...
- (中等) HDU 5046 Airport ，DLX+可重复覆盖+二分。
Description The country of jiuye composed by N cites. Each city can be viewed as a point in a two- d ...
- LPC1788做U盘的时候对命令的响应
首先是对于端点的数据处理 #ifndef __USBEP2_H_ #define __USBEP2_H_ #include "usb.h" #include "usbhw ...
- lPC1788的串口通讯
#ifndef __DEBUGSERIAL_H_ #define __DEBUGSERIAL_H_ #include "sys.h" #include "stdio.h& ...
- bzoj3110: [Zjoi2013]K大数查询 【cdq分治&树套树】
模板题,折腾了许久. cqd分治整体二分,感觉像是把询问分到答案上. #include <bits/stdc++.h> #define rep(i, a, b) for (int i = ...
- iOS 生产证书
首先登陆https://developer.apple.com(99美元账号) 选择iOS Developer program 板块下的 Certificates,Identifiers & ...
- 【转】国外程序员整理的 C++ 资源大全
内容包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++标准库,包括了STL容器,算法和函数等. C++ Standard Library:是一系列类 ...
- ajax 基础2
连接数据库实现分页功能 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Defa ...
- 设置MyEclipse黑色主题背景
设置MyEclipse黑色主题背景 1. 下载 http://eclipsecolorthemes.org/ 看哪个合适直接点击进入, 下载右边的epf 2. 下载完成...打开myeclipse. ...