Which way to calculate Video time by the method getTime ()

2

Hello, everyone!

Javascript method named getTime(); as well as the getDuration(); that gives us the duration of a video in question if aggregated to <object/> and <embed/> .

Well, it's my question:

How to capture from start to end of a video by method getTime(); ?

And how to compare if it stopped, and display a message notifying you that the video has ended?

Code

var video = document.embeds[0];

var max = video.getDuration();

var seg = video.getTime();   

var con = document.getElementById('txt');

function Tempo()
{     
seg = video.getTime().toFixed(); 

con.textContent = seg;
}     
if ( seg == con ) { clearInterval(id) || alert(video.getDuration().toFixed()) }

var id = setInterval("Tempo()", 1000);  
<embed src="http://cache28.vuclip.com/53/65/5365756905f3dbd79909b3cce52649a3/ba63207/NiceGuys_5365_w_3.3gp"/>

<hr>

<span id='txt'></span>

Given what I've done so far. It is only necessary to compare if it arrived at the limit of the output <span id='txt'></span> and then show the alert(); .

    
asked by anonymous 14.06.2016 / 23:49

2 answers

2

The object tag is for working with plugins, each plugin probably uses a different method, the question I'm going to quote is, instead of <embed> use the <video> tag that is most correct for this and will be supported by all modern browsers without the need for plugins, ie no plugins browsers will only need the CODECs , usually most browsers use the CODECs of the operating system and / or has CODECs .

The <video> tag has support for various functions and parameters regardless of CODEC (the same goes for audios, but in case we use the tag <audio> ).

In an example like this:

<video id="videoID" width="320" height="240" controls>
      <source src="http://cache28.vuclip.com/53/65/5365756905f3dbd79909b3cce52649a3/ba63207/NiceGuys_5365_w_3.3gp"type="video/3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'>
</video>

<script>
(function () {
    var obj = document.getElementById("videoID");
    console.log(obj.currentTime, obj.duration, obj.ended);
})();
</script>
  • .currentTime returns or sets current position in seconds
  • .duration returns the duration of the video
  • .ended returns true if the video has finished, otherwise returns false

In addition to these you can also use the events as:

The code looks like this:

<video id="videoID" width="320" height="240" controls>
      <source src="video.3gp" type="video/3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'>
</video>

<hr>

<span id='txt'></span>

<script>
function parseTime(seconds)
{
    seconds = !seconds ? 0 : seconds;

    var hours = Math.floor(seconds / 3600);
    var mins = Math.floor((seconds - (hours * 3600)) / 60);
    var secs = Math.floor(seconds % 60);
    var formated = [];

    if (hours > 0) {
        formated.push(hours < 10 ? "0" + hours : hours);
    }

    formated.push(mins < 10 ? "0" + String(mins) : mins);
    formated.push(secs < 10 ? "0" + String(secs) : secs);

    return formated.join(":");
}

(function() {
    var video    = document.getElementById("videoID");
    var boxTexto = document.getElementById("txt");
    var isEnded  = false;

    video.addEventListener("ended", function() {
        isEnded = true;

        boxTexto.textContent = "Quer uma pipoquinha a mais, compre novos ingressos.";
    }, true);

    video.addEventListener("timeupdate", function() {
        if (!isEnded) {
            boxTexto.textContent = parseTime(this.currentTime) + " / " + parseTime(this.duration);
        }
    }, true);
})();
<script>
    
15.06.2016 / 07:12
0

Added what @Guilherme Nascimento said about:

Plug-ins

The purpose of a plug-in is to extend the functionality of the HTML browser.

HTML Plug-ins

Auxiliary applications are computer programs that extend the standard functionality of a web browser.

Auxiliary applications are also called plug-ins.

Examples of known plug-ins are Java, Flash mini-applications.

Plug-ins can be added to web pages with the tag <object/> or the tag <embed/> .

Plug-ins can be used for many purposes other than Video and Audio.

As well as:

The <object/> element is supported by all browsers.

The element defines an embedded object within an HTML document.

It is used to incorporate plug-ins (such as Java applets, PDF readers, Flash Players, among others) into web pages.

The <embed/> element is supported on all major browsers.

The <embed/> element also defines an embedded object within an HTML document.

Web browsers have been supporting the <embed/> element for a long time. However, it has not been a part of the HTML specification before HTML5. The element will validate on an HTML5 page, but not on an HTML 4 page.

Alright, enough of such explanations and let's get to what matters, the answer code of the question. Finally after hard work I got to the end, put to anyone who wants to do the same know with it, ha detail I used a Firefox with MPlayer Plugin in it.

var video = document.embeds[0];

function tempo()
{     
var seg = video.getDuration() - video.getTime();

document.getElementById('txt').textContent = seg.toFixed();

if ((seg - 1) >= 0) { document.getElement('txt').textContent = 'Player Ativo...'; } else { document.getElement('txt').textContent = 'Player Inativo.'; clearInterval(zero); } 
}

var zero = setInterval(tempo, 3500);
<embed src="http://cache28.vuclip.com/53/65/5365756905f3dbd79909b3cce52649a3/ba63207/NiceGuys_5365_w_3.3gp"/>

<hr>

<span id='txt'></span>

   
  

Actually what I really wanted with this code was this: after finishing the video, go back to your thumbnail / screenshot

     

But for this I needed to capture the elapsed time and then show the message, and this message was actually just an indication whether or not it worked for the countdown of the length of the video.

Now it's up to you to let go of creativity.

    
16.06.2016 / 08:41