如何将bokeh/panel动画与dash.js这样的视频播放器同步？

Question

我正在使用bokeh和panel来创建一个动画图形，以及一些导航控件，如滑块、播放/暂停、跳过5s等。

同时，还有一些视频片段，我希望与该动画同步显示。我开始使用dash.js，并设法相应地准备了视频，并将其显示在一个独立的页面中。(耶！)

因为我不太了解javascript，所以我想知道:有没有同步这两件事的解决方案？

(理想场景:一个面板小部件，用于显示和控制python中的dash.js视频播放器。好吧，我们可以期待，不是吗？但我会接受任何提示、建议和想法。)

Answer 1

回答我自己的问题，以防万一它可以节省任何人的试错。

在走进一些死胡同之后，我编写了一个小的自定义bokeh小部件，它可以做我需要的事情。

代码如下：

from bokeh.core.properties import Bool, String, Float
from bokeh.models import Div

DASH_URL = <url to the dash.js lib>

JS_CODE = """
import * as p from "core/properties"
import {Div, DivView} from "models/widgets/div"

declare var dashjs: any

export type DashViewerData = {from: number, to: number}

export class DashViewerView extends DivView {
  model: DashViewer
  private video_el: HTMLElement
  private player: any  

  render(): void {
    super.render()
    this.video_el = document.createElement('video')
    this.video_el.id = this.model.video_element_id
    this.video_el.setAttribute('width', "1120px") 
    this.video_el.setAttribute('height', "630px")
    this.video_el.setAttribute('controls', '')
    this.el.appendChild(this.video_el)
    this.el.appendChild(document.createTextNode(this.model.url))

    document.createElement('script')
    this.player = dashjs.MediaPlayer().create();
    this.player.initialize(this.video_el, this.model.url, this.model.is_playing);
  }

  play_listener(){
    if (this.model.is_playing){
      this.player.play()
    }
    else {
      this.player.pause()
    }
  }

  connect_signals(): void {
    this.connect(this.model.properties.is_playing.change, this.play_listener);
    this.connect(this.model.properties.time.change, ()=>this.player.seek(this.model.time));
  }
}

export namespace DashViewer {
  export type Attrs = p.AttrsOf<Props>

  export type Props = Div.Props & {
    video_element_id: p.Property<string>
    url: p.Property<string>
    is_playing: p.Property<boolean>
    time: p.Property<number>
  }
}

export interface DashViewer extends DashViewer.Attrs {}

export class DashViewer extends Div {
  properties: DashViewer.Props
  __view_type__: DashViewerView

  constructor(attrs?: Partial<DashViewer.Attrs>) {
    super(attrs)
  }

  static init_DashViewer(): void {
    this.prototype.default_view = DashViewerView

    this.define<DashViewer.Props>({
      video_element_id: [p.String, 'dashviewer_video'],
      url:              [p.String, ''],
      is_playing:       [p.Boolean, false],
      time:             [p.Number, 0.0]
    })
  }
}
"""


class DashViewer(Div):
    __implementation__ = JS_CODE
    __javascript__ = [DASH_URL]
    __css__ = []

    video_element_id = String(default='dash_player', help="id of the video element in the DOM")
    url = String(help="The URL from which to load the video. (This should point to an mpd file.)")
    is_playing = Bool(default=False)
    time = Float(default=0.0, help="Time in seconds. Change this to make the player jump to that time.")