如何将散焦/面板动画与dash.js等视频播放器同步

Question

我正在使用散焦和面板创建一个动画情节，以及一些导航控件，如滑块、播放/暂停、跳过5秒等。

同时，还有一些视频片段，我想与动画同步显示。我开始玩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.")