Hi, streamlit community
Currently, I render a video with the st.markdown
API, something like:
st.markdown(
f"""
<video controls="" type="video/mp4" id="replay" width=100% height="auto" src="{video_path}#t=1" playsinline autoplay muted></video>
""",
unsafe_allow_html=True,
)
This works nicely in both browsers and mobile apps, however, I’d like to switch to Video.js for more granular controllability as it supports more options to interact with the video (e.g. forward by frame, set a low play rate, etc).
As it’s frequently suggested in the other threads, at first I used streamlit.components.v1.html
as following:
with open("path/to/my.html", "r") as f:
video_html = f.read().replace("{video_path}", video_path)
html(video_html, height=500)
<link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script>
<video id="my-player" class="video-js">
<source src="{video_path}" type="video/mp4">
</video>
<script>
var player = videojs('my-player', {
controls: true,
autoplay: 'muted',
preload: 'auto',
playsinline: true,
fluid: true,
});
</script>
This successfully rendered the video with the Video.js framework, however, Streamlit wrapped the code into iFrame which requires to specify the height
parameter as the absolute value (e.g. height=500
), so it won’t work across different browsers and mobile phones. I couldn’t find a solution to make the inserted iFrame fluid to the parent HTML that automatically adjusts the height.
I also tried to use st.markdown(video_html, unsafe_allow_html=True)
and st.html(video_html)
instead of streamlit.components.v1.html
. They both successfully adjusted the size of the inserted HTML, however, Video.js didn’t work. Maybe these APIs sanitize and interfere the custom JavaScripts code.
I’ve exhausted options and wonder if I have to go though the Custom Component to resolve this issue. Does anyone know if I’m going down the right path?
I’m fine to work on the custom component, but I’d like to make sure that it can solve the issue I’m currently facing.
Thanks in advance!