html5 video filter,将过滤器应用于没有CSS的HTML5视频(Apply filter to HTML5 video without CSS)...

将过滤器应用于没有CSS的HTML5视频(Apply filter to HTML5 video without CSS)

我正在寻找一种方法将一些过滤器应用于视频(实时从webcamera中获取)，但不使用任何类型的CSS类。

我不想创建一个CSS类，如：

.blur {

-webkit-filter: blur(1px);

-moz-filter: blur(1px);

-o-filter: blur(1px);

-ms-filter: blur(1px);

filter: blur(1px);

}

并将其应用于document.getElementById("myvideo").className = "blur" 。 不， 我不是在寻找这个。 我需要将此过滤器嵌入到视频中，以便用户可以退出它们。 (使用注入的CSS不是一种选择)。

有没有办法做到这一点？

谢谢

编辑：

我有像之前发布的代码，我有一个CSS类，我分配给我的画布，以便随时应用过滤器

问题？ 用户可以使用Chrome中包含的开发人员工具或使用Firebug(通过单独禁用类或元素)来禁用注入的CSS。

所以我需要一个解决方案来应用这些过滤器，但不将CSS注入我的canvas元素。

I'm looking for a way to apply some filters to a video (took from webcamera in real time), but without using any kind of CSS class.

I do not want to create a CSS class like:

.blur {

-webkit-filter: blur(1px);

-moz-filter: blur(1px);

-o-filter: blur(1px);

-ms-filter: blur(1px);

filter: blur(1px);

}

And apply it like document.getElementById("myvideo").className = "blur". No, I'm not looking for this. I need to embed this filter into video so users can quit them. (using injected CSS is not an option).

Is there any way to do this?

Thanks

EDIT:

I have code like I post before, where I have a CSS class that I assign to my canvas to apply a filter whenever I want

Problem? Users can disable injected CSS using Developer Tools included in Chrome, or using Firebug (by disabling classes, or elements individually).

So I need a solution to apply filters like these, but without injecting CSS into my canvas element.

原文：https://stackoverflow.com/questions/21486185

更新时间：2020-08-20 18:08

最满意答案

在将视频数据传送到浏览器之前，您必须将其应用于视频数据。 有很多方法可以做到这一点，例如：ffmpeg支持各种过滤器 (包括模糊)。

您可以在客户端上撤消您在客户端上执行的任何操作(用户控制客户端，您不需要)。

You have to apply your filters to the video data before delivering it to the browser. There are lots of ways you could do this, for example: ffmpeg supports various filters (including blur).

Anything you can do on the client can be undone by the user (the user controls the client, you don't).

相关问答

http://jsfiddle.net/Ykmya/8/ 这是一个简单的解决方法，我只是使用webkit过滤器来提高亮度。 我将它绘制到画布上，然后过滤像素，这应该更平滑，但我无法通过跨域访问您的视频。 相反，我只是使用CSS风格 video{

-webkit-filter: brightness(108.5%);

}

编辑：这已被固定在我相信的最新版本的Chrome上。 http://jsfiddle.net/Ykmya/8/ Here's a simple fix, I simp

...

您无法通过CSS设置视频源。 因为您在下面看到了视频的基本结构：

Your browser does not support HTML5 video.

您可以设置其他属性，如背景图像，颜色等。但是，您无法通过css设置源，css用于设计播放按钮和任何其他按钮功能。 如果您确实需要在

...

position元素不接受float值。 请参阅http://www.w3schools.com/css/css_positioning.asp以获取已接受的css值列表。 我不完全确定为什么你有一个downvote，除了css错误，我只能假设做了它的人，不明白视频中的边界是视频的一部分而且没有你自己的错。 以下解决方案将视频放在一个框中，该框由另一个具有边框的div框起。 .vid-border{

position: relative;

height: 480px;

width

...

请参阅我的问题，根据HTML 5在移动游猎。 似乎无法控制它，因为视频渲染通过浏览器委托给硬件，并显示在“上方”，因此控制它的css属性不会影响任何东西。 我的研究在一段时间之前，但不要以为从那以后发生了一些变化。 Please refer to my question according HTML 5 on mobile safari. Seems that it's impossible to control it, as video rendering is delegated to har

...

如果问题是视频与控件一起镜像，则不要使用视频的默认控件，使用javascript创建视频。 如果您按照w3.org上的HTML5视频中的示例进行操作并不难创建，也有一些在线教程可以做到这一点，例如在bloken-link.com上构建HTML5视频控件javascript ，他们有一个工作演示 。 这也可以让您自由地独立设置视频控件的样式，这样您就可以决定使用css对它们应用哪些转换。 如果你想模仿原始控件，你可以考虑让它们出现在悬停状态并使用css动画使它们淡出。 附录：查看VideoJS ，这

...

解决方案是添加overflow：隐藏在正被加载到iframe中的文件的css中。 如果文档不是您可以控制的源代码，则使用javascript将溢出隐藏属性添加到其正文中。 The solution was to add overflow:hidden in the css of the file that was being loaded into the iframe. If the document is not something you can control the source cod

...

在将视频数据传送到浏览器之前，您必须将其应用于视频数据。 有很多方法可以做到这一点，例如：ffmpeg支持各种过滤器 (包括模糊)。 您可以在客户端上撤消您在客户端上执行的任何操作(用户控制客户端，您不需要)。 You have to apply your filters to the video data before delivering it to the browser. There are lots of ways you could do this, for example: ffmp

...

谢谢你们花时间回应。 经过进一步检查，我发现控制台吐出了以下错误： 资源解释为样式表，但使用MIME类型text / html进行传输 我让我的服务器猜测静态内容的mime类型，因为它在过去已经适当地完成了，但它似乎没有做得对。 为了解决这个问题，我重新编写了我附加的静态传递函数，以防有人稍后遇到同样的情况： @welcomeApp.route('/static/')

def send_static(filepath):

currentLocation

...

实际上，我找到了一种没有CSS的方法。 JavaFX实际上具有可以使用的内置效果。 例如，对于照明，您可以使用 import javafx.scene.effect.Light;

import javafx.scene.effect.Lighting;

import javafx.beans.property.DoubleProperty;

import javafx.beans.property.SimpleDoubleProperty;

接着： Light.Distant ligh

...

在大多数设备上，互联网浏览器应该使用控件制作适当大小的视频框。 但是，可以自定义控件。 本文很好地解释了如何： http ： //www.inwebson.com/html5/custom-html5-video-controls-with-jquery/ 你可以只使用CSS做一些，但是对于最重要的更改，你也想要使用JavaScript。 On most devices, the internet browser should make an appropriately sized video b

...