Skip to content

Instantly share code, notes, and snippets.

@shubhamkamthania

shubhamkamthania/videocomp.js

Created June 28, 2020 18:56
Show Gist options
  • Save shubhamkamthania/ac731fb433a2c4acae0853723acf30ff to your computer and use it in GitHub Desktop.
Save shubhamkamthania/ac731fb433a2c4acae0853723acf30ff to your computer and use it in GitHub Desktop.
Download ZIP
Raw
videocomp.js
<div class="relative max-w-sm rounded overflow-hidden shadow-lg mx-auto my-8">
<div>
<span class="left-0 top-0 text-red-700 absolute">Live</span>
<span class=" right-0 bottom-0 flex w-2/3 absolute">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<div class="relative">
<select class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-state">
<option value={0}>Auto</option>
<option value={128}>128 kbit</option>
<option value={256}>256 kbit</option>
<option value={512}>512 kbit</option>
<option value={1000}>1 mbit</option>
<option value={1500}>1.5 mbit</option>
<option value={2000}>2 mbit</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
</div>
<button class="bg-blue-500 w-full md:w-1/2 hover:bg-blue-700 text-white font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
Stop
</button></span>
</div>
<video class="w-full" src="http://media.w3.org/2010/05/sintel/trailer.mp4" alt="Sunset in the mountains" autoplay muted />
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment