html5 多媒体入门

多媒体 绘画 通信

今天做四件事

看电影

听歌

画画

聊天

VIDEO & AUDIO

大纲1. 视频发展史

2. 视频编解码器简介

3. HTML5 新标签介绍

4. HTML5 VS Flash 各⾃自的优势和劣势

5. 怎么发挥各自的优势

6. 开发自己的媒体播放器

视频发展史

• 90年代计算机里能够运行视频已经很酷，很少是在线的

• 2000年，在线视频已经真正出现，但是很混乱

• RealPlayer

• Quicktime

• Windows Media

存在的问题

• 没办法控制视频播放进度

• 不能提前缓冲视频

• 也没法探测视频文件是否被浏览器所支持

Flash开始接管

• 在2002年，Macromedia发布了Flash视频

• 在2003年，Macromedia发布了FLV格式的视频

• YouTube，在2005年独家使用了FLV格式的视频播放

• 2006年，Adobe添加了可选的H.264编码

• 2010年，Youtube开始测试HTML5视频播放器

<object id="UNIQUEID" height="520" width="528" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=9,0,0,0" classid="clsid:d27cdb6e- ae6d-11cf-96b8-444553540000" > <param value="../player/myVideoPlayer.swf" name="movie" /> <param value="true" name="allowFullScreen" /> <param value="all" name="allowNetworking" /> <param value="always" name="allowScriptAccess" /> <param value="opaque" name="wmode" /> <param value="myVideoFile.flv" name="FlashVars" /> <embed height="520" width="528" src="../player/mds_player.swf" id="UNIQUEID" wmode="opaque" allowscriptaccess="always" allownetworking="all" allowfullscreen="true" swf="../player/myVideoPlayer.swf" flashvars="myVideoFile.flv" pluginspage="http://www.macromedia.com/go/ getflashplayer" type="application/x-shockwave-flash" quality="high" /> </object>

Flash嵌入案例

目前计算机基本上都安装了Flash播放器，具备很强的界面控制能力

Flash的问题

1. Plugin 总不是一个优雅的解决方案

• 浏览器把某个区域交给Flash插件 ，如果出现意外会导致消耗大量内存，最终让机器都变得缓慢

2. Apple和Adobe也是分裂的关系

• 苹果的iPhone等根本就不支持Flash，这在移动互联网是没法忍受的问题

3. 依赖专项技术

• 使用它需要专⻔门学习ActionScript技术

HTML5嵌入案例

<audio controls> <source src="soundfile.mp3"> <source src="soundfile.ogg"> </audio>

<video controls loop autoplay> <source src="butterfly.mp4" type="video/mp4"> <source src="butterfly.webm" type="video/webm"> <source src="butterfly.ogv" type="video/ogg"> </video>

• controls : Displays the standard HTML5 controls for the audio on the web page.• autoplay : Makes the audio play automatically.• loop : Make the audio repeat (loop) automatically.

首先播放点噪音

实例演示

HTML5 格式之争

官方标准没有要求浏览器支持任何一种视频或音频格式

浏览器对媒体格式支持情况

视频文件相关概念

• 视频编解码器

• 音频编解码器

• 容器

为什么需要视频容器stream

HTML5的优势

• 一等公民

• 浏览器原生支持 / No Plugins

• 一个标签支持多个video类型

• 基础使用不需要JavaScript和ActionScript支持

• HTML5的可访问性更好，可以使用读屏软件读取

HTML5的问题

• 浏览器兼容问题，对 IE6,7,8 不友好

• 原生控件在各浏览器之间不统一

• 全屏能力不标准并且存在不统一的问题

• meta信息不够丰富，浏览器的BUG偏多

如何取舍

• 主选Flash, HTML5做后备

适合已经成熟使用Flash视频播放器，但又不想失去iPhone用户的人

• 主选HTML5, Flash做后备

面向未来的一种方式，比如Youtube

深入媒体播放器的API讲解

实例演示

用播放器给动画添加音效

实例演示

开发自己的媒体播放器和音乐播放器

实例演示

应用领域

1. Youtube等视频领域

2. 360音乐盒等播放器

3. 游戏动画、移动领域等各种音效

应该掌握的

• 了解 video & audio 的使用场景

• 什么时候该使用Flash，什么时候使用HTML5

• 怎么做好浏览器优雅兼容

• 音频、视频的标码格式以及浏览器兼容性的了解

