Skip to content

Instantly share code, notes, and snippets.

@t2psyto

t2psyto/brython_video_canvas_example.html

Created January 11, 2018 08:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save t2psyto/d877d2d05180d82976f6ad1f8644e464 to your computer and use it in GitHub Desktop.
Save t2psyto/d877d2d05180d82976f6ad1f8644e464 to your computer and use it in GitHub Desktop.
Download ZIP
Brython video & canvas example
Raw
brython_video_canvas_example.html
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>video &amp; canvas example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.4.0/brython.min.js"></script>
</head>
<body onload="brython()">
<h1>Brython video &amp; canvas example</h1>
<div id='main'></div>
<script type="text/python">
import browser
from browser import html, document, window
aa = document['main']
videotag = html.VIDEO(id='video', width='320', height='240', loop=True, controls=True)
aa.html = ""
aa <= videotag
aa <= " "
canvastag = html.CANVAS(id='canvas', width='320', height='240')
aa <= canvastag
video = document['video']
video.src = "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4"
#video.play()
#video.style.display = 'none';
canvas = document['canvas']
# 反転
canvas.style.transform = 'rotateY(180deg)';
context = canvas.getContext('2d');
def OnDraw():
context.drawImage(video, 0, 0, canvas.width, canvas.height);
window.requestAnimationFrame(OnDraw);
OnDraw()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment