Proceed to the next video of the custom post type but remain on the same post

So I have a custom post type in WordPress that displays html5 videos. Is there a way I could automatically play the next video once it's over and still remain on the same post? I'm thinking something like this would be the perfect example.

Here's a link to what I have so far.

I have a custom post type called nowthisearth_post and a custom field nowthisearth_media_url that is pulling in the link to the MP4 file. Right now there are 6 posts and would like for it to proceed to the next one after the video ends. Here's what I have right now..

I started off using the get_next_post(); function but it doesn't seem to work. I'm thinking maybe it would need to be converted into some sort of video playlist with thumbnails at the bottom.

div class=container-fluid nowthis-header
div class=container style=z-index:11;
    div class=row
        div class=col-12
            ?php $mrssfeed_url = get_post_meta(get_the_id(), 'nowthisearth_media_url', true);?
            video class=nowthis-video style= width=1280 height=720 autoplay=true controls loop
              source src=?php echo $mrssfeed_url ? type=video/mp4
                Your browser does not support the video tag.
            /video
        /div
        div class=col-12
            ?php $next_post = get_next_post();
            if ( is_a( $next_post , 'nowthisearth_post' ) ) : ?
                a href=?php echo get_permalink( $next_post-ID ); ??php echo get_the_title( $next_post-ID ); ?/a
            ?php endif; ?
        /div
    /div
/div

Topic playlist video-player custom-field custom-post-types Wordpress

Category Web


This seems to work for now..

Added onended="onEndVideo()" to the video element like so.

<?php $mrssfeed_url = get_post_meta(get_the_id(), 'nowthisearth_media_url', true);?>
<video onended="onEndVideo()" id="nowthis-video" class="nowthis-video" style="" width="1280" height="720" autoplay="true" controls>
   <source src="<?php echo $mrssfeed_url ?>" type="video/mp4">
   Your browser does not support the video tag.
</video>

Then did this for the javascript..

function onEndVideo() {
   document.querySelector("a.next-post").click();
}

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.