• 学会并查找基础API的使用

• 自己定制音频或视频播放器的思路

• video & audio 的领域应用

canvas

大纲1. Canvas简介

2. Canvas起步

3. 构建基本的画图程序

4. 高级Canvas技术

5. 应用场景

6. Canvas与Video的结合

The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.

Canvas起步

1. 创建一个Canvas基础开发模板

2. 画直线

3. 画路径与形状

4. 绘制曲线

5. 变换

6. 透明度

画直线三步曲

1. 拿起画笔把笔头放在画布的一点上 moveTo

2. 顺势在画布上画一条直线 lineTo

3. 让直线显示出来 stroke

还可以用一些属性来美化效果

• lineWidth

• strokeStyle

• lineCap

实例演示

画三角形的步骤

1. 拿起画笔把笔头放在画布的一点上 moveTo

2. 顺势在画布上画每一条线段 lineTo

3. 然后用closePath来闭合路径

4. 使用fill填充颜色

5. 调用stroke描边

实例演示

变换

通过变化坐标系达到绘制的目的

1. translate 平移变换

2. scale 缩放变换

3. rotate 旋转变换

4. matrix 矩阵变换

实例演示

构建基础画图板

实例演示

高级Canvas技术

1. 绘制图像

2. 裁剪、切割和伸缩图片

3. 绘制文本

4. 阴影与填充

5. 填充图案

6. 填充渐变

实例演示

Canvas与Video结合

实例演示

应用场景

1. 游戏领域

• cocos2d

• egret

2. 绘图应用等

• 书法

3. 动态图表等

• chartjs

应该掌握的

• 了解 canvas 的使用场景

• 学会基础API和高级API

• 了解canvas的能力范围

• 了解canvas的应用场景以及业务方向

websocket

大纲1. WebSocket的前世今生

2. WebSocket 是什么

3. 为什么使用WebSocket

4. WebSocket于TCP、HTTP的关系

5. WebSocket API

6. WebSocket 实例

WebSocket的前世今生

已经有了HTTP协议，为什么还要websocket呢

1. HTTP协议是一种单向的网络协议，server不能主动推送数据给客户端

2. 假设开发一个基于Web服务器实时数据的应用，比如股票行情，聊天等应用，有哪些技术方案呢？

1. Polling

2. Long Polling

3. Flash

4. Websocket

WebSocket 简介

var wsServer = 'ws://localhost:8888/Demo'; var websocket = new WebSocket(wsServer); websocket.onopen = function (evt) { onOpen(evt) }; websocket.onclose = function (evt) { onClose(evt) }; websocket.onmessage = function (evt) { onMessage(evt) }; websocket.onerror = function (evt) { onError(evt) }; function onOpen(evt) { console.log("Connected to WebSocket server."); } function onClose(evt) { console.log("Disconnected"); } function onMessage(evt) { console.log('Retrieved data from server: ' + evt.data); } function onError(evt) { console.log('Error occured: ' + evt.data); }

WebSocket协议介绍

1. 当Client调用new WebSocket(url)的时候，就开始了与server建立握手的过程。

2. Client与WebSocket服务器通过TCP三次握手建立连接，如果这个建立连接失败，那么后面的过程就不会执行，Web应用程序将收到错误消息通知。

3. 在TCP建立连接成功后，Browser/UA通过http协议传送WebSocket支持的版本号，协议的字版本号，原始地址，主机地址等等一些列字段给服务器端。

4. WebSocket服务器收到Browser/UA发送来的握手请求后，如果数据包数据和格式正确，客户端和服务器端的协议版本号匹配等等，就接受本次握手连接，并给出相应的数据回复，同样回复的数据包也是采用http协议传输。

5. Browser收到服务器回复的数据包后，如果数据包内容、格式都没有问题的话，就表示本次连接成功，触发onopen消息，此时Web开发者就可以在此时通过send接口想服务器发送数据。否则，握手连接失败，Web应用程序会收到onerror消息，并且能知道连接失败的原因。

WebSocket与TCP、HTTP的关系

1. WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议

2. Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的

3. WebSocket和Http协议一样都属于应用层的协议

4. WebSocket在建立握手连接时，数据是通过http协议传输的，但是在建立连接之后，真正的数据传输阶段是不需要http协议参与的。

应用场景

1. 实时消息处理

2. 多人在线游戏

3. 如360谈谈，弹幕等

感谢聆听