Controle de Midia Play

[jsmoraes]

Controle de mídia com script para play, pause, stop. Tag Video HTML 5. Uso de midia e imagens do Dropbox.

Código Fonte:

<nabble_embed>
<div style="position:relative; top:0px; left:0px; width:176px;height:152px;margin:0px 0px 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>
<span style=display:block;text-align:center>
<img id="cursorbtPlay" 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()" onmouseover="mid_play_cursor()">
<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()">
</span>
</div>
</nabble_embed>
<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();
document.getElementById("cursorbtPlay").style.cursor = "wait" ;
  }
}

function mid_play_cursor(){
var myMidea = document.getElementById("myMidea");
  if (myMidea.paused) {
    document.getElementById("cursorbtPlay").style.cursor = "pointer";
  }
}
</script>