Skip to content

Instantly share code, notes, and snippets.

@bitmaybewise

bitmaybewise/audio-video.html

Created December 18, 2012 19:35
Show Gist options
  • Save bitmaybewise/4331178 to your computer and use it in GitHub Desktop.
Save bitmaybewise/4331178 to your computer and use it in GitHub Desktop.
Download ZIP
Novidades do HTML5: http://tableless.com.br/html5/
Raw
audio-video.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Audio and video</title>
</head>
<body>
<!-- Audio -->
<audio src="musica.ogg" controls="true" autoplay="true" />
<!-- Video -->
<video src="video.ogv" width="400" height="300" />
<video src="video.ogv" type="video/ogg;" codecs="theora, vorbis" />
<!-- Video MP4 -->
<video src="video.mp4" type="video/mp4;" codecs="mp4v.20.240, mp4a.40.2" />
</body>
</html>
Raw
details-summary-editable.html
<!DOCTYPE html>
<html>
<head>
<title>Details, summary and editable</title>
</head>
<body>
<details>
<summary>Copiando <progress max="39248" value="14718"> 37,5%</summary>
<dl>
<dt>Tamanho total:</dt>
<dd>39.248KB</dd>
<dt>Transferido:</dt>
<dd>14.718</dd>
<dt>Taxa de transferência:</dt>
<dd>127KB/s</dd>
<dt>Nome do arquivo:</dt>
<dd>HTML5.mp4</dd>
</dl>
</details>
<div contenteditable="true">
Edite-me...
</div>
</body>
</html>
Raw
drag-and-drop.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>Drag and drop</title>
<style type="text/css">
#boxA, #boxB {
float:left; width:100px; height:200px; padding:10px; margin:10px; font-size:70%;
}
#boxA { background-color: blue; }
#boxB { background-color: green; }
#drag, #drag2 {
width:50px; padding:5px; margin:5px; border:3px black solid; line-height:50px;
}
#drag { background-color: red;}
#drag2 { background-color: orange;}
</style>
<script type="text/javascript">
// Quando o usuário inicia um drag, guardamos no dataset do evento
// o id do objeto sendo arrastado
function dragStart(ev) {
ev.dataTransfer.setData("ID", ev.target.getAttribute('id'));
}
// Quando o usuário arrasta sobre um dos painéis, retornamos
// false para que o evento não se propague para o navegador, o
// que faria com que o conteúdo fosse selecionado.
function dragOver(ev) { return false; }
// Quando soltamos o elemento sobre um painel, movemos o
// elemento, lendo seu id do dataset do evento
function dragDrop(ev) {
var idelt = ev.dataTransfer.getData("ID");
ev.target.appendChild(document.getElementById(idelt));
}
</script>
</head>
<body>
<!-- Painel 1 -->
<div id="boxA" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">
<!-- Draggable 1 -->
<div id="drag" draggable="true" ondragstart="return dragStart(event)">drag me</div>
<!-- Draggable 2 -->
<div id="drag2" draggable="true" ondragstart="return dragStart(event)">drag me</div>
</div>
<!-- Painel 2 -->
<div id="boxB"
ondrop="return dragDrop(event)"
ondragover="return dragOver(event)">
</div>
</body>
</html>
Raw
forms.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Novos tipos de campos</title>
</head>
<body>
<!-- Novos tipos de campos -->
<form>
<input type="number" value="10.5" step="0.5" min="0" max="50" /><br/>
<input type="range" value="10.5" step="0.5" min="0" max="50" /><br/>
<input type="color" /><br/>
<input type="url" placeholder="http://exemplo.com" /><br/>
<input type="date" /><br/>
<input type="time" /><br/>
<input type="email" placeholder="contato@exemplo.com" /><br/>
<input type="search" placeholder="Pesquisa" /><br/>
<input type="text" required placeholder="Campo obrigatório" /><br/>
<input type="submit" />
</form>
</body>
</html>
Raw
pattern.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Atributo pattern</title>
</head>
<body>
<!-- Validação personalizada -->
<form>
<label for="cep">CEP:</label>
<input name="cep" id="cep" required pattern="\d{5}-?\d{3}" placeholder="11222-333" />
<input type="submit" />
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment