How to load mediaelement.js in theme template?

I'm developing a video oriented theme. I need to include native WordPress video player in my page template. This is what I'm doing:

  1. $video url comes from a custom field. It outputs the video file url http://example.com/video.mp4

  2. do_shortcode() outputs the standard [video] shortcode used in posts/pages.

    $video = get_field( video_file_url); echo do_shortcode('[video src='.$video.']');

This is what I'm getting: The control bar color is light (not dark as in the standard WP player) and there's not play button in the middle center of the video.

I want to achieve the standard dark colored WordPress video player with a play button in the middle.

I guess I need to load mediaelement.js in my theme footer.php. I'm developing the theme from scratch and haven't done anything about mediaelement. Could that be the reason I'm getting light colored video player?

How can I output standart video player in the template?

Topic video-player media theme-development Wordpress

Category Web

1
answered at

I included wp_head(); in the beginning of my header.php file. wp_footer(); was included at the end of the footer.php file.

Failure in including them led to the problem with the video player. Everything is working fine after adding wp_head(); and wp_footer();.

Thank you, birgire!

About

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