Unpredictable result

JavaScript
1 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex, nofollow">
</head>

<body>
    <div class="video_bg">
        <div class="video_wrap">
            <video id="videot" poster="media/videoframe.png" loop autoplay muted>
                <source type="video/webm" src="media/videoframe.webm">
                <source type="video/mp4" src="media/videoframe.mp4">
            </video>
        </div>
    </div>

    <script>
        var myVideo = document.getElementById('videot');
        document.addEventListener("DOMContentLoaded", function() {
            alert(String(myVideo.duration) + " seconds");
        });
    </script>
</body></html>

ALERT result – NAN seconds –

I upload this HTML one through the local server (Open Server)…
But when testing through Chrome DevTools, the correct result is shown…

where is the mistake ???

2

Is the videot element loaded dynamically?
What’s the HTML surrounding this?

3

I revised my message

4

I would probably use a different event… canplay or loadeddata…

5

what is bad about this event ???

6

The DomContentLoaded event occurs when the HTML tags have all been loaded, and before all of the content such as images or videos have been accessed.

If you want the video duration, you may have to use the document load event instead, when the browser has had time to load the video.

There are also other video-specific events that could be used too so that you can get the information earlier than on load completed.

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.