导航
【初探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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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"class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="a.ogg" type="video/ogg"> <source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="a.mp4" type="video/mp4"> your browser does not support the video tag. </video> |
结语
这章真没什么说的，要用的时候查询下资料就可以了
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
