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>

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>

• custom-post-types
• custom-field
• video-player
• playlist

• 1 If you're changing the URL of the media file on a post then you'd maybe have to look at AJAX so you can get the next post, get it's info and then change the URL of the current video on our page so the user can play the next video. – Tony Djukic Commented Jan 29, 2021 at 16:03
• I was looking into AJAX but I just don't know how to implement it. I think I have found a temporary solution which is to use an event listener on video end and then proceed to the next page. I'll post below. Although, I would like to see how it could be done in AJAX. – Tam Commented Jan 29, 2021 at 22:58

1 Answer 1

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();
}