Friday, March 23, 2018

HTML5 video player

<!DOCTYPE html>
<html>
<body>

<button onclick="playVid()" type="button">Play</button>
<button onclick="pauseVid()" type="button">Pause</button>
<button onclick="seekVid()" type="button">Seek</button>
<button onclick="ccVid()" type="button">CC</button><br>
<video id="myVideo" width="600" height="400" autoplay="autoplay" controls='false'>
  <source src="./big.mp4" type="video/mp4">
  <track label="pt" kind="subtitles" srclang="pt" src="./small.vtt" default />
  Your browser does not support the video tag.
</video>
<script>

var vid = document.getElementById("myVideo");
var aaaa = 'showing';
function myFunction() {
    document.getElementById("myVideo").controls = true;
}

function playVid() {
    vid.play();
}

function pauseVid() {
    vid.pause();
}

function seekVid() {
    var cTime = vid.currentTime;
    vid.currentTime += 3;
}

function ccVid() {
   if (aaaa==='showing')
      aaaa = 'hidden';
   else
      aaaa = 'showing';
   for (var i = 0; i < vid.textTracks.length; i++)
      vid.textTracks[i].mode = aaaa;
}

</script>
</body>
</html>

1 comment: