Jupyter-Video-Widget 0.3.1

# Jupyter Video Widget

该项目的目标是开发一个自定义 Jupyter [widget](https://github.com/ipython/ipywidgets)，通过嵌入在 Jupyter 中的 HTML5 视频播放器轻松播放视频（本地和远程）笔记本。这个小部件项目是使用非常方便的 Cookiecutter [模板](https://github.com/jupyter-widgets/widget-cookiecutter) 初始化的。


# Example



# Install

## Prerequisites

如果尚未启用，则需要启用与 Jupyter 一起安装的 ipywidgets 笔记本扩展。您可以使用命令 `jupyter nbextension list` 查看当前启用了哪些（如果有）笔记本扩展。使用以下命令启用它：

```bash
jupyter nbextension enable --py --sys-prefix widgetsnbextension
```


##标准安装

使用pip安装：

```bash
pip install Jupyter-Video-Widget

jupyter nbextension enable --py --sys-prefix jpy_video
```


## 开发者安装

```bash
git clone git@github.com:Who8MyLunch/Jupyter_Video_Widget.git

cd Jupyter_Video_Widget

pip install -e .
jupyter nbextension install --py --symlink --sys-prefix jpy_video
jupyter nbextension enable --py --sys-prefix jpy_video
```


# 修改 JavaScript 代码

Jupyter 小部件开发使用 [npm]([npm](https://docs.npmjs.com/getting-started/what-is-npm) (Node Package Manager) 来处理所有可怕的 JavaScript 细节。此源代码项目位于 js 文件夹中，npm 包由文件 js/package.json 定义。视频小部件的实际 JavaScript 源代码完全包含在文件 js/src/jupyter-video.js 中`。这是您在处理此项目的前端部分时需要编辑的唯一 JavaScript 文件。

在更改此 JavaScript 代码后，必须准备好并将其打包到项目 Python 端的 `static` 文件夹中。通过在 `js` 文件夹中键入以下命令来执行此操作：

```bash
npm install
```

有关更多有用信息，请参阅下面的链接：
- https://docs.npmjs.com/cli/install
- http://stackoverflow.com/questions/19578796/what-is-the-save-option-for-npm- install


# File Layout

注意：我发现 npmjs.com 上的这篇文章对理解推荐的文件夹布局非常有帮助：https://docs.npmjs.com/files/folders。

- Jupyter_Video_Widget/
- jpy_video/ 所有 Python 代码都放在这里
- 静态/ 准备和打包的 JS 代码最终放在这里
- version.py
- video.py Widget Python 代码
- server.py 包括支持字节范围请求的 http 文件服务器
- 复合。 py
- monotext_widget.py
- js/ 所有原始 JavaScript 代码都在这里
- dist/
- node_modules/
- src/
- jupyter-video.js Widget javaScript 代码
- embed.js 仅编辑以更新导出的模块名称（例如 video.js）
- 索引.js 仅编辑以更新导出的模块名称（例如 video.js）
- extension.js
- README.md
- package.json 仔细检查作者姓名、电子邮件地址、github org 等
- webpack.config.js 包含路径Python 端的静态 JS 文件夹
- setup.py
- setup.cfg
- MANIFEST.in 包含 jpy_video 下静态文件夹的相对路径
- requirements.txt


## 参考信息

- Jupyter widgets 文档：
- [Jupyter widgets github](https://github.com/ipython/ipywidgets)
- [构建自定义小部件](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Custom.html)
- [低级小部件教程](https://ipywidgets.readthedocs.io/en/latest /examples/Widget%20Low%20Level.html)

- 有用的 HTML5 文章：
- [关于实现自定义视频 HTML5 播放器的好东西](https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player)
- [视频播放器样式](https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics)
- [媒体缓冲和搜索，显示视频加载时间范围的好例子](https:// /developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges)
- [HTML5 媒体事件](https://www.w3.org/2010/05/video/mediaevents.html)

- 关于更多信息HTML5 和视频/音频媒体：
- https://www.html5rocks.com/en/tutorials/video/basics/
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement
- https ://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
- https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery
- https://developer .mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_manipulation