在散景应用程序的 <video> 标签中引用本地文件

Question

下面是在 bokeh 应用中播放本地文件中的视频的最小示例 (non-working)。该应用程序使用 Div object 和 html <video> 标签。预期的行为是立即在应用程序中播放视频。 non-working部分是对本地视频文件的引用。

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


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

curdoc().add_root(div)

应用程序 so.py 和视频 movie.mp4，都在同一目录中。

运行命令行中的应用在查找 movie.mp4

时指示 404 错误

浏览器中的应用程序屏幕截图表明视频播放器已加载但找不到视频。

还尝试了 <source src="file:///C:/so/movie.mp4" type="video/mp4"> 引用视频文件的完整路径，也 non-working。

Answer 1

我认为 Bokeh 不支持在打开页面时从本地目录自动加载视频文件。您需要将视频放在 Web 服务器上并使用 HTTP 协议加载它。正如@Doug Sillars 在他的 post 中指出的那样，您应该将 src="movie.mp4" 替换为 src="http://localhost:5006/so/sample.mp4" 并消除对运行外部 Mongoose Web 服务器的需求。所以你的代码会变得像下面的代码一样（它已经过测试并且可以正常工作！）运行它与 bokeh serve --show so

main.py

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


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

curdoc().add_root(div)

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    {{ bokeh_css }}
    {{ bokeh_js }}
  </head>
  <body>
    {{ plot_div|indent(8) }}
    {{ plot_script|indent(8) }}
  </body>
</html>

directory structure:

so
   |
   +---main.py
   +---static
      +---movie.mp4
   +---templates
        +---index.html

另一种选择是使用 FileInput 小部件并让用户可以 select 来自本地文件系统的文件，如下例所示（在 Bokeh v2.2.1 上测试）：

from bokeh.plotting import show
from bokeh.models import Div, Column, FileInput, CustomJS

code = '''  const file = document.getElementsByTagName('input')[0].files[0]
            var URL = window.URL || window.webkitURL 
            var fileURL = URL.createObjectURL(file)
            var videoNode = document.querySelector('video')
            videoNode.src = fileURL '''

div = Div(text="""<video width="500px" height="250px" controls><source src="" type="video/mp4"></video>""")
fileinput = FileInput(accept=".mp4,.mpg,.mov", visible = True, width = 250, name = 'fileinput')  
fileinput.js_on_change('value', CustomJS(args={'fileinput': fileinput}, code = code))

show(Column(div, fileinput))

Answer 2

似乎无法将视频作为本地文件播放，因为 security issues. Creating a very quick webserver using mongoose.ws 有效。上面的代码就变成了

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


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

curdoc().add_root(div)

其中 URL 由 mongoose 应用程序创建。

Answer 3

您的页面位于 localhost:5006/so，但您请求的视频位于 localhost:5006/movie.mp4。我想你想要 localhost:5006/so/movie.mp4.

在散景应用程序的 <video> 标签中引用本地文件

reference local file in a <video> tag in a bokeh app

html5-video

bokeh