【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？

前言

虽说作为一个程序员来说，这件事情，比较丢人。但我还是说说吧，我不知哪天把我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>

结语

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

posted on 2013-04-19 14:42 叶小钗阅读(1616) 评论(2) 编辑收藏举报

【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道？

导航

前言

视频播放

结语