html5 多媒体入门
TRANSCRIPT
![Page 1: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/1.jpg)
多媒体 绘画 通信
![Page 2: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/2.jpg)
今天做四件事
看电影
听歌
画画
聊天
![Page 3: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/3.jpg)
VIDEO & AUDIO
![Page 4: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/4.jpg)
大纲1. 视频发展史
2. 视频编解码器简介
3. HTML5 新标签介绍
4. HTML5 VS Flash 各⾃自的优势和劣势
5. 怎么发挥各自的优势
6. 开发自己的媒体播放器
![Page 5: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/5.jpg)
视频发展史
• 90年代计算机里能够运行视频已经很酷,很少是在线的
• 2000年,在线视频已经真正出现,但是很混乱
• RealPlayer
• Quicktime
• Windows Media
![Page 6: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/6.jpg)
存在的问题
• 没办法控制视频播放进度
• 不能提前缓冲视频
• 也没法探测视频文件是否被浏览器所支持
![Page 7: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/7.jpg)
Flash开始接管
• 在2002年,Macromedia发布了Flash视频
• 在2003年,Macromedia发布了FLV格式的视频
• YouTube,在2005年独家使用了FLV格式的视频播放
• 2006年,Adobe添加了可选的H.264编码
• 2010年,Youtube开始测试HTML5视频播放器
![Page 8: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/8.jpg)
<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播放器,具备很强的界面控制能力
![Page 9: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/9.jpg)
Flash的问题
1. Plugin 总不是一个优雅的解决方案
• 浏览器把某个区域交给Flash插件 ,如果出现意外会导致消耗大量内存,最终让机器都变得缓慢
2. Apple和Adobe也是分裂的关系
• 苹果的iPhone等根本就不支持Flash,这在移动互联网是没法忍受的问题
3. 依赖专项技术
• 使用它需要专⻔门学习ActionScript技术
![Page 10: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/10.jpg)
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.
![Page 11: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/11.jpg)
首先播放点噪音
实例演示
![Page 12: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/12.jpg)
HTML5 格式之争
官方标准没有要求浏览器支持任何一种视频或音频格式
![Page 13: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/13.jpg)
浏览器对媒体格式支持情况
![Page 14: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/14.jpg)
视频文件相关概念
• 视频编解码器
• 音频编解码器
• 容器
为什么需要视频容器stream
![Page 15: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/15.jpg)
HTML5的优势
• 一等公民
• 浏览器原生支持 / No Plugins
• 一个标签支持多个video类型
• 基础使用不需要JavaScript和ActionScript支持
• HTML5的可访问性更好,可以使用读屏软件读取
![Page 16: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/16.jpg)
HTML5的问题
• 浏览器兼容问题,对 IE6,7,8 不友好
• 原生控件在各浏览器之间不统一
• 全屏能力不标准并且存在不统一的问题
• meta信息不够丰富,浏览器的BUG偏多
![Page 17: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/17.jpg)
如何取舍
• 主选Flash, HTML5做后备
适合已经成熟使用Flash视频播放器,但又不想失去iPhone用户的人
• 主选HTML5, Flash做后备
面向未来的一种方式,比如Youtube
![Page 18: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/18.jpg)
深入媒体播放器的API讲解
实例演示
![Page 19: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/19.jpg)
用播放器给动画添加音效
实例演示
![Page 20: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/20.jpg)
开发自己的媒体播放器和音乐播放器
实例演示
![Page 22: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/22.jpg)
应该掌握的
• 了解 video & audio 的使用场景
• 什么时候该使用Flash,什么时候使用HTML5
• 怎么做好浏览器优雅兼容
• 音频、视频的标码格式以及浏览器兼容性的了解
• 学会并查找基础API的使用
• 自己定制音频或视频播放器的思路
• video & audio 的领域应用
![Page 23: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/23.jpg)
canvas
![Page 24: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/24.jpg)
大纲1. Canvas简介
2. Canvas起步
3. 构建基本的画图程序
4. 高级Canvas技术
5. 应用场景
6. Canvas与Video的结合
![Page 25: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/25.jpg)
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.
![Page 26: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/26.jpg)
Canvas起步
1. 创建一个Canvas基础开发模板
2. 画直线
3. 画路径与形状
4. 绘制曲线
5. 变换
6. 透明度
![Page 27: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/27.jpg)
画直线三步曲
1. 拿起画笔把笔头放在画布的一点上 moveTo
2. 顺势在画布上画一条直线 lineTo
3. 让直线显示出来 stroke
还可以用一些属性来美化效果
• lineWidth
• strokeStyle
• lineCap
实例演示
![Page 28: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/28.jpg)
画三角形的步骤
1. 拿起画笔把笔头放在画布的一点上 moveTo
2. 顺势在画布上画每一条线段 lineTo
3. 然后用closePath来闭合路径
4. 使用fill填充颜色
5. 调用stroke描边
实例演示
![Page 29: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/29.jpg)
变换
通过变化坐标系达到绘制的目的
1. translate 平移变换
2. scale 缩放变换
3. rotate 旋转变换
4. matrix 矩阵变换
实例演示
![Page 30: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/30.jpg)
构建基础画图板
实例演示
![Page 31: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/31.jpg)
高级Canvas技术
1. 绘制图像
2. 裁剪、切割和伸缩图片
3. 绘制文本
4. 阴影与填充
5. 填充图案
6. 填充渐变
实例演示
![Page 32: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/32.jpg)
Canvas与Video结合
实例演示
![Page 33: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/33.jpg)
应用场景
1. 游戏领域
• cocos2d
• egret
2. 绘图应用等
• 书法
3. 动态图表等
• chartjs
![Page 34: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/34.jpg)
应该掌握的
• 了解 canvas 的使用场景
• 学会基础API和高级API
• 了解canvas的能力范围
• 了解canvas的应用场景以及业务方向
![Page 35: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/35.jpg)
websocket
![Page 36: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/36.jpg)
大纲1. WebSocket的前世今生
2. WebSocket 是什么
3. 为什么使用WebSocket
4. WebSocket于TCP、HTTP的关系
5. WebSocket API
6. WebSocket 实例
![Page 37: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/37.jpg)
WebSocket的前世今生
![Page 38: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/38.jpg)
已经有了HTTP协议,为什么还要websocket呢
1. HTTP协议是一种单向的网络协议,server不能主动推送数据给客户端
2. 假设开发一个基于Web服务器实时数据的应用,比如股票行情,聊天等应用,有哪些技术方案呢?
1. Polling
2. Long Polling
3. Flash
4. Websocket
![Page 39: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/39.jpg)
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); }
![Page 40: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/40.jpg)
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消息,并且能知道连接失败的原因。
![Page 41: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/41.jpg)
WebSocket与TCP、HTTP的关系
1. WebSocket与http协议一样都是基于TCP的,所以他们都是可靠的协议
2. Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的
3. WebSocket和Http协议一样都属于应用层的协议
4. WebSocket在建立握手连接时,数据是通过http协议传输的,但是在建立连接之后,真正的数据传输阶段是不需要http协议参与的。
![Page 42: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/42.jpg)
应用场景
1. 实时消息处理
2. 多人在线游戏
3. 如360谈谈,弹幕等
![Page 43: HTML5 多媒体入门](https://reader031.vdocuments.site/reader031/viewer/2022013118/55baea92bb61ebf9308b46ec/html5/thumbnails/43.jpg)
感谢聆听