小编AJB*_*AJB的帖子

mediaelement.js - 视频缩放选项(例如'fit'或'fill')

有没有人知道 MEJS播放器中缩放视频的方法,以便播放器本身可以处理任何信箱或列盒?与JWPlayer的"适合"和"填充"选项类似.

基本上我有一个存在于包装器中的播放器,我根据用户的屏幕分辨率调整包装器的大小.像这样:

<div id="video_dims_wrapper" style="width: 1280px; height: 720px;">
    <video id="video_player" width="1280" height="720" controls="controls" preload="none" autoplay="autoplay" style="width: 100%; height: 100%;">           

        <source type="video/mp4" src="my_video.mp4" />
        <source type="video/webm" src="my_video.webm" />

        //Flash fallback removed for brevity

    </video>
</div>
Run Code Online (Sandbox Code Playgroud)

然后我只调整#video_dims_wrapper和调整大小中包含的MEJS元素(由于宽度:100%;高度:100%;样式声明).

如果所有视频具有相同的宽高比(在这种情况下为16:9),则效果很好,但如果恰好有不同宽高比的视频,那么它不会播放器中调整大小,而是缩放整个播放器尺寸.

我想要发生的是,该游戏玩家始终保持16:9的宽高比,视频可以根据需要缩放以适应播放器和播放器的信箱或列盒.

有人碰到这个吗?有解决方案吗

谢谢你的帮助.

mediaelement.js

5
推荐指数
1
解决办法
1730
查看次数

大型DOM树减少了jQuery点击事件

问题解决了!

Dhoelzgen和Matthew Blancarte根据公认的答案解决了这个问题(特定于我的配置).问题的JIST是,我是结合"click"事件到所有.inventory_item元素时,我应该使用jQuery的方法对委托事件处理,像这样一直:

<head>
    <script>
        $(document).ready(function(){

            $('#inventory_index').on('click', '.inventory_item', function(){
                alert('Click event fired!');
            });

        });
    </script>
</head>
Run Code Online (Sandbox Code Playgroud)

使用这种技术,我大大提高了我的应用程序的响应能力.

继续阅读所有细节......

概观

我正在开发一个在"单页"(例如www.myapp.com/app.php)中运行的库存应用程序,并使用jQuery执行XHR来加载DIV中的各种内容.

我正在使用jQuery 1.9.1和jQuery UI 1.8(因为我必须出于遗留原因).

问题:慢点击事件

我遇到的问题是随着DOM树变大,点击事件变得越来越慢.当从搜索返回约1000个项目时,延迟目前约为2秒.

这是jQuery的示例:

<head>
    <script>
        $(document).ready(function(){
            var inventory_item = $('#inventory_index.inventory_item');

            inventory_item.on('click', function(){
                alert('Click event fired!');
            });
        });
    </script>
</head>
Run Code Online (Sandbox Code Playgroud)

和HTML:

<div id="inventory_index">
    <div class="inventory_item">Inventory Item 0 <img src="inventory_item_0.jpg"></div>
    <!-- 999 Iterations -->
    <div class="inventory_item">Inventory Item 1000 <img src="inventory_item_1000.jpg"></div>
</div>
Run Code Online (Sandbox Code Playgroud)

起初我认为是因为图像存在于每个内部.inventory_item,但是在实现延迟加载后,我发现问题与DOM中的元素数量有关,而不是与图像本身有关.

试图解决方案

正如您在上面的示例代码中所看到的,我已经尝试实现过去几天我能找到的最佳解决方案.也就是说,将.inventory_items 的集合包装在一个ID-able #inventory_index元素中,以便为jQuery提供一个关于它应该在哪里查看的提示.

