zoukankan      html  css  js  c++  java

  • HTML5 CSS3 诱人的实例 ：模仿优酷视频截图功能

    一般的视频网站对于用户上传的视频，在用户上传完成后，可以对播放的视频进行截图，然后作为视频的展示图。项目中也可以引入这样的功能给用户一种不错的体验，而不是让用户额外上传一张展示图。

    效果图：


    看起来还是很不错，下面我给大家分析下，极其核心代码很简单：

    [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
    1. _canvas = document.createElement("canvas");  
    2. _ctx = _canvas.getContext("2d");  
    3. _ctx.fillStyle = '#ffffff';  
    4. _ctx.fillRect(0, 0, _videoWidth, _videoWidth);  
    5. _ctx.drawImage(_video, 0, 0, _videoWidth, _videoHeight, 0, 0, _videoWidth, _videoHeight);  
    6. var dataUrl = _canvas.toDataURL("image/png");  

    核心代码就这几行，利用了ctx.drawImage时，第一个参数可以为video对象，然后就是通过canvas拿到DataUrl，赋值给Img标签了。关键点就这些。


    下面来看整个例子：

    HTML:

    [html] view plain copy 在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title></title>  
    5.     <meta charset="utf-8">  
    6.   
    7.     <style type="text/css">  
    8.   
    9.   
    10.         html  
    11.         {  
    12.             overflow: hidden;  
    13.         }  
    14.   
    15.         body  
    16.         {  
    17.             #999;  
    18.         }  
    19.   
    20.         video  
    21.         {  
    22.             display: block;  
    23.             margin: 60px auto 0;  
    24.         }  
    25.   
    26.         #shotBar  
    27.         {  
    28.             position: absolute;  
    29.             bottom: 5px;  
    30.             height: 120px;  
    31.              98%;  
    32.             background-color: #000;  
    33.             box-shadow: -5px -5px 10px #fff;  
    34.             border-radius: 5px;  
    35.             padding: 2px;  
    36.             overflow: auto;  
    37.         }  
    38.   
    39.         #shotBar img  
    40.         {  
    41.             border: 3px solid #fff;  
    42.             border-radius: 5px;  
    43.             height: 110px;  
    44.              210px;  
    45.             margin-left: 4px;  
    46.         }  
    47.   
    48.   
    49.     </style>  
    50.   
    51.     <script type="text/javascript" src="../../../jquery-1.8.3.js"></script>  
    52.   
    53.     <script type="text/javascript" src="videoshot.js"></script>  
    54.   
    55.     <script type="text/javascript">  
    56.   
    57.         $(function ()  
    58.         {  
    59.             ZhangHongyang.click2shot.init();  
    60.         });  
    61.   
    62.     </script>  
    63.   
    64.   
    65. </head>  
    66. <body>  
    67.   
    68.   
    69. <video src="media/style.mp4" controls id="video">  
    70. </video>  
    71. <div id="shotBar">  
    72. </div>  
    73. </body>  
    74. </html>  


    html和css都是相当简单的。

    主要看Js的代码:

    [javascript] view plain copy 在CODE上查看代码片派生到我的代码片
    1. /** 
    2.  * Created with JetBrains WebStorm. 
    3.  * User: zhy 
    4.  * Date: 14-6-18 
    5.  * Time: 上午12:24 
    6.  * To change this template use File | Settings | File Templates. 
    7.  */  
    8.   
    9. var ZhangHongyang = {};  
    10. ZhangHongyang.click2shot = (function ()  
    11. {  
    12.     var _ID_VIDEO = "video";  
    13.     var _ID_SHOTBAR = "shotBar";  
    14.     var _videoWidth = 0;  
    15.     var _videoHeight = 0;  
    16.     var _canvas = null;  
    17.     var _ctx = null;  
    18.     var _video = null;  
    19.   
    20.     function _init()  
    21.     {  
    22.         _canvas = document.createElement("canvas");  
    23.         _ctx = _canvas.getContext("2d");  
    24.         _video = document.getElementById(_ID_VIDEO);  
    25.   
    26.   
    27.         _video.addEventListener("canplay", function ()  
    28.         {  
    29.             _canvas.width = _videoWidth = _video.videoWidth;  
    30.             _canvas.height = _videoHeight = _video.videoHeight;  
    31.             console.log(_videoWidth + " , " + _videoHeight);  
    32.             _ctx.fillStyle = '#ffffff';  
    33.             _ctx.fillRect(0, 0, _videoWidth, _videoWidth);  
    34.             $("#" + _ID_SHOTBAR).click(_click2shot);  
    35.   
    36.             _video.removeEventListener("canplay", arguments.callee);  
    37.         });  
    38.   
    39.     }  
    40.   
    41.     function _click2shot(event)  
    42.     {  
    43.         _video.pause();  
    44.         _ctx.drawImage(_video, 0, 0, _videoWidth, _videoHeight, 0, 0, _videoWidth, _videoHeight);  
    45.         var dataUrl = _canvas.toDataURL("image/png");  
    46.   
    47.         //创建一个和video相同位置的图片  
    48.         var $imgBig = $("<img/>");  
    49.   
    50.         $imgBig.width(_videoWidth).height(_videoHeight).css({position: "absolute", left: _video.offsetLeft, top: _video.offsetTop,  _videoWidth + "px", height: _videoWidth + "px"}).attr("src", dataUrl);  
    51.         $("body").append($imgBig);  
    52.   
    53.         //创建缩略图，准备加到shotBar  
    54.         var $img = $("<img>");  
    55.         $img.attr("src", dataUrl);  
    56.         $(this).append($img);  
    57.   
    58.         var offset = _getOffset($img[0]);  
    59.         $img.hide();  
    60.         //添加动画效果  
    61.         $imgBig.animate({left: offset.x + "px", top: offset.y + "px",  $img.width() + "px", height: $img.height() + "px"}, 200, function ()  
    62.         {  
    63.             $img.attr("src", dataUrl).show();  
    64.             $imgBig.remove();  
    65.             _video.play();  
    66.         });  
    67.   
    68.   
    69.     }  
    70.   
    71.     /** 
    72.      * 获取元素在显示区域的leftOffset和topOffset 
    73.      * @param elem 
    74.      * @returns {{x: (Number|number), y: (Number|number)}} 
    75.      * @private 
    76.      */  
    77.     function _getOffset(elem)  
    78.     {  
    79.         var pos = {x: elem.offsetLeft, y: elem.offsetTop};  
    80.         var offsetParent = elem.offsetParent;  
    81.         while (offsetParent)  
    82.         {  
    83.             pos.x += offsetParent.offsetLeft;  
    84.             pos.y += offsetParent.offsetTop;  
    85.             offsetParent = offsetParent.offsetParent;  
    86.         }  
    87.         return pos;  
    88.     }  
    89.   
    90.   
    91.     return {init: _init}  
    92.   
    93. })();  


    需要注意的是，video.canplay事件中获取完属性和一些操作后，一定要removeEventLinstener，否则暂停播放会一直调用此方 法。点击事件时，会暂停video，然后在video的位置生成一张图片，使用jquery动画移动到缩略图的位置，然后移除文档，缩略图显示，造成的动 画效果。


    得到图片之后的上传之类的操作，大家可以自己添加。还有很重要的一点：canvas.toDataURL("image/png");可能需要在服务器中访问才能正常使用，我把写好的页面拖到了tomcat中，大家可以随便启动个什么服务器，不然会报安全问题。


    From:http://blog.csdn.net/lmj623565791/article/details/31883587
  • 相关阅读:
    电梯设计需求调研报告
    返回一个整数数组中最大子数组的和。
    返回一个整数数组中最大子数组的和
    四则运算2程序及运行结果
    四则运算2
    上半学期读软件工程方面著作的读书计划
    写输出30道小学生四则运算程序的解题思路及未在规定时间内完成程序的原因
    《人月神话》读后感
    阅读《软件工程—理论方法与实践》第十一章心得体会
    java常见排序方法
  • 原文地址：https://www.cnblogs.com/boonya/p/5241689.html
Copyright © 2011-2022 走看看