How to calculate Video Time by getTime()

Question

Hello, everybody!

In the Javascript exists method so-called getTime(); as well as the getDuration(); which gives us the duration of a video in question if aggregated to the <object/> and <embed/>.

That’s right, my question:

How to Capture from Start to End of a Video by method getTime();?

And how to compare if stopped, and show a message notifying that finished video?

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>

Seen what I have done so far. All that remains is to compare whether or not you arrived at the exit limit <span id='txt'></span> and soon after show the alert();.

Answer 1

The Object tag is for working with plugins, probably each plugin uses a different method, the question I will mention is, instead of <embed> use the tag <video> which is more correct for this and will be supported by all modern browsers without plugins, ie without plugins browsers will only need the Codecs, generally most browsers use the Codecs of the operating system and/or has Codecs own.

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

In such an example:

<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 the current position in seconds
• .duration returns the duration of the video
• .ended returns true if the video is finished, otherwise returns false

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

• ended
• timeupdate

The code would look 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>

Answer 2

Added what @Guilherme Nascimento said about:

Plug-ins

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

HTML Helpers (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 Mini Applications, Flash.

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

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

As well as:

The element <object/> 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 mini-applications, PDF readers, Flash Players, among others) into web pages.

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

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

Web browsers have supported the element <embed/> 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.

All right, enough of these explanations and let’s get down to business, the answer code of the question. Finally after hard work I reached the end, post for those who want to do the same know how it is, ha detalhe utilizei a Firefox with Mplayer Plug-in 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 the following: after finishing the video return your thumbnail/screenshot

But to do that, I needed to capture the elapsed time and then show the message, and this message was actually only indicative of whether or not it worked by counting down the duration of the video.

Now it’s up to you to unleash creativity.