如何在Bokeh应用的<video>标签中正确引用本地视频文件

故障根因 #

• Bokeh Server属于Web服务，默认不提供任意本地目录的资源访问权限，直接写相对路径movie.mp4时服务端无对应路由，返回404错误
• file://开头的本地绝对路径会触发浏览器跨域限制，Bokeh页面运行在http://localhost域名下，浏览器禁止页面直接读取本地文件系统资源

解决方案1（推荐，适合任意大小视频） #

步骤1：启动服务时注册静态资源目录 #

运行应用时添加--static-dirs参数，将视频所在目录映射为服务端可访问的静态路由：

# Windows示例，视频存放在C:\so目录
bokeh serve --show so.py --static-dirs static=C:\so

# macOS/Linux示例，视频存放在/opt/so目录
bokeh serve --show so.py --static-dirs static=/opt/so

参数中static为自定义的路由前缀，可根据需求修改。

步骤2：修改视频资源路径 #

将Div组件中video标签的src路径修改为「路由前缀+文件名」格式：

from bokeh.models import Div
from bokeh.io import curdoc

div = Div(text="""
    <video width="300px" height="150px" controls autoplay>
    <source src="/static/movie.mp4" type="video/mp4"></video>
    """)

curdoc().add_root(div)

步骤3：重启Bokeh服务即可正常加载播放视频 #

解决方案2（适合小体积视频） #

将视频文件转成Base64编码，直接嵌入到src中，无需配置静态目录：

<source src="data:video/mp4;base64,此处替换为视频的Base64编码内容" type="video/mp4">

注：该方案会将视频内容直接写入HTML，视频体积过大会导致页面加载速度变慢。

内容的提问来源于stack exchange，提问作者Russell Burdt