草庐IT

video-canvas-magic

全部标签

javascript - 增加 video-js HTML5 播放器的缓冲区大小或时间

如何增加video-jsHTML5播放器的缓冲?我有一台美国服务器,在美国一切正常,但欧盟的客户存在与视频缓存相关的加载问题。video.js中的缓冲区大小是常量值,我想更改它。 最佳答案 您现在可以通过修改videojs.Hls.GOAL_BUFFER_LENGTH来自定义缓冲区长度以更改HLS视频的缓冲区大小,我试过了并且对我有用 关于javascript-增加video-jsHTML5播放器的缓冲区大小或时间,我们在StackOverflow上找到一个类似的问题:

javascript - Backbone.js 和 three.js - 带 Canvas 的 MVC

我正处于开发一个小型网络应用程序的规划阶段,该应用程序可以在3D空间中进行一些交互式数据可视化。对于最广泛的浏览器兼容性,three.js看起来是最佳选择,因为我可以使用WebGL、canvas或SVG渲染相同的场景。理想情况下,我想使用backbone.js来提供一个很好的MVC层并避免编写ajax的一些乏味,但在我深入了解它之前,我想知道是否有人有任何经验/技巧/话语尝试使这项工作的建议。假设使用canvas或WebGL,似乎backbone.view可以很容易地抽象出来以支持three.js模型。渲染函数意味着被覆盖。我可以在Canvas上附加一个简单的监听器,然后我们使用一些t

javascript - 阻止了来源为 "http://video.sasads.com"的框架访问框架

今天在开发网站时,我注意到控制台上有些奇怪。这是我第二次看到此错误消息。我用谷歌搜索了sasads.com网站,但没有找到任何信息。网站显然是xml性质的,似乎非常可疑。控制台错误代码是阻止了来源为“http://video.sasads.com”的框架访问来源为“http://”的框架。协议(protocol)、域和端口必须匹配。该网站是php/jquery并使用最新的jquery发行版。我在js文件夹中搜索了sasads.com,但找不到这样的字符串。被阻止的jquery声明它在1.7中运行,因此它必须在异地某处加载它。使用的浏览器是chrome,服务器运行最新的php和mysql

javascript - 在 HTML5 Canvas 上创建立体 3D 图像

我正在使用HTML5canvas对象创建一个简单的3D引擎。它运作良好,但我想实现红/蓝立体图像处理,这样人们就可以使用红/蓝眼镜真正看到3D。目前,我对3D对象进行了两次渲染,第二次是从紧挨着第一个相机位置的相机位置渲染的。我面临的问题是如何将渲染的两个对象组合成具有正确颜色的浮雕。现在我使用globalAlpha=0.5并将第一个渲染为红色,第二个渲染为蓝色。然而,这并不完全有效,因为仅受红色对象影响的像素应该保持红色,但由于我的背景颜色是黑色,它们会变成黑色和红色之间的颜色。在查看创建3D浮雕的应用程序时,我注意到红色和蓝色像素一起计算如下:2550000255---------

javascript - node.js 白板应用程序的客户端或服务器端 HTML5 Canvas 渲染?

我在想一个小的白板网络应用程序会是提高我的node.js和JavaScript技能的好方法。我在网上看到了一些,这很有意义,因为它似乎非常适合这种堆栈。不过,花点时间想想,我想知道客户端和服务器在这种Web应用程序中的Angular色。跌跌撞撞node-canvas,我变得更加糊涂了。客户端和服务器具体应该负责什么?如果服务器能够渲染到Canvas,它是否应该接受并验证来自客户端的输入,然后通过socket.io将其广播给所有其他连接的用户??这样,服务器就保留了一个master-canvas元素。新用户连接后,服务器只需向客户端推出其Canvas-使其与已绘制的内容同步。任何关于实现

javascript - 检查 GoogleMap Canvas 元素是否已经空闲

我的问题很直接。google.maps.event.addListenerOnce(map,'idle',function(){//code});这段代码将在map当前忙缩放或平移后触发。不是在它已经闲置的时候。有没有办法在if语句中检查Canvas的状态?因此,当它已经空闲时,您将在不添加监听器的情况下执行//code? 最佳答案 没有记录map的空闲状态信号的属性,但您可以自己实现它。假设您在map初始化后立即调用它:google.maps.event.addListener(map,'idle',function(){this

javascript - JS Canvas - 以指定 Angular 画线

我想制作一个应用程序,让球按照鼠标击中它的Angular移动。因此,如果您从左上象限以30度Angular向下滑动鼠标(我猜那将是180-30=150度Angular),它会以这种方式击球。我一直在这样画我的线条:functiondrawAngles(){vard=50;//startlineat(10,20),move50pxawayatangleof30degreesvarangle=80*Math.PI/180;ctx.beginPath();ctx.moveTo(300,0);ctx.lineTo(300,600);//x,yctx.moveTo(0,300);ctx.line

javascript - Canvas drawImage 不在 Cordova 中绘制,安全问题?

我想在Cordova应用程序中将图像绘制到Canvas上。当图片路径在www内时我的应用程序的目录,绘图按预期工作。但是,如果图像是由Cordova相机制作的,因此存储在../../tmp中。关于www目录,drawImage(...)产生黑色图片。这可能是一个安全问题,因为可以在www中找到该应用程序的源代码。目录,但图像不是。另一方面,标签可以毫无问题地显示这些图像。问题真的是安全问题吗?我能做些什么来解决它,即不产生黑色图片? 最佳答案 在尝试了无数次之后:问题很简单,我想使用drawImage()的图像分辨率太高了。降低分辨

javascript - Canvas 在移动网络上获得触摸位置

我有一个代码,它从(x,y)坐标拖动一条线到新鼠标(x,y)坐标。这在桌面浏览器中工作正常,但由于某种原因它在移动浏览器中不起作用。我添加了触摸事件监听器,但我想坐标是如何变得不正确的。这是我的代码:functiongetMouse(e){varelement=canvas,offsetX=0,offsetY=0;if(element.offsetParent){do{offsetX+=element.offsetLeft;offsetY+=element.offsetTop;}while((element=element.offsetParent));}mx=(e.pageX-off

javascript - 如何将嵌入式 YouTube 视频的帧(通过 iframe)写入 Canvas ?

我希望能够从YouTube视频中的不同点(不仅仅是缩略图)提取帧,并对它们进行一些处理。我可以使用iframeAPI将视频嵌入我的网站,但我正在努力寻找一种方法将其捕获到Canvas上。(如果我被迫捕获整个屏幕没关系,如果我必须更改浏览器设置以允许它也没关系。) 最佳答案 一种选择是编写浏览器扩展。但我猜你会想避免这种情况。另一种选择是使用ScreenCaptureAPI(Chrome、Edge和Firefox支持)。查看browsercompatibilityinformation在MDN上。使用此API,您可以允许您的用户共享他