js: show first frame of video when the page loads

Question

I'm editing a wordpress theme portfolio with a js function for hover play/pause videos. It almost works like I want -- when I hover over the video it plays, on mouse exit it stops and returns to the first frame. However, when the page is reloaded, the video does not show the first frame but some other part of the video. I'd like to add something to this code to make the first frame show on load. I haven't tried anything yet because i don't seem to have the right terminology for this. Here is my function:

$gallery.find( "video" ).each( function () {
        this.pause();
        let $this = $( this );
        $this.parents( ".item" ).find( "> a" ).on( "mouseenter", function () {

            $( this ).parents( ".item" ).find( "video" )[ 0 ].play();
        } ).on( "mouseleave", function () {
            $( this ).parents( ".item" ).find( "video" )[ 0 ].pause();
            $( this ).parents( ".item" ).find( "video" )[ 0 ].currentTime = 0;
        } );
    } );

does this answer your question? https://stackoverflow.com/questions/7323053/dynamically-using-the-first-frame-as-poster-in-html5-video (check 2./3. answer as well) — Markus Dresch, Oct 22 '20 at 13:15
yes, this worked. I added this.currentTime= 0 to my function. — Todd Williams, Oct 22 '20 at 16:23

score 0 · Accepted Answer · answered Oct 22 '20 at 13:25

0

This could help:

document.getElementById('THE VIDEO').addEventListener('loadedmetadata', function() {
    this.currentTime = 0;
}, false);

answered Oct 22 '20 at 13:25

Seabyte

369
1
2
13

score 0 · Answer 2 · answered Oct 22 '20 at 14:46

Thanks, this works. The new code for future reference:

$gallery.find( "video" ).each( function () {
        this.currentTime = 0;
        this.pause();
        let $this = $( this );
        $this.parents( ".item" ).find( "> a" ).on( "mouseenter", function () {

            $( this ).parents( ".item" ).find( "video" )[ 0 ].play();
        } ).on( "mouseleave", function () {
            $( this ).parents( ".item" ).find( "video" )[ 0 ].pause();
            $( this ).parents( ".item" ).find( "video" )[ 0 ].currentTime = 0;
        } );
   } );

js: show first frame of video when the page loads

2 Answers2