Video

js

by Park Mino

HTML

<video oncontextmenu="return false;" id="myVideo" width="375" controls muted>
    <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
</video>
<br>
Current time is: <span id="timeDisplay"></span><br>

<button onclick="playPause()">Play/Pause</button> 
<button onclick="fullScreen()">fullScreen</button>
<button onclick="startTime()">Start Time 50</button>
<button onclick="EndTime()">End Time 100</button>
<button onclick="reset()">time line reset</button>
<br>
Time : <span id="display"></span>

JavaScript

var sTimeLine = 100;
var eTimeLine = 150;
var myVideo = document.getElementById("myVideo"); 
function playPause() { 
  if (myVideo.paused) 
    myVideo.play(); 
  else 
    myVideo.pause(); 
}
function fullScreen(){
    if(myVideo.requestFullscreen) {
        myVideo.requestFullscreen();
    } else if(myVideo.mozRequestFullScreen) {
        myVideo.mozRequestFullScreen();
    } else if (myVideo.webkitRequestFullscreen) {
        myVideo.webkitRequestFullscreen();
    } else if (myVideo.msRequestFullscreen) {
        myVideo.msRequestFullscreen();
    }
}

function reset(){
    myVideo.pause();
    myVideo.currentTime = 0;
    myVideo.addEventListener('canplay', (event) => {
        myVideo.addEventListener('timeupdate', function(){
            eTimeLine = myVideo.duration;
        }, false);
        myVideo.play();
    });
    
}

function startTime(){
    myVideo.currentTime = sTimeLine;
    myVideo.play();
}

function EndTime(){
    myVideo.addEventListener('timeupdate', function(){
        if(myVideo.currentTime >= eTimeLine){
            myVideo.pause();
        }
    }, false);
    myVideo.play();
    
}

console.log(myVideo.currentSrc);
console.log(myVideo.currentTime);
console.log(myVideo.duration);
console.log(myVideo.ended);

function playEnd(){
    myVideo.addEventListener('ended', (event) => {
        console.log('Video stopped either because 1) it was over, ' + 'or 2) no further data is available.');
    });
}
playEnd();

myVideo.addEventListener('timeupdate',function(e){
    document.getElementById('timeDisplay').innerHTML = Math.floor(e.target.currentTime);
},true);

myVideo.addEventListener('timeupdate',function(e) {
    /* split currentTime (seconds) into separate hour/minute/second strings */
    var s=e.target.currentTime;
    var h=Math.floor(s/3600);
    s=s%3600;
    var m=Math.floor(s/60);
    s=Math.floor(s%60);
    /* pad the minute and second strings to two digits */
    if (s.toString().length < 2) s="0"+s;
    if (m.toString().length <...