added player

server.py

@@ -34,6 +34,10 @@ def videos():
 def faq():
 	return render_template('faq.html',  active_page='faq')
 
+@app.route('/play')
+def play():
+	return render_template('play.html',  active_page='play')
+
 if __name__ == '__main__':
 	app.debug = True
 	app.run()

static/mediaelementjs/bigplay.svg

+<?xml version="1.0" standalone="no"?>
+<svg id="bigplay" viewBox="0 0 100 200" style="background-color:#ffffff00" version="1.1"
+	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
+	x="0px" y="0px" width="100px" height="200px"
+>
+	<g id="dark">
+		<path id="Polygon"  d="M 72.5 49.5 L 38.75 68.9856 L 38.75 30.0144 L 72.5 49.5 Z" fill="#ffffff" opacity="0.75" />
+		<path id="Ellipse" d="M 13 50.5 C 13 29.7891 29.7891 13 50.5 13 C 71.2109 13 88 29.7891 88 50.5 C 88 71.2109 71.2109 88 50.5 88 C 29.7891 88 13 71.2109 13 50.5 Z" stroke="#ffffff" stroke-width="5" fill="none" opacity="0.75"/>
+	</g>
+	<g id="light">
+		<path id="Polygon2"  d="M 72.5 149.5 L 38.75 168.9856 L 38.75 130.0144 L 72.5 149.5 Z" fill="#ffffff" opacity="1.0" />
+		<path id="Ellipse2" d="M 13 150.5 C 13 129.7891 29.7891 113 50.5 113 C 71.2109 113 88 129.7891 88 150.5 C 88 171.211 71.2109 188 50.5 188 C 29.7891 188 13 171.211 13 150.5 Z" stroke="#ffffff" stroke-width="5" fill="none" opacity="1.0"/>
+	</g>
+</svg>
\ No newline at end of file

static/mediaelementjs/controls.svg

