小编Tom*_*wer的帖子

我希望同步播放 3 个视频，一次只能看到一个视频，并且可以选择在它们之间切换。所有内容都必须彼此同步并与音轨同步（如果更容易的话，可以只是其中一个视频文件的音轨）。

我只读过一些非常悲观的文章，认为在众多媒体文件中保持稳定且同步的帧速率几乎是不可能的。据说 FPS 会略有变化并且无法控制。（？）

由于我一次只需要一个可见的，我希望这对我有利，但我想知道是否有任何人可以向我指出的此类内容的任何 goto 程序。不是在寻找任何人为我编写任何代码，只是好奇我的研究是否误导了我。

✌&♡

我正在寻找使用JavaScript构建的东西,它将从给定的十六进制颜色数组中选择一个随机值(背景颜色)并将其应用于给定的div元素.

有人知道这样做的好方法吗？似乎没有什么对我有用,但我不是一个真正的JS精明的人.

这就是我正在做的事情: 点击地图上的标记打开侧面板并将地图置于标记的中心.侧面板占据屏幕右侧的3/4.

这就是我需要发生的事情: 根据面板打开后留下的视口的1/4使标记居中.

我可以获得标记的像素坐标,并在面板动画打开时计算它需要转换到的位置.问题是flyTo()只接受LngLatLike对象而我无法将我的像素坐标转换为纬度和经度.containerPointToLatLng()在切换到Mapbox GL之前,Leaflet.js有一个叫做派生的函数.

鉴于Mapbox GL的软化,尽管它有新意,我只能想象这是一种可能性.但是怎么样？

我已经构建了这个HTML5视频播放器,我将其加载到画布中进行操作并返回到画布上以显示它.视频开始时速度很慢,每次播放时帧速率都会变差.我现在在视频中操作的所有内容都是视频暂停时的颜色值,但最终会在将来发布的视频中使用实时操作.

我使用下面的教程来学习这个技巧https://www.youtube.com/watch?v=zjQzP3mOXdc

这是相关代码,但可能存在来自其他地方的干扰,因此请随意检查底部链接的源代码

var v = document.getElementById('video');
var color = "#DA7AC1";
var processes={
  timerCallback:function() {
    if (this.v2.paused || this.v2.ended) {
      return;
    }
        this.ctxIn.drawImage(this.v2,0,0,this.width,this.height);
        this.pixelScan();
        var self=this;
        setTimeout(function() {
          self.timerCallback();
        }, 0);
  },
  doLoad:function(){
    this.v2=document.getElementById("video");
    this.cIn=document.getElementById("cIn");
    this.ctxIn=this.cIn.getContext("2d");
    this.cOut=document.getElementById("cOut");
    this.ctxOut=this.cOut.getContext("2d");
    var self=this;
    this.v2.addEventListener("playing", function() {
      self.width=self.v2.videoWidth;
      self.height=self.v2.videoHeight;
      cIn.width=self.v2.videoWidth;
      cIn.height=self.v2.videoHeight;
      cOut.width=self.v2.videoWidth;
      cOut.height=self.v2.videoHeight;
      self.timerCallback();
    }, false);
  },
  pixelScan: function() {
    var frame = this.ctxIn.getImageData(0,0,this.width,this.height);
    for(var i=0; i<frame.data.length;i+=4) {
      var grayscale=frame.data[i]*.3+frame.data[i+1]*.59+frame.data[i+2]*.11;
      frame.data[i]=grayscale;
      frame.data[i+1]=grayscale;
      frame.data[i+2]=grayscale;
    }
    this.ctxOut.putImageData(frame,0,0);
    return;
  }
}

http://coreytegeler.com/ethan/

任何和所有的帮助将不胜感激!谢谢!