而且,另外,创建一个javascript对象来尝试从DOM搜索中获得更多时间(尽管,老实说,我不确定它 …

optimization performance jquery events

5
推荐指数
1
解决办法
3959
查看次数

仅提供来自 Express 静态目录的 .js 文件?

我正在寻找是否可以从 Express.js 静态目录中仅提供一种类型的文件(按扩展名过滤)。

例如,假设我有以下静态目录:

Static
    FileOne.js
    FileTwo.less
    FileThree.html
    FileFour.js
Run Code Online (Sandbox Code Playgroud)

说我想打用一个文件.js到任何给定的要求提供的扩展,以及所有其他请求会得到响应500(或类似的东西)。

我将如何实现这一目标?Express 是否有我找不到的内置过滤器,或者我是否需要使用正则表达式?

javascript regex static node.js express

5
推荐指数
2
解决办法
2138
查看次数

这个 API 签名请求方法安全吗?

我正在认证为我JSON-RPC API和我的当前工作的策略是使用通过发送请求签约POSTSSL

我想知道是否有人可以看到我没有使用以下签名方法考虑的任何漏洞。

客户端和服务器之间的所有通信都是通过POST发送的请求完成的SSLhttpAPI 服务器会直接拒绝不安全的请求。

依赖关系

var uuid = require('node-uuid');
var crypto = require('crypto');
var moment = require('moment');
var MyAPI = require('request-json').newClient('https://api.myappdomain.com');
Run Code Online (Sandbox Code Playgroud)

依赖链接:node-uuid , crypto , moment , request-json

瓦尔斯

var apiVersion = '1.0';
var publicKey = 'MY_PUBLIC_KEY_UUID';
var secretKey = 'MY_SECRET_KEY_UUID';
Run Code Online (Sandbox Code Playgroud)

请求对象

var request = {
    requestID : uuid.v4(),
    apiVersion : apiVersion,
    nonce : uuid.v4(),
    timestamp : moment.utc( new Date() ),
    params : params
}
Run Code Online (Sandbox Code Playgroud)

签名 …

api digital-signature hmac node.js

5
推荐指数
1
解决办法
1197
查看次数

如何使用Express.js仅向白名单域提供API访问?

我正在为我的Node.js/Express.js应用程序开发一层安全性,我希望限制对域白名单的访问.

破败不堪:

  • 用户Project在我的系统上创建一个.
  • Project发出一Public KeySecret Key将被用于创建签名的请求.
  • 此外,任何给定的管理员Project都需要提供他们希望能够访问该API的域的白名单Project.这是在基于Web的控制台中完成的,而不是作为每个请求的一部分.
  • 当API收到请求时,req.get('origin')用于确定请求的原始域.
  • 根据白名单检查原点,并相应地允许或拒绝原点.

在代码中:

var app = require('express');

app.post('/API-Endpoint', function(req,res) {

    var originDomain = req.get('origin');   /// e.g. mysite.com
    /// Origin is then checked against the whitelist array of domains

});
Run Code Online (Sandbox Code Playgroud)

问题

  • 关于Domain Origin Spoofing,我需要注意哪些问题?
  • 这是一个有价值的安全功能吗?或者它是如此容易被欺骗,以至于没有必要打扰?

javascript api cross-domain node.js express

5
推荐指数
1
解决办法
2223
查看次数

Docker git clone在容器启动时?

我目前的理解是Docker在执行RUN git clone期间执行任何命令docker build,因此我的应用程序的代码库被"烘焙"到Docker镜像中.

如何git clone在容器启动时运行?

或者这被认为是不好的做法和反模式?

我的想法是,每次我对我的git回购进行任何更改时,我都不想要提升我的Docker图像版本.

git docker

5
推荐指数
1
解决办法
1627
查看次数

为什么mongo点符号替换整个子文档?

我的db中有以下doc:

{
  "_id": ObjectId("ABCDEFG12345"),
  "options" : {
    "foo": "bar",
    "another": "something"
  },
  "date" : {
    "created": 1234567890,
    "updated": 0
  }
}
Run Code Online (Sandbox Code Playgroud)

我想更新options.foodate.updated同时使用点符号,如下所示:

var mongojs = require('mongojs');

var optionName = 'foo';
var optionValue = 'baz';

var updates = {};
updates['options.' + optionName] = optionValue;
updates['date.updated'] = new Date().getTime();

db.myCollection.findAndModify({
    query : {
        _id : ObjectId('ABCDEFG12345')
    },
    update : {
        $set : updates
    },
    upsert : false,
    new : true
}, function(error, doc, result) {

    console.log(doc.options);
    console.log(doc.date);

}); …
Run Code Online (Sandbox Code Playgroud)

syntax mongodb mongojs

5
推荐指数
1
解决办法
376
查看次数

如何防止在单击 SortableJS 项目的子元素之一时选择该项目?

问题

我正在使用SortableJS构建一个可拖动的树组件。这意味着我的每个sortable-items 都有 atoggle-arrow作为打开和关闭 a 的子元素sub-tree(如果有的话)。

我试图用它来阻止在单击时stopPropagation()选择父项,但它不起作用。sortable-itemtoggle-arrow

关闭时看起来像这样: 在此输入图像描述

打开时看起来像这样: 在此输入图像描述

您在打开状态下看到的蓝色突出显示(第二张图片)是我selectedClass在使用multiDrag插件时为选项选择的样式。

这说明当我单击它时,它会导致选择toggle-arrow父级。sortable-item

我不希望这种事发生。

代码

我的 SortableJS 树组件中的项目代码如下所示(使用 Vue.js 和 Pug 语法):

div.sortable-item
    div.content
        div.toggle-arrow(@click.stop="toggleTree($event)")
        div.icon
        div.title
    div.sub-tree
Run Code Online (Sandbox Code Playgroud)

然后我有一个用于@click绑定我的toggle-arrow元素的处理程序:

toggleTree = function($event) {
    $event.stopPropagation()
    /// Code for handling the sub-tree toggling goes here.
    /// The sub-tree toggling itself works just fine.
}
Run Code Online (Sandbox Code Playgroud)

您可以看到我声明@click.stop为事件绑定,这应该阻止click事件从子元素冒泡toggle-arrow,但它不起作用。 …

vue.js sortablejs multi-drag

4
推荐指数
1
解决办法
1946
查看次数

jQuery - 使用.delay()推迟.load()?

我刚刚遇到使用jQuery的.delay()方法(v 1.4.2)来尝试延迟以下.load()方法的问题.

像这样:

$('myElement').delay(500).load('myPage.php');
Run Code Online (Sandbox Code Playgroud)

它似乎只是忽略.delay().

我甚至想出了一个像这样的解决方法:

setTimeout(function(){
    $('myElement').load('myPage.php');
}, 500);
Run Code Online (Sandbox Code Playgroud)

但是,那不是那么优雅.其他人遇到这个并找到了更好的解决方案?

谢谢.

jquery load delay

3
推荐指数
1
解决办法
3万
查看次数

如何使用 socketio 将数据从客户端传递到我的 nodejs 服务器?

在客户端使用 socketio,在服务器端使用带有 socketio 的 nodejs,我将如何将数据从客户端传递到服务器?我会在客户端使用带有 socketio 的发射函数吗?

node.js socket.io

3
推荐指数
1
解决办法
2720
查看次数

当客户端尝试更新在客户端过时的数据实体时,哪种 HTTP 状态代码是合适的?

我已经构建了一个 API,其中客户端将指示服务器更新数据库中的某个实体,并且它必须容纳多个用户尝试对同一数据实体进行操作,可能是在“同时”。

这是一个分布式用户竞争条件问题。(类似于 Wordpress 在其他用户编辑博客文章时处理“锁定”博客文章的方式。)


示例数据实体

{
    versionID : 12345,
    type : "building",
    name : "The CN Tower"
}
Run Code Online (Sandbox Code Playgroud)


操作数据实体

例如,客户端将告诉服务器任何给定实体updatename属性。

为了处理试图更改同一实体的多个用户 - 不会让用户意外覆盖彼此的更新 - 每个用户必须随其update请求一起发送versionID(也可能称为 a stateID)它从服务器获取的数据库实体加载到 UI 中(或者在 CLI 应用程序的情况下存储在客户端)。

这样,如果Client A之前更新过建筑物Client B,服务器将能够告知Client B他们的更新请求已失败,因为他们尝试更新的建筑物不是数据库中此类记录的当前(规范)状态。


问题

当任何用户尝试更新已由其他用户在此期间更新的数据库记录时,来自服务器的正确 http状态代码是什么?

http http-status-codes http-response-codes

3
推荐指数
1
解决办法
1729
查看次数

尝试分段上传时 AWS.S3.upload() 403 错误

长话短说

当尝试使用浏览器中适用于 Javascript 的 AWS 开发工具包s3.upload()提供的方法以及通过调用生成的临时IAM 凭证 直接从浏览器上传文件时,对于非分段上传以及分段上传的第一部分,一切正常上传。AWS.STS.getFederationToken()

但是,当s3.upload()尝试发送分段上传的第二部分时, S3会响应错误403 Access Denied

为什么?



上下文

我正在我的应用程序中实现一个上传器,它将支持直接从浏览器到我的 S3 存储桶的分段(分块)上传。

为了实现这一目标,我在浏览器中使用了适用于 Javascript 的 AWS 开发工具包s3.upload()的方法,据我所知,它只不过是其对.new AWS.S3.ManagedUpload()

我正在尝试的简单说明可以在这里找到:https://aws.amazon.com/blogs/developer/announcing-the-amazon-s3-management-uploader-in-the-aws-sdk-for- javascript/

此外,我还使用API 层AWS.STS.getFederationToken()提供临时IAM 用户凭证来授权上传。

1、2、3:

  1. 用户通过标准 HTML 选择文件来启动上传<input type="file">
  2. 这会触发对我的 API 层的初始请求,以确保用户在我自己的系统上拥有执行此操作所需的权限,如果这是真的,那么我的服务器会使用AWS.STS.getFederationToken()一个Policy参数进行调用,该参数将其权限范围限制为将文件上传到提供钥匙。然后将生成的临时信用返回给浏览器。
  3. 现在浏览器已经有了它需要的临时信用,它可以使用它们来创建一个新的AWS.S3客户端,然后执行该AWS.S3.upload()方法来执行文件的(据称)自动分段上传。



代码

api.myapp.com/vendUploadCreds.js

这是调用的 API 层方法,用于生成和出售临时上传凭证。此时,该帐户已通过身份验证并被授权接收凭据并上传文件。

module.exports = function vendUploadCreds(request, response) {

    var …
Run Code Online (Sandbox Code Playgroud)

upload multipart amazon-s3 amazon-web-services aws-sdk-js

3
推荐指数
1
解决办法
5609
查看次数