程序员经验分享-hwhale

基于flowplayer的视频缩略图的视频预览

2023-10-31

大家在平时观看视频的视频网站中，比如优酷，爱奇艺，腾讯视频等，鼠标移动至播放条区域的时候，大家可以看到会弹出小的视频预览图片，这样子就可以给用户很好体验，至少可以知道前后播放的内容。最近公司业务需要，就不得不研究了。

本文将从三个方面进行总结

一、设计与逻辑（最重要）

二、优化拓展

三、代码

特别说明：本设计针对flowplayer版本为6.0版本，低于6.0版本在本设计中不适用，后面会简单说到在flowplayer的5.0版本如何设计的问题，整个设计会复杂很多。

一、设计与逻辑

首先有三个问题

（1）鼠标移到flowplayer的播放条上如何获取对应的时间。

（2）在对应的时间又如何获取到该时间点上的视频的缩略图。

（3）如何显示的样式问题，像爱奇艺的缩略图显示一排在播放器区域内显示。


第一个问题

在flowplayer6.0的版本中，flowplayer.min.js其实已经实现获取时间的功能，在官网的demo中，只要鼠标把移至播放的时间轴上，就会出现一个时间。下图是我在官网上的截图。


                                                                             图一

从图上可以看到，鼠标移至00:02时，出现一个div,显示时间，可以在firebug的调试中找到该<div>，其实是,可以针对该div入手。首先，我们可以<div class="fp-timeline-tooltip fp-tooltip">在里面再创建两个<div>。创建之后形式如下

[html]  view plain  copy  print ? 在CODE上查看代码片 派生到我的代码片
  1. <div class="fp-timeline-tooltip fp-tooltip">  
  2.    <div class="fp-thumbnails"></div>  
  3.    <div class="fp-seektime" id="fp-seektime"></div>  
  4.  </div>  
其中， <div class="fp-thumbnails"></div> 用于显示缩略图， <div class="fp-seektime" id="fp-seektime"></div> 用于显示时间，最终要实现的形式如图下

                 图二

这样，我们又产生一个问题了，如何创建这些元素呢？这就需要我们能够去看flowplayer.js的内部代码了，因为在加载这个flowplayer.js的时候，会内部创建<div class="fp-timeline-tooltip fp-tooltip"></div>,并将时间显示在这个div。既然这样，那可以在flowplayer.js的文件中再重新定义一个函数，这个函数循环对象为<div class="fp-timeline-tooltip fp-tooltip"></div>,创建需要的两个div

[html]  view plain  copy  print ? 在CODE上查看代码片 派生到我的代码片
  1. <div class="fp-thumbnails"></div>  
  2. <div class="fp-seektime" id="fp-seektime"></div>  
在flowplayer.js中的html的函数之后创建，如图所示

                                                                             图三

同时更改当鼠标移动时的促发的函数，原来是html函数的，现在要改为tpl函数。


                                                                     图四
这样，可以解决了第一个问题了。当鼠标放在播放的进度条时，如果设置一下<div class="fp-thumbnails">的宽度width和高度height就可以出现图二的效果啦，因为还没有获取到缩略图，所以没有缩列图显示，时间可以显示。


第二个问题

要获取缩略图，肯定要图片，这个单纯用JavaScript是不可能从视频中获取对应时间的图片的，下面会用到专注于多媒体处理的ffmpeg来将这个视频的关键帧分解出来。

ffmpeg所用的命令

[plain]  view plain  copy  print ? 在CODE上查看代码片 派生到我的代码片
  1. ffmpeg -i my.mp4 -filter:v framerate=1/1,scale=-1:100 -q:v 5 myvideo%d.jpg  
这个命令可以将一个视频的关键帧图片全部分解出来，其中的参数可以自己查询资料。图片的命名是myvideo1.jpg,myvideo2.jpg......

