javascript - Video pause or slowdown in specific time in dashboard - dash by plotly

Question

I have embedded a video in the dashboard through the normal Html component. I want the video to pause or slow down at certain times, and I have the time when I want to slow it down. How can I achieve this in Dash? I am pretty new to javascript and react, but I can learn. Pl provide some leads.

Answer 1

I could be wrong because I have never used dash, but their documentation, https://dash.plotly.com/dash-html-components, makes me assume that you have the ability to set the id of the video object and call custom javascript files to do what you want.

https://dash.plotly.com/layout and https://dash.plotly.com/external-resources#adding-external-css/javascript say that in dash it would look something like this

Create these files and folders:

• app.py
• assets/custom-script.js

app.py:

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children='This is my video!'),
    html.video(id='myVideo')
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

custom-script.js:

var vid = document.getElementById("myVideo");
vid.addEventListener('timeupdate', function(){
    if (vid.currentTime > 30 && vid.currentTime < 36) {
        vid.playbackRate = 0.5;
    } else {
        vid.playbackRate = 1;
    }
});

Here is a codepen of the vanilla javascript

Codepen

1. https://www.w3schools.com/tags/av_prop_playbackrate.asp
2. https://www.w3schools.com/tags/av_prop_currenttime.asp
3. https://www.w3schools.com/tags/av_event_playing.asp

I am taking a complete stab based on the documentation alone, but you asked for leads. You can definitely get closer with this info. Good luck.