Código para Audio e Video

[jsmoraes]

Código simples para inlcusão de um vídeo em área HTML

<video controls width="auto" height="auto"><source src="https://www.dropbox.com/s/c8rxwm0niy4dcua/mosaico.webm?dl=1"></video>

Devido a diferente apresentação do elemento "controls" entre os browsers, necessitamos incluir um código mais complexo com os botões customizados para play/pause/stop

 

Códigos para Áudio no campo de nome/descrição

1. necessita formato HTML

<div style="clear:both;float:left;margin:-50px -160px 0px 40px;height:120px;width:130px;
background-color:orange;border-radius:10px">
<img src="https://www.dropbox.com/s/0zb1sqkpdl35o8r/jsmfoto.jpg?dl=1" height="98px" width="126px" 
style="margin:2px 0px 1px 0px;border-radius:10px">
<audio id="myMidea" >
<source src="https://www.dropbox.com/s/answj1z9dhf75t1/inmagcloud.ogg?dl=1">
</audio><img src="https://www.dropbox.com/s/m2686okthlv5tl3/bt_play.jpg?dl=1" style="cursor:pointer;border-radius: 8px;margin:0px 10px 0px 0px" width="28px" height="20px" onclick="mid_play()"><img src="https://www.dropbox.com/s/5826cwgg7m566my/bt_Pause.jpg?dl=1" style="cursor:pointer;border-radius: 8px;margin:0px 10px 0px 0px" width="28px" height="20px" onclick="mid_pause()"><img src="https://www.dropbox.com/s/kdsgxna5usvuwsd/bt_Stop.jpg?dl=1" style="cursor:pointer;border-radius: 8px" width="28px" height="20px" onclick="mid_stop()">
</div>
<script>
function mid_pause() {
  var myMidea = document.getElementById("myMidea");
  if (myMidea.play) {
    myMidea.pause();
  }
}

function mid_stop() {
  var myMidea = document.getElementById("myMidea");
  if (myMidea.play) {
    myMidea.pause();
    myMidea.currentTime = 0;
  }
}

function mid_play() {
  var myMidea = document.getElementById("myMidea");
  if (myMidea.paused) {
    myMidea.play();
  }
}
</script>
<p>DOS vinculados a galáxia Grande Nuvem de Magalhães</p>

2. não necessita formato HTML

<nabble_embed>
<div style="clear:both;float:left;margin:-50px -160px 0px 40px;height:120px;width:130px;
background-color:orange;border-radius:10px">
<img src="https://www.dropbox.com/s/0zb1sqkpdl35o8r/jsmfoto.jpg?dl=1" height="98px" width="126px" 
style="margin:2px 0px 1px 0px;border-radius:10px">
<audio id="myMidea" >
<source src="https://www.dropbox.com/s/answj1z9dhf75t1/inmagcloud.ogg?dl=1">
</audio><img src="https://www.dropbox.com/s/m2686okthlv5tl3/bt_play.jpg?dl=1" style="cursor:pointer;border-radius: 8px;margin:0px 10px 0px 0px" width="28px" height="20px" onclick="mid_play()"><img src="https://www.dropbox.com/s/5826cwgg7m566my/bt_Pause.jpg?dl=1" style="cursor:pointer;border-radius: 8px;margin:0px 10px 0px 0px" width="28px" height="20px" onclick="mid_pause()"><img src="https://www.dropbox.com/s/kdsgxna5usvuwsd/bt_Stop.jpg?dl=1" style="cursor:pointer;border-radius: 8px" width="28px" height="20px" onclick="mid_stop()">
</div>
<script>
function mid_pause() {
  var myMidea = document.getElementById("myMidea");
  if (myMidea.play) {
    myMidea.pause();
  }
}

function mid_stop() {
  var myMidea = document.getElementById("myMidea");
  if (myMidea.play) {
    myMidea.pause();
    myMidea.currentTime = 0;
  }
}

