导航
【初探HTML5之使用新标签布局】用html5布局我的博客页!
【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面
【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面
【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道?
【HTML5初探之本地存储】如果没有数据库。。。
【HTML5初探之离线应用】如何打造零请求、无流量的网站?
【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦
【HTML5初探之Web Workers】网页也能多线程
【HTML5初探之Geolocation API】让我们来回去地理信息
前言
虽说作为一个程序员来说,这件事情,比较丢人。但我还是说说吧,我不知哪天把我IE9浏览器怎么了一下,从此后我就不能正常的播放视频了。
每次都说flash版本过低神马的,重装也不行。。。。至今尚未解决,好吧,这个是有点丢人的了。
回过头来,我会痛苦各个浏览器之间的差异带来的痛苦,但若是在网页上不能看美女是更加令老夫愤怒的事情!!!
总的来说flash来说真的是王道!确实是王道,经久不衰,现在就是招人工资也很高的,虽说我一窍不通。
HTML出现了video与audio,对这两个元素我并不陌生,因为我早就用过了,他确实可以很好的解决flash带来的一些问题,
但想取代什么的还言之过早了吧,我也期待在IE11来临之际,电脑上至少都是IE9版本的浏览器了,各种HTML5网站已经层出不穷了。
视频播放
该章的内容很少,而且也没什么难度,这里可以很快的带过:
video与audio皆具有以下几种方法:
play 播放媒体元素
pause 暂停媒体元素
load 重新加载播放
canPlayType 检查浏览器是否支持媒体类型
相关事件:
loadstart 浏览器开始在网上寻找媒体数据
progress 正在获取数据
suspend 暂停获取数据,但下载过程并未正常结束
abort 数据下载结束前终止获取,但不是错误引起
error 获取数据过程出错
emptied 载入发生错误或者浏览器在选择播放格式时又调用了load方法重新载入
stalled 浏览器尝试获取媒体数据失败
play 当执行play方法时触发(即将播放)
pause 当执行pause方法时触发
......
太多了,以后还是查资料算了
视频播放
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <script src="../jquery-1.7.1.js" type="text/javascript"></script>
6 <script type="text/javascript">
7 $(document).ready(function () {
8 var v = $('#v')[0];
9 v.addEventListener('error', function () {
10 switch (v.error.code) {
11 case MediaError.MediaError_DECODE:
12 alert('解码失败');
13 break;
14 }
15
16 }, false);
17
18 $('#play').click(function () {
19 v.play();
20 });
21 $('#pause').click(function () {
22 v.pause();
23 });
24
25 });
26 </script>
27 </head>
28 <body>
29
30 <video id="v"src="tianzui.mp4" width="400px"heigt="400px" controls="controls"></video>
31 <br />
32 <button id="play">播放</button>
33 <button id="pause">暂停</button>
34 </body>
35 </html>
奇怪的是只有google可以,其它不行!!!
HTTP“Content-Type”中的“video/mp4”不支持。媒体资源
http://localhost:3317/html5%E4%B8%8Ecss3/04%E5%A4%9A%E5%AA%92%E4%BD%93%E6%92%AD%E6%94%BE/tianzui.mp4 加载失败。
据说该如此这般操作。。。
<video width="320" height="240" controls="controls">
<source src="a.ogg" type="video/ogg">
<source src="a.mp4" type="video/mp4">
your browser does not support the video tag.
</video>
结语
这章真没什么说的,要用的时候查询下资料就可以了
分享到:
相关推荐
使用html5实现的简单的音乐视频播放功能 比html4方便了不少
然而,在移动端Web技术领域,由于历史的原因,HTML5标准才刚刚起步,但随着HTML5和CSS3逐渐兴起,其强大的特性在移动Web应用当中得到了非常好的发挥。 随着HTML5网站、HTML5应用软件及HTML5游戏不断涌现,让我们更加...
初探多媒体融合的新闻网站经营之路.ppt
《HTML5周刊》是由HTML5中国策划,针对HTML5开发者的一份电子杂志,内容覆盖最新的行业资讯、移动浏览器最新动态、移动观察、HTML5技术专题、HTML5最新资源推荐、HTML5应用推荐、HTML5技术热点。 目录 001 业界资讯 ...
Html5开发PPT资料,参考别人,自己整理的
第5章 移动设备的常见HTML5表单元素 第6章 移动WEB界面样式 第7章 GEOLOCATION地理定位 第8章 轻量级框架JQUERY MOBILE初探 第9章 重量级富框架SENCHA TOUCH入门 第10章 跨平台的PHONEGAP应用介绍 第11章 构建基于...
这个是我在华为进行培训自己写的ppt,欢迎下载.
HTML-bfc初探
互联网时代气象科普微视频创作初探.pdf
幼儿多媒体教学运用初探.doc
博文:Mac+VSCode+Python之Flash初探 对应源码
初探元宇宙-元宇宙八大元素
HTML5游戏编程核心技术与实战 ...1.2.3 多媒体元素 1.2.4 地理信息服务 1.2.5 本地存储 1.2.6 Web sockets网络通信 1.2.7 Web Worker多线程 1.3 小结 第2章 Canvas绘图 2.1 基本知识 2.1.1 创建canvas 2.
flash动画初探说课稿.docx
多媒体网络作文的教学初探.docx
Python爬虫基础讲解(十四):初探selenium——元素提取
FLASH动画——电脑动画初探.pdf
多媒体技术引入中医教学——中医基础理论多媒体教学课件设计思想初探.pdf