董叔叔

作者： admin

  • 1

    <html>
  <head></head>
  <body></body>
</html>
    <pre><code class="language-css">
body{margin:0; background-color:red;}
</code></pre>

  • plyr视频播放器

    一，准备

    官网: https://plyr.io/
    代码copy:http://www.bootcdn.cn/plyr/

    css

    <link href="https://cdn.bootcss.com/plyr/3.3.7/plyr.css" rel="stylesheet">

    js

    <script src="https://cdn.bootcss.com/plyr/3.3.7/plyr.min.js"></script>

    二，html video

    <video poster="/path/to/poster.jpg" id="player" playsinline controls>
    <source src="/path/to/video.mp4" type="video/mp4">
    <source src="/path/to/video.webm" type="video/webm">

    <!-- Captions are optional -->
    <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default>
</video>

    html audio

    <audio id="player" controls>
    <source src="/path/to/audio.mp3" type="audio/mp3">
    <source src="/path/to/audio.ogg" type="audio/ogg">
</audio>

    youtube1

    <div class="plyr__video-embed" id="player">
    <iframe src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>

    youtube2

    <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>

    例子

    有字幕的

    没有字幕的

    github：https://github.com/sampotts/plyr

  • 简易版瀑布流

    简易版的原理

    取出data下的一条box数据。判断四个li容器谁最短，把刚取出的数据放进去，以此类推。

    <div class="content">
  <ul>
    <li><li>
    <li><li>
    <li><li>
    <li><li>
  </ul>
</div>
<div class="data hide">
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x300/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x400/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x500/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x600/f88/fff></div>
  <div class="box"><img src="http://placehold.it/250x200/f88/fff></div>
</div>

    在线查看

  • wordpress上传视频http错误

    网上有很多方法，我的方法分两步：

    第一步：php.ini（如何找到php.ini文件phpinfo()）
    目录/etc/php.ini
    file_uploads =on; upload_max_filesize = 1024m; post_max_size = 1024m;

    修改Nginx上传大小限制
    /etc/nginx/nginx.conf 添加 client_max_body_siz 1024m; (允许上传1024M)
    特别注意：这句写在http{}花括号中。

  • flowplayer教程

    推荐使用免费的plyr播放器，官网https://plyr.io/

    flowplayer是收费的。




    一，flowplayer基础用法

    <!-- 1. skin -->
<link href="https://cdn.bootcss.com/flowplayer/7.0.4/skin/skin.css" rel="stylesheet">
<!-- 2. jquery library - required for video tag based installs -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 3. flowplayer -->
<script src="https://cdn.bootcss.com/flowplayer/7.0.4/flowplayer.js"></script>

    二，flowplayer的HTML结构

    <div class="flowplayer">
 <video autoplay poster="images/poster.jpg">
  <source type="video/mp4" src="path/video.mp4">
 </video>
</div>

    三，css样式“去掉”flowplayer的logo

    
<! --去掉分享和全屏按钮-->
.fp-header{display: none;}
<!-- 让播放器下面所有的a标签透明度为0 -->
.flowplayer a{opacity: 0;}
<!-- 播放按钮的透明度恢复为1-- >
.flowplayer a.fp-playbtn{opacity: 1;}

  • 安装MySQLdb模块时mysql_config not found解决办法

    1，安装MySQLdb模块，两种办法
    pip install MySQL-python
    或者下载源码安装，下载地址 https://pypi.python.org/pypi/MySQL-python

    $zip MySQL-python-1.2.2.tar.gz
    $ tar -xvf MySQL-python-1.2.2.tar
    $ cd MySQL-python-1.2.2
    $ python setup.py build
    $ python setup.py install

    2,安装python的MySQLdb时报错mysql_config not found

    我的linux系统时centOS7，用的数据库时mariadb，
    解决办法：
    yum install mysql-devel

    然后在执行1的安装

    3，检查是否安装成功
    进入python
    >>import MySQLdb
    >>

    无返回值，表示安装成功
    完美解决

  • python的urllib2模块获取网页内容


    import urllib2
    #直接请求url
    response = urllib.urlopen('http://www.baidu.com')
    #获取状态码，如200
    print response.getcode()
    #打印网页源码
    print response.read()

  • vim编辑器中Emmet的常用快捷键

    <c-y>, 展开简写式
    <c-y>d Balance a Tag Inward(选中包围的标签?)
    <c-y>D Balance a Tag Outward
    <c-y>n 进入下个编辑点
    <c-y>N 进入上个编辑点
    <c-y>i 更新<img>图像尺寸
    <c-y>m 合并文本行
    <c-y>k 删除标签
    <c-y>j 分解/展开空标签
    <c-y>/ 注释开关
    <c-y>a 从URL生成anchor标签
    <c-y>A 从URL生成引用文本

  • jquery基础知识

    一，jquery选择器

    1.id选择器  $(“#id”)

    2. 类选择器 $(“.class”)

    3. 元素选择器 $(“span”)

    4. ance desc选择器 $(“div  span”)

    选择整个家族的子元素

    5.parent > child选择器

    只选择子元素

    6.某元素下面的元素 prev + siblings

    用法: $("prev + siblings")
<div>
  <span></span>
  <p></p>
  <span>选中的元素</span>
  <span></span>
</div>

    7.某元素下面到某元素 prev ~ siblings

    用法: $("prev ~ siblings")

<div>
  <span></span>
  <p></p>
  <span>选中的元素</span>
  <span>选中的元素</span>
</div>

  • 前端自动化gulp入门

    一，gulp的安装

    1，glup是基本nodejs安装的所以我们先简单的说一下nodejs的安装。

    www.nodejs.org是nodejs的官网，下载后，下一步下一步安装一遍。

    安装nodejs后默认就有了nodejs的包管理工具npm（英文全称应该是 Node Package Manager），可以理解为就是给nodejs下载插件的。

    如何查看nodejs是否安装成功

    window用户可以用 PowerShell 里面输入node -v，返回版本号证明你的nodejs正确安装了。

    
node -v             //输入，意思是查询nodejs的版本号
v0.12.7             //返回一个软件版本号

    2，有了nodejs，我们就可以放心大胆的安装gulp了，注意，这里会有一个小坑。

    输入语句如下，后面的-g参数表示在全局范围安装，理解为不管在电脑的那个目录，都可以用到gulp。

    
npm install gulp -g

    很多时候我们会安装不上，因为被墙了。没关系，大公司淘宝为我们提供了结局方案。亲们可以移步到http://npm.taobao.org/。

    安装完成，以后就可以用命令cnpm来代替npm。

    
//用淘宝镜像来安装gulp
cnpm install gulp -g

    二，初始化项目

    
mkdir  myproject
cd  myproject
cnpm init                                //回车后会有一些配置提示，可以忽略，一路回车完成。
cnpm install gulp --save-dev             //下载gulp文件到项目中

    完成后，在myproject目录中会增加一个文件夹和一个json文件，分别是node_modules和package.json。
    新建gulpfile.js文件

    
var gulp = require('gulp');

gulp.task('hello',function(){
  console.log('你好');
});

gulp.task('default',['hello']);

    回到命令行，输入gulp，就会自动输出名叫hello的任务，输出你好