0

I've been trying to use the <audio> tag to play MP3 files and the <video> tag to play MP4 files, both with the controls attribute, and they work fine, but it isn't possible to apply custom styles over them and they change from one browser to another.

Basically, <audio> tag works like this:

<audio controls loop>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

And the <video> tag like this:

<video controls loop>
  <source src="video.mp4" type="video/mp4">
</video>

So I realized the default audio player set to the new Media Widgets introduced in WordPress 4.8 have nice players and they could be enough and I'd like to borrow their properties to use inside the body of audio/video format posts.

How can I achieve that?

-1

While writting this question, I went further to be sure I wasn't asking something trivial and it seems I was.

I realized the players of both the theme I used and those new WordPress widgets use the same <div class> called .mejs-mediaelement and then I realized it points to MediaElement.js indicated both in the Make WordPress blog post and the first Google result when we search for this name (I thought WordPress had its own workaround, but I was wrong).

However, we don't need to install the plugin because, as Jacob Peattie explained in a comment below:

WordPress already has MediaElement.js built in and uses it for its audio and video players.

Then, we just need to add the following shortcodes respectively in order to add audio and video files to our posts:

[audio src="mymedia.mp3"]

[video src="mymedia.mp4" width="640" height="360"]

Then, it'll look just like the new Media Widgets because they do practically the same, but as a widget, of-course.

| improve this answer | |
  • 1
    WordPress already has those shortcodes. WordPress already has MediaElement.js built in and uses it for its audio and video players. If you just add the audio or video using the media library it will use the same player as the widgets. – Jacob Peattie Feb 8 '19 at 6:38
  • Very precise, @JacobPeattie! That's explain why it works even when the plugin is inactive (I was thinking it was due to cache). I'll edit my answer, but you can also add your comment as an answer that I accept it right way. – JorgeAmVF Feb 8 '19 at 6:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.