[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>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- 酷炫的方块状散点3D
http://threejs.org/examples/webgl_particles_random.html
- spring3mvc与struts2比较
目前企业中使用SpringMvc的比例已经远远超过Struts2,那么两者到底有什么区别,是很多初学者比较关注的问题,下面我们就来对SpringMvc和Struts2进行各方面的比较: 1. 核 心控 ...
- openstack controller ha测试环境搭建记录（四）——配置mysql数据库集群
内容正式开始前,我已经在集群中添加了新的节点controller1(IP地址为10.0.0.14). 在所有节点上安装软件:# yum install -y mariadb-galera-server ...
- Photoshop安装
作者:郑超 参考地址:http://bbs.weiphone.com/read-htm-tid-4594713.html 下载地址:http://www.adobe.com/downloads.htm ...
- LearningDocker--Chapter3--Building images
This chapter is quite different from the earlier ones, and it is in this chapter to clearly describe ...
- Thinking in scala (5)----高阶函数*
高阶函数是函数式编程里面一个非常重要的特色,所谓的高阶函数,就是以其它函数作为参数的函数. 下面以一个小例子演示Scala的高阶函数特性,非常有意思,也非常强大. 首先看这么一个程序: code1: ...
- 用简单的http抓包来实现微信公众网页如何模拟登录
一.准备工具: 系统:XP 浏览器:IE8 抓包工具:HttpWatch(它可以查看url请求的数据包) 二.抓包思路: 浏览器上的任何获取数据的方式都符合http协议的请求,只要发送符合要求的数据就 ...
- ubuntu 16.04 php 安装curl方法
先查看自己的php是否已经安装了curl.方法如下:1.在web服务器目录( Ubuntu下的通常为 /var/www )新建test.php文件2.编辑文件,键入下面一行代码:<?php ph ...
- UVa 299 - Train Swapping
题目大意:给n个数的一个序列,通过交换相邻的两个数使得这n个数按照从小到大的顺序排列. Inversion index problem: count how many swaps are needed ...
- 如何备份、还原或迁移 WhatsApp 的信息和资料？
WhatsApp 会在每天清晨 2 点钟自动创建本地备份文件并将备份文件存储在手机系统设置的文件夹中. Google 云端硬盘 您可以备份对话记录和媒体到 Google 云端硬盘以便日后更换手机时仍可 ...