[HTML5 特效] 超酷的HTML5在线视频播放功能

HTML5的强势来袭,给视频网站带来了机遇也面临着巨大的挑战,HTML5可以实现非常强大的视频播放效果!可以通过使用HTML5 Canvas来实现视频框左右两侧的光线效果。 HTML5 Canvas 下面来看看由HTML5 Canvas来实现的视频播放效果(请使用Google浏览器查看)!如果视频没有自动播放请点击工具栏中的播放按钮,视频文件为MP4格式,需要缓冲一下。 在线播放地址: http://www.html51.com/topic-demo-html5-video-simple.html   网页源码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5 video标签demo在线演示 - HTML51.COM</title>         <style type="text/css">                  body {                         background:#000;                         padding:0;                         margin:0;                         overflow:hidden;                         width:100%;                         height:100%;                         font-family:sans-serif;                         font-size:10px;                         color: #666;                 }                                  #video-wrap {                         position:relative;                         margin:100px auto 10px auto;                         width:592px;                 }                                  video {                         border:5px solid rgba(30,30,30,0.7);                         -webkit-border-radius:3px;                         position:relative;                         z-index:3;                         font-size:12px;                 }                                  canvas.ambilight-left,                 canvas.ambilight-right {                         position:absolute;                         width:300px;                         height:200%;                         top:-50%;                 }                                  canvas.ambilight-left {                         left:-270px;                         top:-53%;                         background-image:url(mask3-left.png);                 }                                  canvas.ambilight-right {                         right:-270px;                         top:-51%;                         background-image:url(mask3-right.png);                 }                                  #copyright {                         text-align:center;                 }                                  #copyright a {                         color: #ccc;                         position:absolute;                         bottom:0;                         right:0;                 }         </style>     <script type="text/javascript" src="jquery-1.4.2.min.js"></script>     <script type="text/javascript" src="ambilight.js"></script> </head>  <body>         <div id="video-wrap">          <video id="example" height="256" width="592" controls="true" autobuffer="true">              <source src="demo.mp4" type="video/mp4" />             <p>您的浏览器不支持HTML5 <video> 标签</p>          </video>      </div>      <div id="copyright"><a href="http://james-watson.net/">From James Watson</a></div>      <script type="text/javascript">          ambiLight.create(document.getElementById('example'))     </script> </body> </html>
主要就是ambilight.js这个文件控制canvas展示出边缘的光线效果。    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值