在Jupyter笔记本中播放带字幕的视频。

Question

在Jupyter笔记本中播放带字幕的视频。

pythonvideojupyter-notebookhtml5-videowebvtt

3

如何在Jupyter笔记本中播放带字幕的视频？

通过这些帖子中的代码片段，我尝试在Jupyter笔记本中播放视频：

from IPython.display import HTML

# Show video
compressed_path = 'team-rocket.video-compressed.mp4'
mp4 = open(compressed_path,'rb').read()
data_url = "data:video/mp4;base64," + b64encode(mp4).decode()


HTML("""
<video width=400 controls>
      <source src="%s" type="video/mp4">
</video>
""" % data_url)

[输出]:

当我尝试添加一个 `.vtt` 文件作为字幕时，该选项出现了

from IPython.display import HTML

# Show video
compressed_path = 'team-rocket.video-compressed.mp4'
mp4 = open(compressed_path,'rb').read()
data_url = "data:video/mp4;base64," + b64encode(mp4).decode()


HTML("""
<video width=400 controls>
      <source src="%s" type="video/mp4">
      <track src="team-rocket.vtt" label="English" kind="captions" srclang="en" default >
</video>
""" % data_url)

[输出]:

但是在播放视频时没有字幕/标题。如何在Jupyter笔记本中播放带字幕的视频？

上述示例中使用的文件位于：

team-rocket.vtt
team-rocket.video-compressed.mp4 文件可在 https://colab.research.google.com/drive/1IHgo9HWRc8tGqjmwWGunzxXDVhPaGay_?usp=sharing 找到。

- alvas

你尝试过以和视频相同的方式（通过 data url）加载 VTT 文件吗？ - J. M. Arnold

我刚刚尝试了使用相同的base64编码将vtt流式传输进去，但是它没有起作用。https://colab.research.google.com/drive/1IHgo9HWRc8tGqjmwWGunzxXDVhPaGay_?usp=sharing - alvas

1

@alvas 看起来Colab没有向浏览器公开正确的路径来加载vtt文件：https://imgur.com/a/DAV7BlP - Atalay K.

2个回答

3

试试这个：

from IPython.display import HTML
from base64 import b64encode

video_path = 'team-rocket.video-compressed.mp4'
captions_path = 'team-rocket.vtt'

with open(video_path, 'rb') as f:
    video_data = f.read()
    video_base64 = b64encode(video_data).decode()

with open(captions_path, 'r') as f:
    captions_data = f.read()
    captions_base64 = b64encode(captions_data.encode('utf-8')).decode()

video_html = f"""
<video width="640" height="360" controls>
    <source src="data:video/mp4;base64,{video_base64}" type="video/mp4">
    <track src="data:text/vtt;base64,{captions_base64}" kind="captions" srclang="en" label="English" default>
</video>
"""

HTML(video_html)

由于某些原因，明确在视频和字幕中流式传输并指定编码将绕过@igrinis' answer 指出的安全问题。

"data:video/mp4;base64,{video_base64}"
"data:text/vtt;base64,{captions_base64}"

- Mazhar

你应该在你的回答中添加一些解释。否则它看起来就像是一个代码转储。例如，考虑一下：它是否经过测试并被证明有效？它为什么比其他答案的逻辑更好（你可以解释一下，当使用直接的VTT文件URL时，它避免了需要自定义SSL证书...好吧，如果它确实这样做的话）...这只是一些提供更好答案的建议。也许你给出了正确的解决方案，但是没有上下文/解释的随机代码转储将更难赢得奖励。PS：不要回复这些话，我很快就会删除这条评论。 - VC.One

这个可以！我会很好地理解如何通过流媒体+编码规范来绕过那些安全问题。 - alvas

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- igrinis · Accepted Answer

