HTML5的强势来袭,给视频网站带来了机遇也面临着巨大的挑战,HTML5可以实现非常强大的视频播放效果!可以通过使用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展示出边缘的光线效果。