+<?xml version="1.0" standalone="no"?><!-- Generator: Adobe Fireworks CS6, Export SVG Extension by Aaron Beall (http://fireworks.abeall.com) . Version: 0.6.1  --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg id="controls.fw-Page%201" viewBox="0 0 144 32" style="background-color:#ffffff00" version="1.1"
	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"
	x="0px" y="0px" width="144px" height="32px">
	<defs>
		<radialGradient id="gradient1" cx="50%" cy="50%" r="50%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#f2f2f2" stop-opacity="0.2" offset="100%"/>
		</radialGradient>
		<linearGradient id="gradient2" x1="50%" y1="-7.8652%" x2="50%" y2="249.6629%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient3" x1="50%" y1="0%" x2="50%" y2="238.75%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient4" x1="50%" y1="0%" x2="50%" y2="100%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient5" x1="50%" y1="-33.3333%" x2="50%" y2="152.0833%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient6" x1="50%" y1="0%" x2="50%" y2="100%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient7" x1="50%" y1="-33.3333%" x2="50%" y2="152.0833%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient8" x1="50%" y1="0%" x2="50%" y2="100%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient9" x1="50%" y1="0%" x2="50%" y2="100%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient10" x1="50%" y1="0%" x2="50%" y2="100%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient11" x1="50%" y1="0%" x2="50%" y2="100%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient12" x1="50%" y1="0%" x2="50%" y2="238.75%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient13" x1="40%" y1="-140%" x2="40%" y2="98.75%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient14" x1="50%" y1="0%" x2="50%" y2="238.75%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient15" x1="60%" y1="-140%" x2="60%" y2="98.75%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient16" x1="50%" y1="0%" x2="50%" y2="298.4375%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient17" x1="50%" y1="0%" x2="50%" y2="238.75%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient18" x1="50%" y1="-200%" x2="50%" y2="100%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient19" x1="50%" y1="-200%" x2="50%" y2="110.9375%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient20" x1="55%" y1="0%" x2="55%" y2="100%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="100%"/>
		</linearGradient>
		<linearGradient id="gradient21" x1="50%" y1="0%" x2="50%" y2="100%">
			<stop stop-color="#ffffff" stop-opacity="1" offset="0%"/>
			<stop stop-color="#c8c8c8" stop-opacity="1" offset="99.4444%"/>
		</linearGradient>
	</defs>
	<g id="BG">
	</g>
	<g id="controls">
		<path id="Line" d="M 98.5 7.5 L 109.5 7.5 " stroke="#ffffff" stroke-width="1" fill="none"/>
		<path id="Line2" d="M 98.5 3.5 L 109.5 3.5 " stroke="#ffffff" stroke-width="1" fill="none"/>
		<path id="Line3" d="M 98.5 11.5 L 109.5 11.5 " stroke="#ffffff" stroke-width="1" fill="none"/>
		<path id="Ellipse" d="M 108 11.5 C 108 10.6716 108.4477 10 109 10 C 109.5523 10 110 10.6716 110 11.5 C 110 12.3284 109.5523 13 109 13 C 108.4477 13 108 12.3284 108 11.5 Z" fill="#ffffff"/>
		<path id="Ellipse2" d="M 104 7.5 C 104 6.6716 104.4477 6 105 6 C 105.5523 6 106 6.6716 106 7.5 C 106 8.3284 105.5523 9 105 9 C 104.4477 9 104 8.3284 104 7.5 Z" fill="#ffffff"/>
		<path id="Ellipse3" d="M 108 3.5 C 108 2.6716 108.4477 2 109 2 C 109.5523 2 110 2.6716 110 3.5 C 110 4.3284 109.5523 5 109 5 C 108.4477 5 108 4.3284 108 3.5 Z" fill="#ffffff"/>
	</g>
	<g id="backlight">
		<g id="off">
			<rect x="83" y="21" width="10" height="6" stroke="#ffffff" stroke-width="1" fill="#333333"/>
		</g>
		<g id="on">
			<path id="Ellipse4" d="M 81 8 C 81 5.2385 84.134 3 88 3 C 91.866 3 95 5.2385 95 8 C 95 10.7615 91.866 13 88 13 C 84.134 13 81 10.7615 81 8 Z" fill="url(#gradient1)"/>
			<rect x="83" y="5" width="10" height="6" stroke="#ffffff" stroke-width="1" fill="#333333"/>
		</g>
	</g>
	<g id="loop">
		<g id="on2">
			<path d="M 73.795 4.205 C 75.2155 4.8785 76.2 6.3234 76.2 8 C 76.2 10.3196 74.3196 12.2 72 12.2 C 69.6804 12.2 67.8 10.3196 67.8 8 C 67.8 6.3234 68.7845 4.8785 70.205 4.205 L 68.875 2.875 C 67.1501 3.9289 66 5.8306 66 8 C 66 11.3138 68.6862 14 72 14 C 75.3138 14 78 11.3138 78 8 C 78 5.8306 76.8499 3.9289 75.125 2.875 L 73.795 4.205 Z" fill="url(#gradient2)"/>
			<path d="M 71 2 L 66 2 L 71 7 L 71 2 Z" fill="url(#gradient3)"/>
		</g>
		<g id="off2">
			<path d="M 73.795 20.205 C 75.2155 20.8785 76.2 22.3234 76.2 24 C 76.2 26.3196 74.3196 28.2 72 28.2 C 69.6804 28.2 67.8 26.3196 67.8 24 C 67.8 22.3234 68.7845 20.8785 70.205 20.205 L 68.875 18.875 C 67.1501 19.9289 66 21.8306 66 24 C 66 27.3138 68.6862 30 72 30 C 75.3138 30 78 27.3138 78 24 C 78 21.8306 76.8499 19.9289 75.125 18.875 L 73.795 20.205 Z" fill="#a8a8b7"/>
			<path d="M 71 18 L 66 18 L 71 23 L 71 18 Z" fill="#a8a8b7"/>
		</g>
	</g>
	<g id="cc">
		<rect visibility="hidden" x="49" y="2" width="14" height="12" stroke="#b0b0b0" stroke-width="1" fill="none"/>
		<text visibility="hidden" x="49" y="17" width="14" fill="#ffffff" style="font-size: 10px; color: #ffffff; font-family: Arial; text-align: center; "><tspan><![CDATA[cc]]></tspan></text>
		<path d="M 55 7 C 50.2813 3.7813 50.063 12.9405 55 10 " stroke="#ffffff" stroke-width="1" fill="none"/>
		<path d="M 60 7 C 55.2813 3.7813 55.063 12.9405 60 10 " stroke="#ffffff" stroke-width="1" fill="none"/>
		<path d="M 50 3 L 62 3 L 62 13 L 50 13 L 50 3 ZM 49 2 L 49 14 L 63 14 L 63 2 L 49 2 Z" fill="url(#gradient4)"/>
		<rect x="49" y="2" width="14" height="12" fill="none"/>
	</g>
	<g id="volume">
		<g id="no%20sound">
			<rect x="17" y="5" width="5" height="6" fill="url(#gradient5)"/>
			<path d="M 21 5 L 25 2 L 25 14 L 21 11.0625 L 21 5 Z" fill="url(#gradient6)"/>
		</g>
		<g id="sound%20bars">
			<rect x="17" y="21" width="5" height="6" fill="url(#gradient7)"/>
			<path d="M 21 21 L 25 18 L 25 30 L 21 27.0625 L 21 21 Z" fill="url(#gradient8)"/>
			<path d="M 27 18 C 27 18 30.0625 17.375 30 24 C 29.9375 30.625 27 30 27 30 " stroke="#ffffff" stroke-width="1" fill="none"/>
			<path d="M 26 21.0079 C 26 21.0079 28.041 20.6962 27.9994 24 C 27.9577 27.3038 26 26.9921 26 26.9921 " stroke="#ffffff" stroke-width="1" fill="none"/>
		</g>
	</g>
	<g id="play/pause">
		<g id="play">
			<path id="Polygon" d="M 14 8.5 L 3 14 L 3 3 L 14 8.5 Z" fill="url(#gradient9)"/>
		</g>
		<g id="pause">
			<rect x="3" y="18" width="3" height="12" fill="url(#gradient10)"/>
			<rect x="10" y="18" width="3" height="12" fill="url(#gradient11)"/>
		</g>
	</g>
	<g id="fullscreen">
		<g id="enter%201">
			<path d="M 34 2 L 39 2 L 34 7 L 34 2 Z" fill="url(#gradient12)"/>
			<path d="M 34 14 L 39 14 L 34 9 L 34 14 Z" fill="url(#gradient13)"/>
			<path d="M 46 2 L 41 2 L 46 7 L 46 2 Z" fill="url(#gradient14)"/>
			<path d="M 46 14 L 41 14 L 46 9 L 46 14 Z" fill="url(#gradient15)"/>
		</g>
		<g id="exit">
			<path d="M 42 22 L 46 22 L 42 18 L 42 22 Z" fill="url(#gradient16)"/>
			<path d="M 38 22 L 38 18 L 34 22 L 38 22 Z" fill="url(#gradient17)"/>
			<path d="M 38 26 L 34 26 L 38 30 L 38 26 Z" fill="url(#gradient18)"/>
			<path d="M 42 26 L 42 30 L 46 26 L 42 26 Z" fill="url(#gradient19)"/>
		</g>
	</g>
	<g id="stop">
		<rect x="115" y="3" width="10" height="10" fill="url(#gradient20)"/>
	</g>
	<g id="chooser">
		<path d="M 135.2346 6.1522 C 136.2551 5.7295 137.4251 6.2141 137.8478 7.2346 C 138.2704 8.2551 137.7859 9.425 136.7654 9.8478 C 135.7449 10.2705 134.5749 9.7859 134.1522 8.7654 C 133.7295 7.7449 134.2141 6.5749 135.2346 6.1522 ZM 133.2735 1.4176 L 136 4.0054 L 138.7265 1.4176 L 138.8246 5.1754 L 142.5824 5.2735 L 139.9946 8 L 142.5824 10.7265 L 138.8246 10.8246 L 138.7265 14.5824 L 136 11.9946 L 133.2735 14.5824 L 133.1754 10.8246 L 129.4176 10.7265 L 132.0054 8 L 129.4176 5.2735 L 133.1754 5.1754 L 133.2735 1.4176 Z" fill="url(#gradient21)"/>
	</g></svg>
\ No newline at end of file