function mid_play() {
  var myMidea = document.getElementById("myMidea");
  if (myMidea.paused) {
    myMidea.play();
  }
}
</script>
</nabble_embed>
DOS vinculados a galáxia Grande Nuvem de Magalhães

Código para Áudio na área de texto de mensagem:

Não necessita formato HTML

<nabble_embed><div style="position:relative;left:0px;top:0px;background-color:orange;color:white;width:140px;margin:0px 0px 0px 0px;height:32px;border-radius: 8px;align:left;"><img src="https://www.dropbox.com/s/0zb1sqkpdl35o8r/jsmfoto.jpg?dl=1" height="28px" width="38px"  style="border-radius:5px;margin:2px 2px 0px 4px"><img src="https://www.dropbox.com/s/m2686okthlv5tl3/bt_play.jpg?dl=1" style="cursor:pointer;border-radius: 8px;margin:0px 3px 0px 2px" width="28px" height="28px" onclick="aud_play()"><img src="https://www.dropbox.com/s/5826cwgg7m566my/bt_Pause.jpg?dl=1" style="cursor:pointer;border-radius: 8px;margin:0px 3px 0px 0px" width="28px" height="28px" onclick="aud_pause()"><img src="https://www.dropbox.com/s/kdsgxna5usvuwsd/bt_Stop.jpg?dl=1" style="cursor:pointer;border-radius: 8px" width="28px" height="28px" onclick="aud_stop()"><audio id="myAudio" style="width:100px"><source src="https://www.dropbox.com/s/vjrpylzi0skh44o/gostei_trab.ogg?dl=1"></audio></div>
<script>
function aud_pause() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.play) {
    myAudio.pause();
  }
}

function aud_stop() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.play) {
    myAudio.pause();
    myAudio.currentTime = 0;
  }
}

function aud_play() {
  var myAudio = document.getElementById("myAudio");
  if (myAudio.paused) {
    myAudio.play();
  }
}
</script></nabble_embed>

Código para vídeo no campo nome/descrição

não necessita formato HTML

<nabble_embed><div style="float:left; top:0px; left:0px; width:176px;height:152px;margin:0px -130px 0px 27px;background-color:orange">
<video id="myMidea" width="250" height="130" style="margin:0px 0px 0px -37px">
      <source src="https://www.dropbox.com/s/gnqirkc2meli8v0/sn2008.webm?dl=1" type="video/webm" />
      <source src="https://www.dropbox.com/s/iazx7fekjd8o4tw/sn2008.mp4?dl=1" type="video/mp4" />
</video><img src="https://www.dropbox.com/s/m2686okthlv5tl3/bt_play.jpg?dl=1" style="cursor:pointer;border-radius: 8px;margin:1px 10px 0px 0px" width="28px" height="19px" onclick="mid_play()"><img src="https://www.dropbox.com/s/5826cwgg7m566my/bt_Pause.jpg?dl=1" style="cursor:pointer;border-radius: 8px;margin:1px 10px 0px 0px" width="28px" height="19px" onclick="mid_pause()"><img src="https://www.dropbox.com/s/kdsgxna5usvuwsd/bt_Stop.jpg?dl=1" style="cursor:pointer;border-radius: 8px;margin:1px 0px 0px 0px" width="28px" height="19px" onclick="mid_stop()">
</div>
<script>
function mid_pause() {
  var myMidea = document.getElementById("myMidea");
  if (myMidea.play) {
    myMidea.pause();
  }
}

function mid_stop() {
  var myMidea = document.getElementById("myMidea");
  if (myMidea.play) {
    myMidea.pause();
    myMidea.currentTime = 0;
  }
}

function mid_play() {
  var myMidea = document.getElementById("myMidea");
  if (myMidea.paused) {
    myMidea.play();
  }
}
</script></nabble_embed>
<b><font size="5">Observatório de Astronomia Willian Herschel</font>

<font size="5">Vilatur - Saquarema - R J - Brasil</font></b>

<font size=-2>(Click here to <a href="http://jsmastronomy.30143.n7.nabble.com/">English Version</a>)</font >