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

最新推荐文章于 2023-12-28 08:00:00 发布

西红柿遇到番茄

最新推荐文章于 2023-12-28 08:00:00 发布

阅读量2.2k

点赞数

本文链接：https://blog.csdn.net/shinaiqing/article/details/70132076

版权

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展示出边缘的光线效果。