这是一些安全问题的组合。现代浏览器禁止使用本地数据（在这种情况下是本地字幕文件），而Colab则防止您通过“不安全”的http协议渲染嵌入式视频。因此，为了显示带字幕的视频，您需要创建一个iframe并将通过https提供的视频（包括视频和字幕）嵌入其中。

您可以通过创建以下内容的单元格来测试此功能：

%%html
<iframe width="800" height="500" src="https://iandevlin.com/html5/webvtt-example.html"
frameborder="0" allow="encrypted-media;" allowfullscreen />

所以我认为，您需要创建一个自签名证书，将其添加到浏览器中使其合法化，运行一个TLS Web服务器在线程中以不阻塞笔记本电脑，创建一个带有<video>标记的小型HTML文件，该（HTML文件）您的Web服务器将通过HTTPS提供，并且其URL将是笔记本电脑中<iframe>的源。哇，这真的很复杂。

如果我们尝试将完整的HTML加载到一个具有在非本地存储的视频+轨道资产的iframe中，这些工作：

%%html
<iframe width="800" height="500" src="https://iandevlin.com/html5/webvtt-example.html"
frameborder="0" allow="encrypted-media;" allowfullscreen />

或者

HTML("""<iframe width="800" height="500" src="https://iandevlin.com/html5/webvtt-example.html"
frameborder="0" allow="encrypted-media;" allowfullscreen /> """)

[输出]:

但是当你尝试从https://iandevlin.com/html5/webvtt-example.html获取HTML，并通过srcdoc将其加载到iframe中时，它无法加载字幕：

%%html
<iframe width="800" height="500" 
srcdoc='
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <title>WebVTT Video Subtitles Example for Chrome</title>
    <meta name="keywords" content="webvtt,webvtt example,chrome,html5" />
    <meta name="description" content="Sample HTML5 code that shows how Chrome supports WebVTT subtitles" />
    <style>
        body { 
            padding:10px;
            font-size:80%;
            font-family:verdana, serif;
        }
        figure { margin:30px 0; }
    </style>
</head>
<body>
    <header>
        <h1>WebVTT Video Subtitles Example for Chrome</h1>
        <p><a href="http://www.iandevlin.com/blog/2012/06/html5/google-chrome-supports-webvtt-subtitles">Read the full article</a></p>
        <p>To view this in Google Chrome, you must first enable the <code>track</code> element:</p>
        <ol>
            <li>Go to the configuration tools in Chrome by typing <code>chrome:flags</code> in the address bar</li>
            <li>Search for "Enable the &lt;track&gt; element" and activate it</li>
            <li>Restart the browser</li>
        </ol>
    </header>
    <figure>
        <video controls preload="metadata" poster="http://html5multimedia.com/media/elephants-dream.title.jpg" width="422" height="253">
            <source src="http://html5multimedia.com/media/elephants-dream-medium.webm" type="video/webm">
            <track label="English subtitles" kind="subtitles" srclang="en" src="https://iandevlin.com/html5/english-subtitles.vtt" default>
        </video>
        <figcaption>
            <small><a href="http://www.elephantsdream.org">Elephant's Dream</a> &ndash; &copy; copyright 2006, Blender Foundation / Netherlands Media Art Institute</small>
        </figcaption>
    </figure>
</body>
</html>' />

仔细查看控制台，根据@atalay-k的评论，你会看到：

试图从URL about:srcdoc加载URL https://iandevlin.com/html5/english-subtitles.vtt，这是一次不安全的尝试。域名、协议和端口必须匹配。

这似乎是一个麻烦的问题，来源于在HTML视频中加载字幕时出现的安全错误

在Jupyter笔记本中播放带字幕的视频。

如何在Jupyter笔记本中播放带字幕的视频？

当我尝试添加一个 .vtt 文件作为字幕时，该选项出现了

但是在播放视频时没有字幕/标题。如何在Jupyter笔记本中播放带字幕的视频？

当我尝试添加一个 `.vtt` 文件作为字幕时，该选项出现了