jupyter notebook에서 비디오를 임베딩하기

공부는 할 수록 늘어갑니다.

• 제가 왜 이지경에 이르렀는지를 다시 한번 확인해봅니다.
  • reinforcement learning 학습 중에 open AI gym의 렌더링 부분이 쥬피터 노트북에서 잘 되지 않는 것을 확인
  • 왜 안될까를 고민하다가, 이미지나 비디오를 쥬피터 노트북에서 띄우는 방법을 고민 및 공부
  • 이제 matplotlib와 cv2로 비디오는 만들었고(약간의 문제는 발생함)
  • 이제 IPython.display.HTML을 사용해서 쥬피터 노트북에 비디오를 띄우면 될것 같은데, 잘 안됨.
• 후. 그래서, HTML에서 비디오를 표현하는 방법에 대해서 정리하는게 좋을 것 같다, 라는 생각을 했어요.
  • 제 짧은 기억이 맞다면, HTML5와 HTML4에서 비디오를 표현하는 방법이 다른다, 뭐 그런 이야기는 들었던 것 같거든요.
• 뭐 그외에도 제가 추가로 공부해야 할 것들은 다음과 같은 것들이 있습니다.
  • 파이썬에서 비디오 저장시 코덱 으로 인한 재생 불가 문제
  • 비디오 파일 포맷(mp4, mov, avi 등)의 차이

jupyter notebook에 비디오 담기

• 사실 매우 간단합니다. 더 복잡하게 정리할 수 도 있는데, 일단은 사용가능한 방법으로 가장 심플한 형태로 담았습니다.
• IPython.display에서 HTML을 담을 수 있는 방식을 제공합니다. 따라서 저는 HTML 구문을 IPython.display.HTML에 담아주면 되는 것이구요.
• 그래서, 간단하게 HTML 코드를 넣어줍니다. 저렇게 넣어주면 쥬피터 노트북에서 알아서 이미지가 잘 뜹니다.

def show_video_in_jupyter_nb(width, height, video_url):
    from IPython.display import HTML
    return HTML("""<video width="{}" height="{}" controls>
    <source src={} type="video/mp4">
    </video>""".format(width, height, video_url))
video_url = '../../assets/images/markdown_img/180628_test_video.mp4'
show_video_in_jupyter_nb(200, 300,video_url)

• 마크다운에서도 잘 되는지 확인해봅니다.
  • 안됩니다. 그냥 안할게요……이제 더이상은 안할거야…
  • 쥬피터 노트북에서는 잘 됩니다….쭈굴…. ```html

<video width="200" height="300" controls>
    <source src=/assets/images/markdown_img/180628_test_video.mp4 type="video/mp4">
</video>


- 기타로 아래와 같이 표현하는 경우도 있더군요. 혹시나 위의 코드에 문제가 있을 때, 사용하려고 옮겨두었습니다. 

```python
import io
import base64
from IPython.display import HTML
video = io.open('../../assets/images/markdown_img/180628_test_video.mp4', 'r+b').read()
encoded = base64.b64encode(video)
HTML(data='''<video alt="test" controls>
                <source src="data:video/mp4;base64,{0}" type="video/mp4" />
             </video>'''.format(encoded.decode('ascii')))
""""""

wrap-up

• 파일 형식에 따라서 다른 경우들이 많습니다. 저는 일단 .mp4로 해보니까 별 문제가 없어서, 일단 이 아이를 사용하고 있기는 한데, 이후에 문제가 발생하면, 파일 형식, 인코딩 디코딩에 대해서도 정리하는 것이 필요할 것 같아요.

reference