How To Embed MP3, MP4 and YouTube Media
Embedding media is a large part of web development these days and for those who aren't concerned about people downloading their media, these examples will work well. Covered here is MP3 audio embedding, as well as MP4 and YouTube inclusion.
Within most modern browsers there are default media players which handle audio and video quite compatibly. So I won't be including a media player within the code. These concepts are quite bare bones and basic, but they should give you at least an idea of how to embed media on your web pages.
Above are some examples of basic HTML embedding codes. The first is for embedding an MP3 song, the second an MP4 video that you may host yourself or use a remote URL for and the fourth being an iframe YouTube embed.
For the record, sometimes it's good to include a .wav and/or an .ogg version of the audio for a more responsive experience. However, I have noticed that as time goes by, MP3 is becoming more compatible across most OS's and browsers.
The MP4 embed code allows for a poster image to represent the video. From my experience, Firefox and Chrome both offer a default video player for MP4's. So unless you are looking to brand your site via a media player, the default player should suffice most of the time.
Here's an example of an embedded MP3. It's myself on bass, guitar and vocals.
I have assigned some CSS properties to the player in order to make it longer and responsive. From what I can see, it looks fine in all screen resolutions. Keep in mind that you will have to do the same with video embeds, in the event you want the player to be responsive to various screen resolutions.
Now let's take a look at how one might embed an MP3 into a web page using a PHP script and HTML form.
The input here allows for the name of the MP3 file. i.e. - 'its_time_rn.mp3'. As would be expected, the file name is turned into a variable during the PHP processing, being placed inside the URL code. As would always be the case, we first check to make sure the variable is set and isn't empty before doing any processing. Finally, the MP3 embed code is written to a web page. For more on that process, refer to my Web Page Creation Script article.
For processing a self-hosted or remote URL MP4 video, you could use the code below.
YouTube iframe video embeds can be used in lieu of the defined variables for MP3 and MP4 files. The PHP processing can be the same universally. The only difference being, of course, that you would use the entire URL for YouTube video inclusion. For instance...
This code can be found within the iframe embed code that YouTube offers for sharing. I prefer not to use their default code, as I find it less compatible for responsive design. By using my own definition of the iframe I can make it responsive via CSS styling properties.
MP4 embeds also allow for a poster image to be included, which would be the image placeholder for the video before it starts. This is something you could perhaps upload from the HTML form. For more on uploading images in a PHP script, refer to my Random Image Script tutorial.
This should just about cover the basics of media embedding for web pages. There isn't much to it, really. As mentioned, these methods do not protect your media from being downloaded, in the event someone chooses to view the source and download the material. So keep that in mind before you use this method. However, if you don't care about that kind of thing and in fact want people to download your media, then this processing procedure could be perfect.
In my personal opinion, uploading videos using a PHP script is very hard on the server. I find it much easier to simply upload the video via FTP and then include the name of the file in the script for processing. This is a matter of opinion, but if you have access to a server by FTP then you would save yourself a lot of grief by using that in lieu of an upload script for large files, such as MP4 videos.
