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?
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?
Share Improve this question asked Feb 8, 2019 at 5:59 JorgeAmVFJorgeAmVF 1198 bronze badges1 Answer
Reset to default -1While 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.