其中这个framerate的值代表帧率，即相隔多少秒，截一张图，这里设置等于1，说明myvideo1.jpg就是0秒的图，myvideo2.jpg就是代表1秒的图。。。。这样子的话，就非常好办了，鼠标移到00:02时，可以取对应的myvideo3的图片，就相当于在这一秒的画面。将这个图作为<div class="fp-thumbnails"></div>的背景，也就是显示了这一张图了。

那么，问题又来了，如何获取鼠标放在进度条上的时间呢？方法也很简单哦哦！有很多种！

最简单一种是直接获取创建的<div class="fp-seektime" id="fp-seektime"></div>的值，因为这里面显示的就是时间，格式是00:00:00,需要自己重新将格式转为时间秒数，比如格式00:00:20的秒数为second=20，那么可以动态的设置

<div class="fp-thumbnails"></div>的背景为url了，例如url（./myvideo20.jpg），那么很容易就可以将对应的视频的缩略图显示出来了。


另外一种是flowplayer的原生方法，通过鼠标距离左侧的位置

var x = ev.pageX || ev.clientX,
     delta = x - common.offset(timeline).left, 
     percentage = delta / common.width(timeline),
     seconds = Math.round(percentage * api.video.duration);

具体要自己了解flowplayer.js


如果显示多个缩略图又怎么办呢，显示的原理是一样的，只不过又要动态地创建多个<div>,这就涉及到样式问题，要以主缩略图为中心（即是刚才创建的那个缩略图），动态创建<div>。再可以设置一个步调step，获取每张相隔step秒的图片显示在主缩略图的左右两侧。比如鼠标移至时间是00:00:50,即现在在50秒显示的是主缩略图，则左侧可以显示的图分别是在10,20,30,40秒处的视频图，右边则是60,70,80，，，，，所以整个很重要。

其实说到这里，基本整个设计与逻辑就已经完了，剩下的是css和js的逻辑问题了，在这里我就不多说了。


第三个问题

直接看代码，主要是样式问题，如何更好地显示一排出来。


二、优化拓展

（1）尽量写成js插件形式

（2）样式外观

（3）点击缩略图，播放跳至对应时间播放

这几个是很有必要优化的



三、代码

这是一个插件的形式来的，用的时候，要在这个文件之前引入需要引入jQuery文件

[javascript]  view plain  copy  print ? 在CODE上查看代码片 派生到我的代码片
  1. /*! 
  2.    Thumbnail image plugin for Flowplayer HTML5 
  3.    Copyright (c) 2015-2016, Flowplayer Oy 
  4.    Released under the MIT License: 
  5.    http://www.opensource.org/licenses/mit-license.php 
  6.    requires: 
  7.    - Flowplayer HTML5 version 6.x or greater 
  8.    revision: $GIT_ID$ 
  9. */  
  10. (function (flowplayer,$) {  
  11.     "use strict";  
  12.     flowplayer(function (api, root) {  
  13.         var common = flowplayer.common,  
  14.             bean = flowplayer.bean,  
  15.             support = flowplayer.support,  
  16.             timeline = common.find('.fp-timeline', root)[0],  
  17.             timelineTooltip = common.find('.fp-timeline-tooltip', root)[0];  
  18.   
  19.         if (support.touch || !support.inlineVideo) {  
  20.             return;  
  21.         }  
  22.   
  23.         api.on('ready', function (ev, a, video) {  
  24.             // cleanup  
  25.             bean.off(root, '.thumbnails');  
  26.               
  27.             common.css(timelineTooltip, {  
  28.                 'border': '1px solid #333',  
  29.                 'color':'#fff',  
  30.                 'background-color':'#000',  
  31.                   
  32.             });  
  33.             var c = flowplayer.extend({}, api.conf.thumbnails, video.thumbnails);  
  34.   
  35.             if (!c.template) {  
  36.                 return;  
  37.             }  
  38.   
  39.             var height = c.height || 80,  
  40.                 interval = c.interval || 1,  
  41.                 template = c.template,  
  42.                 ratio = video.height / video.width,  
  43.                 preloadImages = function (tmpl, max, start) {  
  44.                     max = Math.floor(max / interval);  
  45.                     if (start === undefined) {  
  46.                         start = 1;  
  47.                     }  
  48.                     function load() {  
  49.                         if (start > max) {  
  50.                             return;  
  51.                         }  
  52.                         var img = new Image();  
  53.                         img.src = tmpl.replace('{time}', start);  
  54.                         img.onload = function () {  
  55.                             start += 1;  
  56.                             load();  
  57.                         };  
  58.                     }  
  59.                     load();  
  60.                 };  
  61.   
  62.             if (c.preload !== false) {  
  63.                 preloadImages(template, video.duration);  
  64.             }  
  65.   
  66.             // 鼠标移动至播放条，可以显示出预览图  
  67.             bean.on(root, 'mousemove.thumbnails', '.fp-timeline', function (ev) {  
  68.   
  69.                 $('div.fp-pre,div.fp-next').remove();  
  70.   
  71.                 var x = ev.pageX || ev.clientX,  
  72.                     delta = x - common.offset(timeline).left,   
  73.                     percentage = delta / common.width(timeline),  
  74.                     seconds = Math.round(percentage * api.video.duration);  
  75.   
  76.                 // 2nd condition safeguards at out of range retrieval attempts  
  77.                 if (seconds < 0 || seconds > Math.round(api.video.duration)) {  
  78.                     return;  
  79.                 }  
  80.                 // enables greater interval than one second between thumbnails  
  81.                 seconds = Math.floor(seconds / interval);  
  82.                       
  83.                 var fpthumbnails = $(timelineTooltip).find('.fp-thumbnails'),  
  84.                     // 主缩略图的时间位置div  
  85.                     fpseektime = $(timelineTooltip).find('#fp-seektime'),  
  86.                     // 控制面板的宽度，视频宽度  
  87.                     width = $(root).find('.fp-controls').width(),  
  88.                     // 主缩略图距离视频左侧位置  
  89.                     left = $(timelineTooltip).position().left,  
  90.                     // 主缩略图距离视频右侧位置  
  91.                     right = width - left - (height / ratio)-2,  
  92.                     // 左右侧缩略图的宽度  
  93.                     thumbwidth = c.thumbwidth || 150,  
  94.                     // 步调，即每张缩略图显示的时间隔间  
  95.                     step=c.step || 10;  
  96.   
  97.                 // 主缩略图的样式以及背景图片  
  98.                 fpthumbnails.css({  
  99.                     width: (height / ratio) + 'px',  
  100.                     height: height + 'px',  
  101.                     // {time} template expected to start at 1, video time/first frame starts at 0  
  102.                     'background-image': "url('" + template.replace('{time}', seconds + 1) + "')",  
  103.                     'background-repeat': 'no-repeat',  
  104.                     'background-size':'100% 100%',  
  105.                     '-moz-background-size':'100% 100%', /* 老版本的 Firefox */  
  106.                     'border': '1px solid #333'  
  107.                 });  
  108.                 // 主缩略图的时间样式  
  109.                 fpseektime.css({  
  110.                     height:20 + 'px',  
  111.                     'text-align':'center',  
  112.                     'text-shadow': '1px 1px #000'  
  113.                 });  
  114.                 // 左侧缩略图，创建div  
  115.                 if(left>0) {  
  116.                     var leftnum = Math.ceil(left/thumbwidth);  
  117.                     for(var i=0;i<leftnum;i++) {  
  118.                         $(timelineTooltip).parent('.fp-controls').append('<div class="fp-pre"></div>');   
  119.                     }  
  120.                 }  
  121.                 // 右侧缩略图，创建div  
  122.                 if(right>0) {  
  123.                     var rightnum = Math.ceil(right/thumbwidth);  
  124.                     for(var i=0;i<rightnum;i++) {  
  125.                        $(timelineTooltip).parent('.fp-controls').append('<div class="fp-next"></div>');   
  126.                     }  
  127.                 }  
  128.                  
  129.                 //左侧只能显示一个缩略图位置时   
  130.                 if(leftnum==1){  
  131.                     $('.fp-pre').css({  
  132.                         'width':(left-2)+'px',  
  133.                         'height':height + 'px',  
  134.                         'position':'absolute',  
  135.                         'bottom':'30px',  
  136.                         'border-top': '1px solid #333',  
  137.                         'border-right': '1px solid #333',  
  138.                         'border-bottom': '1px solid #333',  
  139.                         'color':'#fff',  
  140.                         'background-color':'#000',  
  141.                         'overflow':'hidden',  
  142.                         'left':'1px',  
  143.                         'background-image':"url('" + template.replace('{time}', seconds + 1-step) + "')"  
  144.                     });  
  145.                 }else {  
  146.                     // 出来最后一个元素的其他元素的样式设置  
  147.                     $('.fp-pre').not(':last').each(function(i,value){  
  148.                         $(this).css({  
  149.                             'width':thumbwidth + 'px',  
  150.                             'height':height + 'px',  
  151.                             'position':'absolute',  
  152.                             'bottom':'30px',  
  153.                             'border': '1px solid #333',  
  154.                             'color':'#fff',  
  155.                             'background-color':'#000',  
  156.                             'left':(left - (i+1)*(thumbwidth+2)) + 'px',  
  157.                             'background-image':"url('" + template.replace('{time}', seconds + 1-(i+1)*step) + "')",/*步调*/  
  158.                             'background-repeat': 'no-repeat',  
  159.                             'background-size':'100% 100%',  
  160.                             '-moz-background-size':'100% 100%', /* 老版本的 Firefox */  
  161.                         });  
  162.                     });  
  163.                     // 设置最后一个的样式  
  164.                     $('.fp-pre').last().css({  
  165.                             'width':(left-(leftnum-1)*(thumbwidth+2)-1)+'px',  
  166.                             'height':height + 'px',  
  167.                             'position':'absolute',  
  168.                             'bottom':'30px',  
  169.                             'border-top': '1px solid #333',  
  170.                             'border-right': '1px solid #333',  
  171.                             'border-bottom': '1px solid #333',  
  172.                             'color':'#fff',  
  173.                             'color':'#fff',  
  174.                             'background-color':'#000',  
  175.                             'overflow':'hidden',  
  176.                             'left':'1px',  
  177.                             'background-image':"url('" + template.replace('{time}', seconds + 1-(leftnum-1)*step) + "')"  
  178.                     });  
  179.                 }  
  180.                 // 右侧只有一个div时的样式  
  181.                 if(rightnum==1){  
  182.                     $('.fp-next').css({  
  183.                         'width':(width-(left+(height / ratio)+2)-2)+'px',  
  184.                         'height':height + 'px',  
  185.                         'position':'absolute',  
  186.                         'bottom':'30px',  
  187.                         'border-top': '1px solid #333',  
  188.                         'border-left': '1px solid #333',  
  189.                         'border-bottom': '1px solid #333',  
  190.                         'color':'#fff',  
  191.                         'color':'#fff',  
  192.                         'background-color':'#000',  
  193.                         'left':(left + (height / ratio)+2) + 'px',  
  194.                         'overflow':'hidden',  
  195.                         'background-image':"url('" + template.replace('{time}', seconds + 1+step) + "')"  
  196.   
  197.                     });  
  198.                 }else {  
  199.                     // 除了最后一个的其他样式  
  200.                     $('.fp-next').not(':last').each(function(i,value){  
  201.                         $(this).css({  
  202.                             'width':thumbwidth + 'px',  
  203.                             'height':height + 'px',  
  204.                             'position':'absolute',  
  205.                             'bottom':'30px',  
  206.                             'border': '1px solid #333',  
  207.                             'color':'#fff',  
  208.                             'background-color':'#000',  
  209.                             'left':(left + (height / ratio)+2 + i*(thumbwidth+2))+ 'px',  
  210.                             'background-image':"url('" + template.replace('{time}', seconds + 1+(i+1)*step) + "')",  
  211.                             'background-repeat': 'no-repeat',  
  212.                             'background-size':'100% 100%',  
  213.                             '-moz-background-size':'100% 100%', /* 老版本的 Firefox */  
  214.   
  215.                         });  
  216.                     });  
  217.                     // 右侧最后一个div样式  
  218.                     $('.fp-next').last().css({  
  219.                             'width':(right - (rightnum-1)*(thumbwidth+2)-1)+'px',  
  220.                             'height':height + 'px',  
  221.                             'position':'absolute',  
  222.                             'bottom':'30px',  
  223.                             'border-top': '1px solid #333',  
  224.                             'border-left': '1px solid #333',  
  225.                             'border-bottom': '1px solid #333',  
  226.                             'color':'#fff',  
  227.                             'background-color':'#000',  
  228.                             'left':(left + (height / ratio)+2 + ((rightnum-1)*(thumbwidth+2))) + 'px',  
  229.                             'overflow':'hidden',  
  230.                             'background-image':"url('" + template.replace('{time}', seconds + 1 +(rightnum-1)*step) + "')"  
  231.   
  232.                         });  
  233.                     }     
  234.   
  235.                 });  
  236.               
  237.     
  238.                 $('.fp-timeline').on('mouseout',function(){  
  239.                     $('div.fp-pre,div.fp-next').remove();  
  240.                 });  
  241.               
  242.         });  
  243.   
  244.     });  
  245.   
  246. })((typeof module === "object" && module.exports)  
  247.     ? require('flowplayer')  
  248.     : window.flowplayer,jQuery);  



在html页面中的用法

[html]  view plain  copy  print ? 在CODE上查看代码片 派生到我的代码片
  1. <div class="player1  no-toggle play-button">  
  2.           
  3.       </div>  
  4.       <div style="overflow:hidden;width:200px;height:161px;background-image:url('thumbnails/myvideo8.jpg')">  
  5.         <!-- <img src="thumbnails/myvideo8.jpg"> -->  
  6.       </div>  
  7.     </div>  
  8.     <link rel="stylesheet" type="text/css" href="./flowplayer.quality-selector.css">  
  9.     <script type="text/javascript" src="./jquery-1.11.0.min.js"></script>  
  10.     <script type="text/javascript" src="./flowplayer6.js"></script>  
  11.     <script type="text/javascript" src="./thumbnails.js"></script>  
  12.     <script type="text/javascript" src="./flowplayer.quality-selector.js"></script>  
  13.     <script>  
  14.       
  15.     $('.player1').flowplayer({  
  16.       adaptiveRatio:true,  
  17.       debug:true,  
  18.       autoplay:true,  
  19.       embed:false,   
  20.       clip: {  
  21.         title: 'Bauhausfffff',  
  22.        <span style="color:#FF0000;"> //这里配置  
  23.         thumbnails: {  
  24.           template: 'thumbnails/myvideo{time}.jpg',  
  25.           height: 100,  
  26.           thumbwidth: 150,  
  27.           step: 5  
  28.   
  29.         },</span>  
  30.               
  31.         sources: [  
  32.             {   
  33.               type: "video/mp4",  
  34.               src:  "http:/host/Video/201503/20150320105047342.mp4"   
  35.             }  
  36.   
  37.         ]  
  38.       },  
  39.   
  40.       brand:{  
  41.         text: "MyBrand",  
  42.         showOnOrigin:false  
  43.       }  
  44.     });  
  45.     </script>  


直接上几个大图





转自http://blog.csdn.net/u012979009/article/details/50623460

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

视音频技术

播放器

FlowPlayer

缩略图

预览

基于flowplayer的视频缩略图的视频预览 的相关文章

  • 查看264NAL信息工具

    用easyice只可以查看TS包的帧类型 google了一下 发现了这个工具HEVCBSAnalyzer https github com latelee HEVCBSAnalyzer 从git上下载下来 直接使用release文件夹下的工

  • 数字媒体资产管理教材

    http vr sdu edu cn lulin course DAM

  • Create a mosaic out of several input videos

    转自 https trac ffmpeg org wiki Create 20a 20mosaic 20out 20of 20several 20input 20videos Overview One of the great featur

  • 从用户家里采集IPTV码流

    具体的方法是通过在机顶盒和电视信号接口ONU之间增加一个镜像路由器 截取数据 再通过Wireshark软件或者自行开发的软件分析数据 WireShark抓取数据包 分析结果 机顶盒 机顶盒实质上是一个网页浏览器 每次开机之后会访问固定的网页

  • DTS Audio Codec 码率

    转自 https www zhihu com question 20816979

  • media sdk 性能优化

    https software intel com sites default files m 2 0 a 7 9 28439 Intel Media SDK E4 B9 8B E4 BC 98 E5 8C 96 E6 8A 80 E6 9C

  • 体育赛事直播系统的实践之路

    谓智慧运动场 就是一套利用互联网科技 软硬件集成 实现体育场地升级的解决方案 它可以运用在篮球等一系列球类运动场中 通过摄像头实时捕捉运动员的技术动作以及跑位影像 可以实现场内屏幕直播以及场外网络直播 为草根运动者搭建一个可以展示自己的舞台

  • 基于flowplayer的视频缩略图的视频预览

    大家在平时观看视频的视频网站中 比如优酷 爱奇艺 腾讯视频等 鼠标移动至播放条区域的时候 大家可以看到会弹出小的视频预览图片 这样子就可以给用户很好体验 至少可以知道前后播放的内容 最近公司业务需要 就不得不研究了 本文将从三个方面进行总结

  • 互动直播的技术细节和解决方案实践经验谈

    目录 1 互动直播背景 2 连麦流程 功能与技术指标 2 1 连麦的业务流程 2 2 互动直播的功能 2 3 技术指标 2 4 应用领域 3 主流的技术方案 3 1 互动直播技术领域 3 2 主流的技术方案 3 2 1 基于RTMP技术的连

  • Android VLC播放器二次开发2——CPU类型检查+界面初始化

    上一篇讲了VLC整个程序的模块划分和界面主要使用的技术 今天分析一下VLC程序初始化过程 主要是初始化界面 加载解码库的操作 今天主要分析一下org videolan vlc gui MainActivity类 这个是VLC的整个程序入口

  • MP4中同时有逐行、隔行编码视频内容

    公司做了个MP4视频 一部分是逐行的 一个部门是隔行扫描方式 用mediainfo看了下 整个显示视频信息为 Scan Type Interlaced Scan Order TFF 用Stream Eye观看视频 隔行部分如下图 逐行部分

  • 媒资知识图谱系统

    http wenku baidu com link url xEjnrOeeVaqCc5JNZfuFGewAFKWbPjZDI3FzopmFuDrxYIfXkU3fxaXnPDpI2 6 kvcbnwV 8irUddAmk2JpkZlD2B

  • Android基础学习总结（十六）——基于ijkplayer封装支持简单界面UI定制的视频播放器

    前言 项目开发中遇到需要解析播放m3u8视频流的情况 但是原生的PlayerView非常慢 使用起来复杂 不适合上手 这里找到一款ijkplayer是Bilibili基于ffmpeg开发并开源的轻量级视频播放器 支持播放本地网络视频 也支持

  • Android VLC播放器二次开发3——音乐播放(歌曲列表+歌词同步滚动)

    今天讲一下对VLC播放器音频播放功能进行二次开发 讲解如何改造音乐播放相关功能 最近一直在忙着优化视频解码部分代码 因为我的视频播放器需要在一台主频比较低的机器上跑 800M主频 所以视频解码能力受到极大考验 VLC的解码库挺复杂 花了两三

  • 基于web的在线视频编辑的设计

    基于web的在线视频编辑的设计 我在这里首先说明一下 本设计只涉及到逻辑设计和关键的技术 具体的实现方法 语言就得运用自己的特长去解决了 场景 1 比如我用手机录播一段很长的MP4格式的视频 我想剪切其中的几段 然后在合并成一个新的视频 如

  • DCA和DTS关系

    On the consumer level DTS is the oft used shorthand for the DTS Coherent Acoustics DCA codec transportable through S PDI

  • 液晶电视的MEMC（运动画质补偿技术）的优势不足

    MEMC Motion Estimate and Motion Compensation 即运动估计和运动补偿 液晶电视中用到的运动画质补偿技术 其原理是采用动态映像系统 在传统的两帧图像之间加插一帧运动补偿帧 将普通平板电视的50 60H

  • 如何从xhr下载流媒体视频

    I d like to download a video from a site that uses flowplayer When I inspect the element I get something like So we can

  • 指令中的媒体播放器对象

    我正在尝试使用指令来访问 flowplayer 媒体播放器 这样父控制器就可以广播事件 然后播放器只需使用侦听器响应这些事件 事件正在工作 但播放器未定义 因此没有真正工作 我的问题是 1 播放器未初始化 我一定没有正确设置它 2 我希望播

  • Flowplayer 播放一切

    我有一个flowplayer我正在使用它 下面有几张图片 当您点击这些图片时dialog是用这些图片的放大版本创建的 问题是flowplayer永远会在最上面dialog 我尝试过设置z index of the dialog高和flowp

