继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

HTML5初探之多媒体元素

html5零基础入门学习
关注TA
已关注
手记 246
粉丝 81
获赞 517

导航

【初探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>

结语

这章真没什么说的,要用的时候查询下资料就可以了

 

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP