做自己:鬼脚七自媒体第1季 PDF 超清版

1.基础进度条 要写在 div class="progress"/div 里面。 div class="col-md-6" div class="progress" div class="progress-bar" /div /div/div 2.多彩进度条 div class="col-md-6" div class="progress" div class="progress-bar" /div /div div class="progress" div class="progress-bar progress-bar-danger" /div /div div class="progress" div class="progress-bar progress-bar-info" /div /div div class="progress" div class="progress-bar progress-bar-warning" /div /div div class="progress" div class="progress-bar progress-bar-success" /div /div/div 3.条纹状进度条 在类progress基础上添加类progress-striped如下： div class="progress progress-striped" div class="progress-bar" /div/div 4. 进度条动画样式 给进度条添加类active，如下： div class="progress progress-striped" div class="progress-bar active" /div/div 5.堆叠式进度条 都写在一个progress内，如下： div class="progress" div class="progress-bar progress-bar-success" /div div class="progress-bar progress-bar-warning" /div div class="progress-bar progress-bar-info" /div/div 6.媒体对象 媒体对象就是图文混排。左边可以是图片、视频。右边是对其描述。 div class="col-md-6" div class="media" div class="media-left media-middle" a href="#" rel="external nofollow" img class="media-object" src="img/02.jpg" alt="" /a /div div class="media-body" h2 class="media-heading"我是标题/h2 p这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里……

近日项目有个新需求，需要对视频或音频进行多段裁剪然后拼接。例如，一段视频长30分钟，我需要将5-10分钟、17-22分钟、24-29分钟这三段拼接到一起成一整段视频。裁剪在前端，拼接在后端。 网上简单找了找，基本都是客户端内的工具，没有纯网页的裁剪。既然没有，那就动手写一个。 代码已上传到GitHub： https://github.com/fengma1992/media-cut-tool 废话不多，下面就来看看怎么设计的。 效果图 图中底部的功能块为裁剪工具组件，上方的视频为演示用，当然也能是音频。 功能特点： 支持鼠标拖拽输入与键盘数字输入两种模式； 支持预览播放指定裁剪片段； 左侧鼠标输入与右侧键盘输入联动； 鼠标移动时自动捕捉高亮拖拽条； 确认裁剪时自动去重； *注：项目中的图标都替换成了文字 思路 整体来看，通过一个数据数组 cropItemList 来保存用户输入数据，不管是鼠标拖拽还是键盘输入，都来操作 cropItemList 实现两侧数据联动。最后通过处理 cropItemList 来输出用户想要的裁剪。 cropItemList 结构如下： cropItemList: [ { startTime: 0, // 开始时间 endTime: 100, // 结束时间 startTimeArr: [hoursStr, minutesStr, secondsStr], // 时分秒字符串 endTimeArr: [hoursStr, minutesStr, secondsStr], // 时分秒字符串 startTimeIndicatorOffsetX: 0, // 开始时间在左侧拖动区X偏移量 endTimeIndicatorO……

jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件，它支持大部分的网络多媒体播放器和多媒体格式，比如：Flash, Windows Media Player, Real Player, Quicktime, MP3,Silverlight, PDF。它根据当前的脚本配置，自动将a标签替换成div，并生成object, embed甚至是iframe代码，至于生成object还是embed，jQuery Media会根据当前平台自动判别，因此兼容性方面非常出色。下面这段代码是jQuery Media生成后的结果： div class="media" object width="450" height="250" attr1="attrValue1" attr2="attrValue2" codebase="http://www.apple.com/qtactivex/qtplugin.cab" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" param name="src" value="myBetterMovie.mov" param name="autoplay" value="true" param name="param1" value="paramValue1" param name="param2" value="paramValue2" embed width="450" height="250" src="myBetterMovie.mov" autoplay="true" attr1="attrValue1" attr2="attrValue2" param1="paramValue1" param2="paramValue2" pluginspage="http://www.apple.com/quicktime/download/" /embed /object /div 具体使用方法 html标记代码 a class="media" href="sample.mov"My Quicktime Movie/a a class="media" href="sample.swf"My Flash Movie/a a class="media" href="sample.wma"My Audio File/a 初始化脚本： $('.media').media(); 选项 可以通过脚本对象或者jQuery Metadata Plugin来配置参数。 全局默认值： $.fn.media.defaults = { preferMeta: 1, // 如果为true, 则标记的meta值优先于脚本……

RGB和YUV 多媒体编程 一、概念 1.什么是RGB？ 对一种颜色进行编码的方法统称为“ 颜色空间 ”或“ 色域 ”。用最简单的话说，世界上任何一种颜色的“颜色空间”都可定义成一个固定的数字或变量。RGB（红、绿、蓝）只是众多颜色空间的一种。采用这种编码方法，每种颜色都可用三个变量来表示-红色绿色以及蓝色的强度。记录及显示彩色图像时，RGB是最常见的一种方案。 2.什么是YUV？ YUV是被欧洲电视系统所采用的一种颜色编码方法（属于PAL），是PAL和SECAM模拟彩色电视制式采用的 颜色空间 。 在现代彩色电视系统中，通常采用三管彩色摄影机或彩色CCD摄影机进行取像，然后把取得的彩色图像信号经分色、分别放大校正后得到RGB，再经过矩阵变换电路得到亮度信号Y和两个色差信号B－Y（即U）、R－Y（即V），最后发送端将亮度和色差三个信号分别进行编码，用同一信道发送出去。这种色彩的表示方法就是所谓的YUV色彩空间表示。 由此可见，RGB和YUV都属于颜色空间（或者叫“色彩空间”），如果不清楚色彩空间的概念。 二、RGB和YUV的优缺点 1.RGB缺乏与早期黑白显示系统的良好兼容性。因此，许多电子电器厂商普遍采用的做法是，将RGB转换成YUV颜色空间，以维持兼容，再根据需要换回RGB格式，以便在电脑显示器上显示彩色图……