随机推荐

  • GD32F4XX SPI DMA容易被中断打断导致传输异常问题

    主要注意点在 2 dma触发spi传输函数 部分 如下图加入这个后就稳定了 1 初始化代码 void spi4 dma config void dma single data parameter struct dma init struct

  • centos 7 安装 RabbitMQ

    1 更新 yum 仓库 yum y update 2 安装Erlang yum y install epel release 查看安装的版本 erl version 3 下载安装 rabbitMQ wget content disposit

  • 投影时出现错误ERROR 999999: Error executing function.

    shapefile文件mtroads shp投影在NAD 1983 State Plane Montana FIPS 2500坐标系统 线单位为米 但没有投影文件 这时 如果要用define prijection定义mtroads shp时

  • JAVA微信小程序支付源码

    做了很多次都没整理 总以为脑子记住了 可当下次用的时候又跟个脑瘫孩儿一样 今天就记录一下部分代码 需要帮助加QQ 1137586868 首先解释一下微信的签名制作方式 这里可能让小白最头疼的了 统一下单和支付时要的签名制作方式也都不一样 我

  • 卸载cpu版本的torch并离线安装对应的gpu版本

    每次从github上安装项目对应的库 利用requirements txt安装很容易出现版本不对应的情况 尤其是将torch的gpu版本安装成cpu 这里记录一些查看版本的指令和离线安装的方法 就不用每次百度啦 注 其他库的离线安装也可以用

  • stm32不使用外部晶振管脚怎么处理_stm32的外部晶振不起振以及更改外部晶振值的问题...

    今天有人问我关于外部晶振不起振以及如歌更改32的外部晶振 在此我做一个简单的记录 以stm32f1系列为例 其余类似 1 晶振不起振 此次遇到的问题倒不是出在电路上 实际上还是软件上的问题 画的新板子 换了一块贴片的晶振 与原来的直插式有点

  • Linux （二）: 文件系统介绍、文件处理与权限操作

    目录 四 文件系统 分区与文件系统 组成 文件读取 磁盘碎片 block inode 目录 日志 挂载 目录配置 五 文件 文件属性 文件与目录的基本操作 1 ls 2 cd 3 mkdir 4 rmdir 5 touch 6 cp 7 r

  • Flink 1.17教程：输出算子之输出到Kafka

    输出到Kafka 1 添加Kafka 连接器依赖 由于我们已经测试过从Kafka数据源读取数据 连接器相关依赖已经引入 这里就不重复介绍了 2 启动Kafka集群 3 编写输出到Kafka的示例代码 输出无key的record public

  • word2vec和常见CNN+RNN网格结构组成的文本分类模型

    作者为了应付毕业 所以在补充深度学习相关知识 这是我尝试把word2vec和深度学习相互结合的一次记录 数据集来源 数据集预处理 生成word2vec模型 搭建网络并且训练 数据集来源 本文的数据集源自kaggle比赛中的NLP入门比赛 灾

  • S3C2416 SD卡启动和NAND启动的配置

    S3C2416的启动方式分为IROM NAND ONENAND ROM三种模式 有的datasheet上只有IROM ONENAND ROM两种模式 如下图所示 图1 图2 图2应该是早期三星的2416手册 图1为之后再次更新的 所以这里以

  • R语言实验课（生信）（附代码）

    实验五 题目1 解决方法 a lt read table E R Rcode temp txt 读取txt文件 找到下载路径 b lt list c lt list d lt list e lt list h lt matrix 0 5 1

  • 云风的新书电子版出来的真快

    云风大侠新书出来没几天 电子版就出来了 电骡上好像很早就有下载的了 不过我认为电子版不会影响销售的 只会聚集更多的人气 我这里也有个链接 ftp pub pub ftp PicDisk net pub Scan 游戏之旅 我的编程感悟 pd

  • 关于2022年9月以太坊合并你需要知道的10件事

    关于2022年9月以太坊合并你需要知道的10件事 1 什么是合并 合并是以太坊区块链将共识机制从工作量证明 pow 转为权益证明 pos 的事件 是以太坊主网与信标链 beacon chain 合并的简称 2 为什么 合并 这么值得关注 在

  • MicroBlaze系列教程（5）：AXI_UART16550的使用

    文章目录 toc AXI UART16550简介 MicroBlaze硬件配置 常用函数 使用示例 参考资料 工程下载 本文是Xilinx MicroBlaze系列教程的第5篇文章 AXI UART16550简介 axi uart16550

  • MockMvc

    MockMvc classes SpringbootApplication class 指定入口启动类 webEnvironment SpringBootTest webEnvironment RANDOM PORT采用随机端口启动 不会产

  • MMU的作用及工作过程

    以下内容摘自 步步惊芯 软核处理器内部设计分析 一书的第10章 MMU剖析 MMU的作用及工作过程 MMU Memory Management Unit 是内存管理单元的简称 读者朋友在学习嵌入式的时候应该听说过 CLinux 这是适合没有

  • Android自动化测试框架

    1 Monkeyrunner 优点 操作最为简单 可以录制测试脚本 可视化操作 缺点 主要生成坐标的自动化操作 移植性不强 功能最为局限 2 Rubotium 主要针对某一个APK进行自动化测试 APK可以有源码 也可以没有源码 功能强大

  • ug装配绕轴旋转_UG绘制一个灯泡，这个白炽灯大家都熟悉吧

    灯泡三维建模你会吗 今天来学习一下吧 白炽灯是一种热辐射光源 能量的转换效率很低 只有2 4 的电能转换为眼睛能够感受到的光 虽然现在是普遍选用日光灯 但在10多年前 白炽灯还是使用最广泛的 今天就来用UG画个白炽灯怀念下吧 这个灯泡看看起

  • 计算机网络基础--互联网组成

    目录 互联网的边缘部分 通信方式 C S方式 通信方式 P2P方式 互联网的核心部分 电路交换 分组交换 报文交换 三种交换比较 互联网这个词想必对于大家来说已经不陌生了 那么你能说出互联网是由什么组成的吗 既然要步入互联网行业 那就应该知

  • 基于flowplayer的视频缩略图的视频预览

    大家在平时观看视频的视频网站中 比如优酷 爱奇艺 腾讯视频等 鼠标移动至播放条区域的时候 大家可以看到会弹出小的视频预览图片 这样子就可以给用户很好体验 至少可以知道前后播放的内容 最近公司业务需要 就不得不研究了 本文将从三个方面进行总结

热门标签